@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--ff-ink:#0c0c10;--ff-white:#fff;--ff-lavender:#b29efb;--ff-violet:#c7c0f1;--ff-lime:#c7fc6a;--ff-ink-2:#16161c;--ff-ink-3:#1f1f27;--ff-ink-4:#2a2a35;--ff-ink-5:#3a3a47;--ff-paper:#fafafb;--ff-paper-2:#f4f4f6;--ff-paper-3:#ececef;--ff-stone-1:#d8d8dd;--ff-stone-2:#a8a8b0;--ff-stone-3:#6b6b75;--ff-stone-4:#3f3f47;--ff-lavender-50:#f3f0fe;--ff-lavender-100:#e5dffd;--ff-lavender-200:#d1c7fc;--ff-lavender-300:#b29efb;--ff-lavender-500:#8b6ff5;--ff-lavender-700:#5b3fd6;--ff-lavender-900:#2e1f7a;--ff-lime-50:#f4ffe0;--ff-lime-100:#e6fcb8;--ff-lime-300:#c7fc6a;--ff-lime-500:#9dd13a;--ff-lime-700:#5e8a18;--ff-success:var(--ff-lime-500);--ff-danger:#e5484d;--ff-danger-fg:#4a0f12;--ff-warn:#e8a33c;--ff-bg:var(--ff-paper);--ff-bg-raised:var(--ff-white);--ff-bg-sunken:var(--ff-paper-2);--ff-card:var(--ff-white);--ff-fg:var(--ff-ink);--ff-fg-muted:var(--ff-stone-3);--ff-fg-subtle:var(--ff-stone-2);--ff-border:var(--ff-paper-3);--ff-border-strong:var(--ff-stone-1);--ff-accent:var(--ff-lavender);--ff-accent-hover:var(--ff-lavender-500);--ff-accent-tint:var(--ff-lavender-50);--ff-signal:var(--ff-lime);--ff-signal-hover:var(--ff-lime-500);--ff-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;--ff-font-display:"Inter",-apple-system,"Helvetica Neue",sans-serif;--ff-font-serif:"Instrument Serif","Times New Roman",Georgia,serif;--ff-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--ff-text-xs:11px;--ff-text-sm:13px;--ff-text-base:15px;--ff-text-md:17px;--ff-text-lg:20px;--ff-text-xl:24px;--ff-text-2xl:32px;--ff-text-3xl:44px;--ff-space-1:4px;--ff-space-2:8px;--ff-space-3:12px;--ff-space-4:16px;--ff-space-5:24px;--ff-space-6:32px;--ff-space-7:48px;--ff-space-8:64px;--ff-radius-xs:4px;--ff-radius-sm:8px;--ff-radius-md:12px;--ff-radius-lg:16px;--ff-radius-xl:24px;--ff-radius-pill:999px;--ff-shadow-xs:0 1px 2px #0c0c100a,0 1px 1px #0c0c1008;--ff-shadow-sm:0 2px 4px #0c0c100a,0 1px 2px #0c0c100a;--ff-shadow-md:0 8px 24px -8px #0c0c1014,0 2px 4px #0c0c100a;--ff-shadow-lg:0 24px 48px -16px #0c0c101f,0 4px 8px #0c0c100a;--ff-shadow-inset:inset 0 0 0 1px #0c0c100f;--ff-shadow-glow-lavender:0 8px 32px -8px #b29efb99;--ff-shadow-glow-lime:0 8px 32px -8px #c7fc6a8c;--ff-ease-standard:cubic-bezier(.32,.72,0,1);--ff-ease-emphatic:cubic-bezier(.22,1,.36,1);--ff-ease-spring:cubic-bezier(.34,1.56,.64,1);--ff-dur-fast:.14s;--ff-dur-base:.22s;--ff-dur-slow:.42s;--color-bg:var(--ff-paper);--color-surface:var(--ff-white);--color-surface2:var(--ff-paper-2);--color-surface3:var(--ff-paper-3);--color-border:var(--ff-paper-3);--color-border-hover:var(--ff-stone-1);--color-text:var(--ff-ink);--color-text-secondary:var(--ff-stone-4);--color-text-muted:var(--ff-stone-3);--color-accent:var(--ff-ink);--color-accent-hover:var(--ff-ink-2);--color-accent-light:var(--ff-paper-2);--color-success:var(--ff-ink);--color-success-light:var(--ff-lime);--color-warning:#995b00;--color-warning-light:#fff0d4;--color-danger:#9b2d31;--color-danger-light:#fceaea;--radius-sm:var(--ff-radius-xs);--radius-md:var(--ff-radius-sm);--radius-lg:var(--ff-radius-lg);--radius-xl:var(--ff-radius-xl);--radius-full:var(--ff-radius-pill);--shadow-sm:var(--ff-shadow-xs);--shadow-md:var(--ff-shadow-sm);--shadow-lg:var(--ff-shadow-md);--shadow-accent:var(--ff-shadow-sm);--font-sans:var(--ff-font-sans);--font-display:var(--ff-font-serif);--transition:.14s var(--ff-ease-standard);--transition-slow:.42s var(--ff-ease-emphatic)}[data-theme=ink]{--ff-bg:var(--ff-ink);--ff-bg-raised:var(--ff-ink-2);--ff-bg-sunken:#07070a;--ff-card:var(--ff-ink-3);--ff-fg:var(--ff-white);--ff-fg-muted:#a8a8b5;--ff-fg-subtle:#6b6b78;--ff-border:var(--ff-ink-4);--ff-border-strong:var(--ff-ink-5);--ff-shadow-xs:0 1px 2px #0006;--ff-shadow-sm:0 2px 4px #0006;--ff-shadow-md:0 8px 24px -8px #00000080,inset 0 0 0 1px #ffffff0a;--color-bg:var(--ff-ink);--color-surface:var(--ff-ink-2);--color-surface2:var(--ff-ink-3);--color-border:var(--ff-ink-4);--color-text:var(--ff-white);--color-text-secondary:#a8a8b5;--color-text-muted:#6b6b78}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--ff-font-sans);background:var(--ff-bg);color:var(--ff-fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"ss01" 1,"cv11" 1;min-height:100vh;line-height:1.6}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#0c0c101f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0c0c1038}h1,h2,h3,h4,h5,h6{font-family:var(--ff-font-display);letter-spacing:-.025em;color:var(--ff-fg);font-weight:600;line-height:1.1}h1{font-size:var(--ff-text-3xl)}h2{font-size:var(--ff-text-2xl)}h3{font-size:var(--ff-text-xl)}h4{font-size:var(--ff-text-lg)}.font-serif{font-family:var(--ff-font-serif);letter-spacing:-.02em;font-style:italic;font-weight:400}p{color:var(--ff-fg-muted)}a{color:inherit;text-decoration:none}.btn{border-radius:var(--ff-radius-sm);font-family:var(--ff-font-sans);font-size:var(--ff-text-sm);cursor:pointer;transition:all var(--ff-dur-fast)var(--ff-ease-standard);white-space:nowrap;letter-spacing:-.005em;border:1px solid #0000;align-items:center;gap:6px;padding:9px 16px;font-weight:500;text-decoration:none;display:inline-flex}.btn-primary{background:var(--ff-ink);color:#fff;box-shadow:var(--ff-shadow-sm)}.btn-primary:hover{background:var(--ff-ink-2);transform:translateY(-1px)}.btn-secondary{background:var(--ff-white);color:var(--ff-ink);border:1px solid var(--ff-paper-3);box-shadow:var(--ff-shadow-inset)}.btn-secondary:hover{background:var(--ff-paper-2);border-color:var(--ff-stone-1)}.btn-ghost{color:var(--ff-fg-muted);background:0 0;border:none}.btn-ghost:hover{background:var(--ff-paper-2);color:var(--ff-fg)}.btn-danger{color:#9b2d31;background:#fceaea;border:1px solid #9b2d311a}.btn-danger:hover{background:#9b2d311f}.btn-sm{font-size:var(--ff-text-xs);border-radius:var(--ff-radius-xs);padding:6px 12px}.btn-lg{font-size:var(--ff-text-base);border-radius:var(--ff-radius-md);padding:13px 24px}.btn-icon{border-radius:var(--ff-radius-xs);justify-content:center;min-width:32px;height:32px;padding:7px}.input,.textarea,.select{background:var(--ff-white);border:1px solid var(--ff-paper-3);border-radius:var(--ff-radius-sm);width:100%;color:var(--ff-ink);font-family:var(--ff-font-sans);font-size:var(--ff-text-sm);transition:all var(--ff-dur-fast)var(--ff-ease-standard);box-shadow:var(--ff-shadow-inset);outline:none;padding:9px 12px}.input:focus,.textarea:focus,.select:focus{border-color:var(--ff-stone-1);box-shadow:var(--ff-shadow-inset),0 0 0 3px #b29efb1f}.input::placeholder,.textarea::placeholder{color:var(--ff-stone-2)}.textarea{resize:vertical;min-height:100px}.select{cursor:pointer}.card{background:var(--ff-white);border-radius:var(--ff-radius-lg);box-shadow:var(--ff-shadow-inset);transition:box-shadow var(--ff-dur-fast)var(--ff-ease-standard);padding:24px}.badge{border-radius:var(--ff-radius-pill);font-size:var(--ff-text-xs);align-items:center;gap:5px;padding:3px 9px;font-weight:500;display:inline-flex}.badge-accent{background:var(--ff-lavender-50);color:var(--ff-lavender-700)}.badge-success{background:var(--ff-lime);color:var(--ff-ink);font-weight:600}.badge-warning{color:#995b00;background:#fff0d4}.badge-danger{color:#9b2d31;background:#fceaea}.badge-muted{background:var(--ff-paper-2);color:var(--ff-stone-3)}.dropdown{position:relative}.dropdown-menu{background:var(--ff-white);border:1px solid var(--ff-paper-3);border-radius:var(--ff-radius-md);min-width:180px;box-shadow:var(--ff-shadow-lg);z-index:1000;animation:fadeIn .12s var(--ff-ease-emphatic);position:absolute;top:calc(100% + 6px);right:0;overflow:hidden}.dropdown-item{font-size:var(--ff-text-sm);color:var(--ff-fg);cursor:pointer;transition:background var(--ff-dur-fast)var(--ff-ease-standard);text-align:left;background:0 0;border:none;align-items:center;gap:9px;width:100%;padding:9px 14px;display:flex}.dropdown-item:hover{background:var(--ff-paper-2)}.dropdown-item.danger{color:#9b2d31}.dropdown-item.danger:hover{background:#fceaea}.dropdown-divider{background:var(--ff-paper-3);height:1px;margin:4px 0}.toggle{flex-shrink:0;width:32px;height:18px;display:inline-block;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-slider{background:var(--ff-stone-1);cursor:pointer;transition:background var(--ff-dur-fast)var(--ff-ease-standard);border-radius:999px;position:absolute;inset:0}.toggle-slider:before{content:"";width:14px;height:14px;transition:transform var(--ff-dur-fast)var(--ff-ease-standard);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.toggle input:checked+.toggle-slider{background:var(--ff-ink)}.toggle input:checked+.toggle-slider:before{transform:translate(14px)}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0c0c1040;justify-content:center;align-items:center;animation:.15s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--ff-white);border:1px solid var(--ff-paper-3);border-radius:var(--ff-radius-xl);width:90%;max-width:480px;box-shadow:var(--ff-shadow-lg);animation:slideUp .2s var(--ff-ease-emphatic);padding:32px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-title{font-size:var(--ff-text-lg);letter-spacing:-.015em;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeft{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fadeIn{animation:.3s fadeIn}.animate-slideUp{animation:.3s slideUp}.animate-spin{animation:1s linear infinite spin}.loading-skeleton{background:linear-gradient(90deg,var(--ff-paper-2)25%,var(--ff-paper-3)50%,var(--ff-paper-2)75%);border-radius:var(--ff-radius-sm);background-size:200% 100%;animation:1.5s infinite shimmer}.spinner{border:2px solid var(--ff-paper-3);border-top-color:var(--ff-ink);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}.toast-container{z-index:9999;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{background:var(--ff-white);border:1px solid var(--ff-paper-3);border-radius:var(--ff-radius-md);box-shadow:var(--ff-shadow-md);font-size:var(--ff-text-sm);min-width:260px;animation:slideLeft .25s var(--ff-ease-emphatic);align-items:center;gap:10px;padding:12px 18px;display:flex}.toast-success{border-left:3px solid var(--ff-lime-500)}.toast-error{border-left:3px solid #e5484d}.toast-info{border-left:3px solid var(--ff-lavender-500)}.tabs{border-bottom:1px solid var(--ff-paper-3);display:flex}.tab-btn{color:var(--ff-fg-muted);font-family:var(--ff-font-sans);font-size:var(--ff-text-sm);cursor:pointer;transition:color var(--ff-dur-fast)var(--ff-ease-standard);background:0 0;border:none;padding:10px 18px;font-weight:500;position:relative}.tab-btn:hover{color:var(--ff-fg)}.tab-btn.active{color:var(--ff-fg);font-weight:600}.tab-btn.active:after{content:"";background:var(--ff-ink);border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:-1px;left:0;right:0}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}.w-full{width:100%}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.text-sm{font-size:var(--ff-text-sm)}.text-xs{font-size:var(--ff-text-xs)}.text-muted{color:var(--ff-fg-muted)}.font-mono{font-family:var(--ff-font-mono)}.font-semibold{font-weight:600}.font-medium{font-weight:500}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.overflow-hidden{overflow:hidden}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.inset-0{inset:0}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.rounded{border-radius:var(--ff-radius-xs)}.rounded-full{border-radius:var(--ff-radius-pill)}.opacity-50{opacity:.5}.grid{display:grid}.builder-layout{background:var(--ff-paper);grid-template-columns:280px 1fr 300px;height:100vh;display:grid;overflow:hidden}.builder-sidebar{background:var(--ff-paper-2);border-right:1px solid var(--ff-paper-3);flex-direction:column;display:flex;overflow-y:auto}.builder-canvas{background:var(--ff-paper);flex-direction:column;display:flex;overflow-y:auto}.builder-panel{background:var(--ff-paper-2);border-left:1px solid var(--ff-paper-3);overflow-y:auto}.form-fill-viewport{background:var(--ff-paper);position:fixed;inset:0;overflow:hidden}@media (max-width:768px){.builder-layout{grid-template-columns:1fr}h1{font-size:var(--ff-text-2xl)}}