:root{--font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--font-family-mono: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px;--display-xs: 24px;--display-sm: 30px;--display-md: 36px;--display-lg: 48px;--display-xl: 60px;--display-2xl: 72px;--leading-xs: 18px;--leading-sm: 20px;--leading-md: 24px;--leading-lg: 28px;--leading-xl: 30px;--leading-display-xs: 32px;--leading-display-sm: 38px;--leading-display-md: 44px;--leading-display-lg: 60px;--leading-display-xl: 72px;--leading-display-2xl: 90px;--spacing-none: 0px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--spacing-2xl: 20px;--spacing-3xl: 24px;--spacing-4xl: 32px;--spacing-5xl: 40px;--spacing-6xl: 48px;--spacing-7xl: 64px;--spacing-8xl: 80px;--spacing-9xl: 96px;--spacing-10xl: 128px;--spacing-11xl: 160px;--radius-none: 0px;--radius-xxs: 2px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 12px;--radius-2xl: 16px;--radius-3xl: 20px;--radius-4xl: 24px;--radius-full: 9999px;--shadow-xs: 0px 1px 2px rgba(16, 24, 40, .05);--shadow-sm: 0px 1px 2px rgba(16, 24, 40, .06), 0px 1px 3px rgba(16, 24, 40, .1);--shadow-md: 0px 2px 4px rgba(16, 24, 40, .06), 0px 4px 8px rgba(16, 24, 40, .1);--shadow-lg: 0px 4px 6px rgba(16, 24, 40, .03), 0px 12px 16px rgba(16, 24, 40, .08);--shadow-xl: 0px 8px 8px rgba(16, 24, 40, .03), 0px 20px 24px rgba(16, 24, 40, .08);--shadow-2xl: 0px 24px 48px rgba(16, 24, 40, .18);--shadow-3xl: 0px 32px 64px rgba(16, 24, 40, .24);--ring-brand: 0px 0px 0px 4px rgba(158, 119, 237, .24);--ring-gray: 0px 0px 0px 4px rgba(152, 162, 179, .14);--ring-error: 0px 0px 0px 4px rgba(240, 68, 56, .24);--gray-25: #FDFDFD;--gray-50: #FAFAFA;--gray-100: #F5F5F5;--gray-200: #E9EAEB;--gray-300: #D5D7DA;--gray-400: #A4A7AE;--gray-500: #717680;--gray-600: #535862;--gray-700: #414651;--gray-800: #252B37;--gray-900: #181D27;--gray-950: #0A0D12;--gray-dark-25: #FAFAFA;--gray-dark-50: #F5F5F6;--gray-dark-100: #F0F1F1;--gray-dark-200: #ECECED;--gray-dark-300: #CECFD2;--gray-dark-400: #94969C;--gray-dark-500: #85888E;--gray-dark-600: #61646C;--gray-dark-700: #333741;--gray-dark-800: #1F242F;--gray-dark-900: #161B26;--gray-dark-950: #0C0E12;--brand-25: #FCFAFF;--brand-50: #F9F5FF;--brand-100: #F4EBFF;--brand-200: #E9D7FE;--brand-300: #D6BBFB;--brand-400: #B692F6;--brand-500: #9E77ED;--brand-600: #7F56D9;--brand-700: #6941C6;--brand-800: #53389E;--brand-900: #42307D;--brand-950: #2C1C5F;--error-25: #FFFBFA;--error-50: #FEF3F2;--error-100: #FEE4E2;--error-200: #FECDCA;--error-300: #FDA29B;--error-400: #F97066;--error-500: #F04438;--error-600: #D92D20;--error-700: #B42318;--error-800: #912018;--error-900: #7A271A;--error-950: #55160C;--warning-25: #FFFCF5;--warning-50: #FFFAEB;--warning-100: #FEF0C7;--warning-200: #FEDF89;--warning-300: #FEC84B;--warning-400: #FDB022;--warning-500: #F79009;--warning-600: #DC6803;--warning-700: #B54708;--warning-800: #93370D;--warning-900: #7A2E0E;--warning-950: #4E1D09;--success-25: #F6FEF9;--success-50: #ECFDF3;--success-100: #D1FADF;--success-200: #A6F4C5;--success-300: #6CE9A6;--success-400: #32D583;--success-500: #12B76A;--success-600: #039855;--success-700: #027A48;--success-800: #05603A;--success-900: #054F31;--success-950: #053321;--color-text-primary: var(--gray-900);--color-text-secondary: var(--gray-600);--color-text-tertiary: var(--gray-500);--color-text-quaternary: var(--gray-400);--color-text-white: #FFFFFF;--color-text-disabled: var(--gray-400);--color-text-placeholder: var(--gray-400);--color-text-brand-primary: var(--brand-600);--color-text-brand-secondary: var(--brand-700);--color-text-error: var(--error-600);--color-text-warning: var(--warning-600);--color-text-success: var(--success-600);--color-bg-primary: #FFFFFF;--color-bg-secondary: var(--gray-50);--color-bg-tertiary: var(--gray-100);--color-bg-quaternary: var(--gray-200);--color-bg-active: var(--gray-50);--color-bg-disabled: var(--gray-100);--color-bg-overlay: rgba(16, 24, 40, .7);--color-bg-brand-primary: var(--brand-600);--color-bg-brand-secondary: var(--brand-500);--color-bg-brand-subtle: var(--brand-25);--color-bg-error-primary: var(--error-600);--color-bg-error-secondary: var(--error-500);--color-bg-error-subtle: var(--error-25);--color-bg-warning-primary: var(--warning-600);--color-bg-warning-secondary: var(--warning-500);--color-bg-warning-subtle: var(--warning-25);--color-bg-success-primary: var(--success-600);--color-bg-success-secondary: var(--success-500);--color-bg-success-subtle: var(--success-25);--color-border-primary: var(--gray-300);--color-border-secondary: var(--gray-200);--color-border-tertiary: var(--gray-100);--color-border-disabled: var(--gray-300);--color-border-brand: var(--brand-300);--color-border-brand-solid: var(--brand-600);--color-border-error: var(--error-300);--color-border-error-solid: var(--error-600);--color-fg-primary: var(--gray-900);--color-fg-secondary: var(--gray-700);--color-fg-tertiary: var(--gray-600);--color-fg-quaternary: var(--gray-500);--color-fg-quinary: var(--gray-400);--color-fg-white: #FFFFFF;--color-fg-disabled: var(--gray-400);--color-fg-brand-primary: var(--brand-600);--color-fg-brand-secondary: var(--brand-500);--color-fg-error-primary: var(--error-600);--color-fg-error-secondary: var(--error-500);--color-fg-warning-primary: var(--warning-600);--color-fg-warning-secondary: var(--warning-500);--color-fg-success-primary: var(--success-600);--color-fg-success-secondary: var(--success-500);--button-primary-bg: var(--brand-600);--button-primary-bg-hover: var(--brand-700);--button-primary-fg: #FFFFFF;--button-primary-border: var(--brand-600);--button-secondary-bg: #FFFFFF;--button-secondary-bg-hover: var(--gray-50);--button-secondary-fg: var(--gray-700);--button-secondary-border: var(--gray-300);--button-secondary-color-bg: #FFFFFF;--button-secondary-color-bg-hover: var(--brand-50);--button-secondary-color-fg: var(--brand-700);--button-secondary-color-border: var(--brand-300);--button-tertiary-bg: transparent;--button-tertiary-bg-hover: var(--gray-50);--button-tertiary-fg: var(--gray-600);--button-error-bg: var(--error-600);--button-error-bg-hover: var(--error-700);--button-error-fg: #FFFFFF;--button-error-border: var(--error-600);--input-bg: #FFFFFF;--input-border: var(--gray-300);--input-border-hover: var(--gray-400);--input-border-focus: var(--brand-300);--input-ring-focus: var(--ring-brand);--input-text: var(--gray-900);--input-placeholder: var(--gray-500);--input-disabled-bg: var(--gray-50);--input-disabled-border: var(--gray-300);--badge-brand-bg: var(--brand-50);--badge-brand-fg: var(--brand-700);--badge-brand-border: var(--brand-200);--badge-gray-bg: var(--gray-50);--badge-gray-fg: var(--gray-700);--badge-gray-border: var(--gray-200);--badge-error-bg: var(--error-50);--badge-error-fg: var(--error-700);--badge-error-border: var(--error-200);--badge-warning-bg: var(--warning-50);--badge-warning-fg: var(--warning-700);--badge-warning-border: var(--warning-200);--badge-success-bg: var(--success-50);--badge-success-fg: var(--success-700);--badge-success-border: var(--success-200);--toggle-bg-off: var(--gray-100);--toggle-bg-on: var(--brand-600);--toggle-knob: #FFFFFF;--indicator-online: var(--success-500);--indicator-offline: var(--gray-300)}[data-theme=dark]{--shadow-xs: 0px 1px 2px rgba(0, 0, 0, .16);--shadow-sm: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px rgba(0, 0, 0, .24);--shadow-md: 0px 2px 4px rgba(0, 0, 0, .2), 0px 4px 8px rgba(0, 0, 0, .24);--shadow-lg: 0px 4px 6px rgba(0, 0, 0, .1), 0px 12px 16px rgba(0, 0, 0, .2);--shadow-xl: 0px 8px 8px rgba(0, 0, 0, .1), 0px 20px 24px rgba(0, 0, 0, .2);--shadow-2xl: 0px 24px 48px rgba(0, 0, 0, .36);--shadow-3xl: 0px 32px 64px rgba(0, 0, 0, .48);--ring-brand: 0px 0px 0px 4px rgba(158, 119, 237, .3);--ring-gray: 0px 0px 0px 4px rgba(152, 162, 179, .2);--ring-error: 0px 0px 0px 4px rgba(240, 68, 56, .3);--color-text-primary: var(--gray-dark-50);--color-text-secondary: var(--gray-dark-300);--color-text-tertiary: var(--gray-dark-400);--color-text-quaternary: var(--gray-dark-500);--color-text-disabled: var(--gray-dark-600);--color-text-placeholder: var(--gray-dark-500);--color-text-brand-primary: var(--brand-400);--color-text-brand-secondary: var(--brand-300);--color-text-error: var(--error-400);--color-text-warning: var(--warning-400);--color-text-success: var(--success-400);--color-bg-primary: var(--gray-dark-950);--color-bg-secondary: var(--gray-dark-900);--color-bg-tertiary: var(--gray-dark-800);--color-bg-quaternary: var(--gray-dark-700);--color-bg-active: var(--gray-dark-800);--color-bg-disabled: var(--gray-dark-800);--color-bg-overlay: rgba(0, 0, 0, .7);--color-bg-brand-primary: var(--brand-600);--color-bg-brand-secondary: var(--brand-500);--color-bg-brand-subtle: rgba(127, 86, 217, .12);--color-bg-error-primary: var(--error-600);--color-bg-error-secondary: var(--error-500);--color-bg-error-subtle: rgba(217, 45, 32, .12);--color-bg-warning-primary: var(--warning-600);--color-bg-warning-secondary: var(--warning-500);--color-bg-warning-subtle: rgba(220, 104, 3, .12);--color-bg-success-primary: var(--success-600);--color-bg-success-secondary: var(--success-500);--color-bg-success-subtle: rgba(3, 152, 85, .12);--color-border-primary: var(--gray-dark-700);--color-border-secondary: var(--gray-dark-700);--color-border-tertiary: var(--gray-dark-800);--color-border-disabled: var(--gray-dark-700);--color-border-brand: rgba(127, 86, 217, .4);--color-border-brand-solid: var(--brand-500);--color-border-error: rgba(217, 45, 32, .4);--color-border-error-solid: var(--error-500);--color-fg-primary: var(--gray-dark-25);--color-fg-secondary: var(--gray-dark-200);--color-fg-tertiary: var(--gray-dark-300);--color-fg-quaternary: var(--gray-dark-400);--color-fg-quinary: var(--gray-dark-500);--color-fg-disabled: var(--gray-dark-600);--color-fg-brand-primary: var(--brand-400);--color-fg-brand-secondary: var(--brand-300);--color-fg-error-primary: var(--error-400);--color-fg-error-secondary: var(--error-300);--color-fg-warning-primary: var(--warning-400);--color-fg-warning-secondary: var(--warning-300);--color-fg-success-primary: var(--success-400);--color-fg-success-secondary: var(--success-300);--button-primary-bg: var(--brand-600);--button-primary-bg-hover: var(--brand-500);--button-primary-fg: #FFFFFF;--button-primary-border: var(--brand-600);--button-secondary-bg: var(--gray-dark-800);--button-secondary-bg-hover: var(--gray-dark-700);--button-secondary-fg: var(--gray-dark-200);--button-secondary-border: var(--gray-dark-700);--button-secondary-color-bg: var(--gray-dark-800);--button-secondary-color-bg-hover: rgba(127, 86, 217, .15);--button-secondary-color-fg: var(--brand-300);--button-secondary-color-border: rgba(127, 86, 217, .4);--button-tertiary-bg: transparent;--button-tertiary-bg-hover: var(--gray-dark-800);--button-tertiary-fg: var(--gray-dark-300);--input-bg: var(--gray-dark-900);--input-border: var(--gray-dark-700);--input-border-hover: var(--gray-dark-600);--input-border-focus: var(--brand-400);--input-text: var(--gray-dark-50);--input-placeholder: var(--gray-dark-500);--input-disabled-bg: var(--gray-dark-800);--input-disabled-border: var(--gray-dark-700);--badge-brand-bg: rgba(127, 86, 217, .15);--badge-brand-fg: var(--brand-300);--badge-brand-border: rgba(127, 86, 217, .3);--badge-gray-bg: var(--gray-dark-800);--badge-gray-fg: var(--gray-dark-300);--badge-gray-border: var(--gray-dark-700);--badge-error-bg: rgba(217, 45, 32, .15);--badge-error-fg: var(--error-300);--badge-error-border: rgba(217, 45, 32, .3);--badge-warning-bg: rgba(220, 104, 3, .15);--badge-warning-fg: var(--warning-300);--badge-warning-border: rgba(220, 104, 3, .3);--badge-success-bg: rgba(3, 152, 85, .15);--badge-success-fg: var(--success-300);--badge-success-border: rgba(3, 152, 85, .3);--toggle-bg-off: var(--gray-dark-700);--toggle-bg-on: var(--brand-600);--toggle-knob: #FFFFFF;--indicator-online: var(--success-400);--indicator-offline: var(--gray-dark-600)}:root{--brand-25: #f8f9fc;--brand-50: #f0f1f8;--brand-100: #d8dbe9;--brand-200: #b1b7d4;--brand-300: #8a93be;--brand-400: #6c78b0;--brand-500: #4e5ba6;--brand-600: #3e4784;--brand-700: #363f72;--brand-800: #293056;--brand-900: #1d2240;--brand-950: #101323;--color-text-brand-primary: var(--brand-600);--color-text-brand-secondary: var(--brand-700);--color-bg-brand-primary: var(--brand-600);--color-bg-brand-secondary: var(--brand-500);--color-bg-brand-subtle: var(--brand-25);--color-border-brand: var(--brand-200);--color-border-brand-solid: var(--brand-600);--color-fg-brand-primary: var(--brand-600);--color-fg-brand-secondary: var(--brand-500);--ring-brand: 0 0 0 4px rgba(78, 91, 166, .18)}*{box-sizing:border-box}html{font-size:var(--text-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh;font-family:var(--font-family);color:var(--color-text-primary);background:radial-gradient(circle at top left,rgba(78,91,166,.18),transparent 28%),radial-gradient(circle at bottom right,rgba(55,65,81,.12),transparent 26%),linear-gradient(180deg,#eef1f7,#f7f8fb 42%,#f3f5f9)}button,input,textarea,select{font:inherit}button{cursor:pointer}svg{display:block;width:1.1rem;height:1.1rem;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}#root{min-height:100vh}.studio-shell{position:relative;display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh;overflow:hidden}.studio-backdrop{position:absolute;inset:0;background:linear-gradient(140deg,rgba(16,19,35,.12),transparent 26%),linear-gradient(35deg,rgba(255,255,255,.22),transparent 35%);pointer-events:none}.studio-sidebar{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--spacing-4xl);padding:var(--spacing-5xl) var(--spacing-4xl);color:#fff;background:linear-gradient(180deg,#101323f5,#1d2240fa 35%,#293056fa);border-right:1px solid rgba(255,255,255,.08)}.brand-mark{display:flex;align-items:center;gap:var(--spacing-xl)}.brand-mark__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-2xl);color:#fff;background:linear-gradient(135deg,#ffffff24,#8a93be38);box-shadow:inset 0 1px #ffffff1f}.brand-mark h1,.hero-panel h2,.card h2,.card h3,.metric-card h3,.empty-state h3{margin:0}.eyebrow{margin:0 0 var(--spacing-sm);font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}.studio-sidebar .eyebrow{color:#ffffffad}.nav-stack{display:grid;gap:var(--spacing-md)}.nav-button{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;padding:var(--spacing-lg) var(--spacing-xl);border:1px solid transparent;border-radius:var(--radius-xl);color:#ffffffd1;background:#ffffff08;transition:transform .16s ease,background-color .16s ease,border-color .16s ease}.nav-button:hover,.nav-button:focus-visible{transform:translate(4px);border-color:#ffffff1f;background:#ffffff14;outline:none}.nav-button--active{color:#fff;border-color:#ffffff29;background:linear-gradient(135deg,#8a93be2e,#ffffff14);box-shadow:var(--shadow-lg)}.nav-button__icon{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem}.studio-main{position:relative;z-index:1;padding:var(--spacing-5xl);overflow-y:auto}.hero-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--spacing-4xl);align-items:end;padding:var(--spacing-5xl);border:1px solid rgba(255,255,255,.5);border-radius:28px;background:linear-gradient(135deg,#fffffff5,#f4f7fce6),linear-gradient(140deg,rgba(78,91,166,.1),transparent 42%);box-shadow:0 28px 60px #1e293b14;overflow:hidden;animation:lift-in .5s ease}.hero-panel:after{content:"";position:absolute;right:-72px;top:-52px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(78,91,166,.18),transparent 68%)}.hero-copy{max-width:60ch;margin:var(--spacing-lg) 0 0;color:var(--color-text-secondary)}.hero-actions,.button-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}.notice{display:flex;justify-content:space-between;gap:var(--spacing-xl);align-items:flex-start;margin-top:var(--spacing-3xl);padding:var(--spacing-xl) var(--spacing-2xl);border-radius:var(--radius-2xl);border:1px solid transparent;animation:fade-up .26s ease}.notice strong{display:block;margin-bottom:var(--spacing-xs)}.notice p{margin:0;color:inherit}.notice--success{border-color:var(--success-200);background:#12b76a14;color:var(--success-700)}.notice--error{border-color:var(--error-200);background:#f0443814;color:var(--error-700)}.notice--info{border-color:var(--brand-200);background:#4e5ba614;color:var(--brand-700)}.notice__close{border:none;color:inherit;background:transparent}.metric-grid,.content-grid,.section-grid,.detail-grid,.form-grid,.code-columns{display:grid;gap:var(--spacing-3xl)}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--spacing-3xl)}.content-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--spacing-3xl)}.section-grid{grid-template-columns:360px minmax(0,1fr)}.section-grid--wide{gap:var(--spacing-4xl)}.workflow-section-grid{grid-template-columns:minmax(0,1fr)}.split-panel{display:grid;gap:var(--spacing-4xl)}.card{display:flex;flex-direction:column;gap:var(--spacing-2xl);padding:var(--spacing-4xl);border:1px solid rgba(255,255,255,.65);border-radius:24px;background:#ffffffe6;box-shadow:0 18px 40px #1118270d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:fade-up .34s ease}.connection-card{margin-top:auto;color:#ffffffeb;border-color:#ffffff14;background:#ffffff0d;box-shadow:none}.connection-card .field span,.connection-card .helper-text{color:#ffffffb8}.connection-card input{color:#fff;border-color:#ffffff24;background:#ffffff0f}.card-header,.subsection-header,.step-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-xl)}.status-stack{display:inline-flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:flex-end}.metric-card{display:grid;grid-template-columns:auto 1fr;align-items:start}.metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:var(--radius-2xl);color:var(--brand-700);background:linear-gradient(135deg,var(--brand-50),rgba(255,255,255,.96))}.metric-card__label,.metric-card__detail,.helper-text,.muted-copy,.detail-item span,.list-row span,.dead-letter-copy{margin:0;color:var(--color-text-secondary)}.metric-card h3{margin:var(--spacing-sm) 0;font-size:var(--display-xs);line-height:var(--leading-display-xs)}.status-badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);min-height:2rem;padding:0 var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--text-xs);line-height:var(--leading-xs);font-weight:var(--font-weight-semibold);white-space:nowrap}.status-badge--success{color:var(--success-700);background:var(--success-50)}.status-badge--warning{color:var(--warning-700);background:var(--warning-50)}.status-badge--danger{color:var(--error-700);background:var(--error-50)}.status-badge--neutral{color:var(--gray-700);background:var(--gray-100)}.status-badge--brand{color:var(--brand-700);background:var(--brand-50)}.field{display:grid;gap:var(--spacing-sm)}.field span{font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.field input,.field textarea,.field select,.header-row input{width:100%;min-width:0;padding:.85rem .95rem;border:1px solid var(--color-border-primary);border-radius:var(--radius-xl);color:var(--color-text-primary);background:#ffffffeb;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,.header-row input:focus-visible{outline:none;border-color:var(--brand-500);box-shadow:var(--ring-brand);transform:translateY(-1px)}.field textarea,.code-area{resize:vertical;font-family:var(--font-family-mono);font-size:.84rem;line-height:1.55}.field--compact{min-width:200px}.toggle-row,.checkbox-pill{display:inline-flex;align-items:center;gap:var(--spacing-md)}.checkbox-pill{padding:0 var(--spacing-lg);border-radius:var(--radius-full);background:var(--gray-100);color:var(--gray-700)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);min-height:2.75rem;padding:0 var(--spacing-xl);border:1px solid transparent;border-radius:var(--radius-xl);font-weight:var(--font-weight-semibold);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.button:hover,.button:focus-visible{transform:translateY(-1px);outline:none}.button:disabled{cursor:not-allowed;opacity:.56;box-shadow:none;transform:none}.button--primary{color:#fff;background:linear-gradient(135deg,var(--brand-700),var(--brand-500));box-shadow:0 16px 26px #4e5ba62e}.button--secondary{color:var(--brand-700);border-color:#4e5ba624;background:#4e5ba614}.button--ghost{color:var(--color-text-secondary);border-color:var(--color-border-secondary);background:#ffffffd1}.button--icon{min-height:auto;padding:.72rem .9rem}.list-card,.editor-card{min-height:32rem}.stack-list{display:grid;gap:var(--spacing-md)}.stack-list--steps{gap:var(--spacing-xl)}.list-row,.step-card{padding:var(--spacing-xl);border:1px solid var(--color-border-secondary);border-radius:var(--radius-2xl);background:linear-gradient(180deg,#fffffff5,#f8fafceb)}.list-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl);text-align:left;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.list-row:hover,.list-row:focus-visible{transform:translateY(-1px);border-color:var(--brand-200);box-shadow:var(--shadow-md);outline:none}.list-row--active{border-color:var(--brand-300);background:linear-gradient(180deg,#f0f1f8fa,#fffffff0)}.list-row strong,.step-card strong,.detail-item strong{display:block}.detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-item{padding:var(--spacing-xl);border-radius:var(--radius-2xl);background:var(--gray-50)}.summary-panel{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}.inline-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center;color:var(--color-text-secondary);font-size:var(--text-sm)}.canvas-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-md)}.summary-chip{display:grid;gap:var(--spacing-xs);min-width:8rem;padding:var(--spacing-lg);border-radius:var(--radius-xl);background:linear-gradient(180deg,var(--brand-50),#ffffff)}.subsection-header{margin-top:var(--spacing-xl)}.header-stack{display:grid;gap:var(--spacing-md)}.workflow-canvas-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 320px;gap:var(--spacing-2xl)}.canvas-palette,.canvas-inspector,.canvas-stage-card{min-width:0;padding:var(--spacing-xl);border:1px solid var(--color-border-secondary);border-radius:var(--radius-2xl);background:linear-gradient(180deg,#fffffff0,#f6f8fceb)}.canvas-panel__header{display:flex;justify-content:space-between;gap:var(--spacing-lg);align-items:flex-start;margin-bottom:var(--spacing-lg)}.canvas-panel__meta{display:inline-flex;gap:var(--spacing-md);color:var(--color-text-tertiary);font-size:var(--text-sm)}.palette-stack,.edge-list{display:grid;gap:var(--spacing-md)}.palette-item{display:grid;gap:var(--spacing-xs);padding:var(--spacing-lg);border:1px dashed var(--brand-200);border-radius:var(--radius-xl);text-align:left;background:linear-gradient(180deg,#f8f9fcf5,#fffffff5);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.palette-item:hover,.palette-item:focus-visible{transform:translateY(-1px);border-color:var(--brand-300);box-shadow:var(--shadow-sm);outline:none}.palette-item span{color:var(--color-text-secondary);font-size:var(--text-sm)}.canvas-stage-card{min-height:38rem}.canvas-toolbar{display:inline-flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:flex-end}.canvas-stage{position:relative;min-height:34rem;overflow:auto;border:1px solid rgba(78,91,166,.12);border-radius:var(--radius-2xl);background:linear-gradient(180deg,#f8fafcd1,#fffffff2),linear-gradient(90deg,rgba(78,91,166,.03) 1px,transparent 1px),linear-gradient(rgba(78,91,166,.03) 1px,transparent 1px);background-size:auto,24px 24px,24px 24px}.canvas-grid{position:absolute;inset:0}.canvas-stage__world{position:relative;width:2400px;height:1600px;transform-origin:top left;will-change:transform}.canvas-stage__edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.canvas-edge{fill:none;stroke:#4e5ba69e;stroke-width:3;stroke-linecap:round;pointer-events:stroke;transition:stroke .14s ease,stroke-width .14s ease}.canvas-edge:hover{stroke:var(--brand-700);stroke-width:4}.canvas-edge__label rect{fill:#fffffff5;stroke:#4e5ba629}.canvas-edge__label text{fill:var(--brand-700);font-size:10px;font-weight:700;letter-spacing:.06em;text-anchor:middle}.canvas-node{position:absolute;width:232px;min-height:132px;padding:var(--spacing-xl);border:1px solid rgba(78,91,166,.12);border-radius:22px;background:linear-gradient(180deg,#fffffffa,#f4f7fcf0);box-shadow:var(--shadow-md);cursor:default}.canvas-node--selected{border-color:var(--brand-400);box-shadow:0 0 0 4px #4e5ba61f,var(--shadow-md)}.canvas-node--pending{border-color:var(--warning-400);box-shadow:0 0 0 4px #f790091f,var(--shadow-md)}.canvas-node--invalid{border-color:var(--error-300);box-shadow:0 0 0 4px #f044381a,var(--shadow-md)}.canvas-node__header{display:flex;justify-content:space-between;gap:var(--spacing-md);align-items:flex-start;cursor:grab}.canvas-node__header span,.canvas-node__body p{color:var(--color-text-secondary)}.canvas-node__body{margin-top:var(--spacing-lg)}.canvas-node__body p{margin:0;font-size:var(--text-sm)}.canvas-node__issue-count{display:inline-flex;margin-top:var(--spacing-md);padding:.25rem .65rem;border-radius:var(--radius-full);color:var(--error-700);background:var(--error-50);font-size:var(--text-xs);font-weight:var(--font-weight-semibold)}.canvas-node__remove{padding:0;border:none;color:var(--color-text-tertiary);background:transparent}.canvas-node__input,.canvas-node__output{position:absolute;top:calc(50% - 10px);width:20px;height:20px;border:3px solid white;border-radius:999px;background:var(--brand-500);box-shadow:var(--shadow-sm)}.canvas-node__input{left:-10px}.canvas-node__output{right:-10px}.edge-pill{display:inline-flex;justify-content:center;padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border-secondary);border-radius:var(--radius-full);color:var(--color-text-secondary);background:#fff}.empty-state--compact{min-height:18rem;justify-items:start}.detail-grid--single{grid-template-columns:1fr}.header-row{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(220px,1.4fr) auto auto;gap:var(--spacing-md);align-items:center}.inline-alert{padding:var(--spacing-lg);border-radius:var(--radius-xl)}.inline-alert--success{color:var(--success-700);background:#12b76a14;border:1px solid rgba(18,183,106,.16)}.inline-alert--danger{color:var(--error-700);background:var(--error-50);border:1px solid rgba(240,68,56,.14)}.inline-alert--warning{color:var(--warning-700);background:#f7900914;border:1px solid rgba(247,144,9,.18)}.validation-panel{display:grid;gap:var(--spacing-lg);padding:var(--spacing-xl);border:1px solid var(--color-border-secondary);border-radius:var(--radius-2xl);background:linear-gradient(180deg,#f8fafcc7,#fffffff0)}.validation-stack{display:grid;gap:var(--spacing-md)}.code-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.empty-state{display:grid;justify-items:start;gap:var(--spacing-md);min-height:18rem;align-content:center;padding:var(--spacing-5xl) var(--spacing-xl);border:1px dashed var(--color-border-primary);border-radius:var(--radius-3xl);background:linear-gradient(180deg,#f0f1f88c,#ffffffd1)}.empty-state__icon{display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:var(--radius-2xl);color:var(--brand-700);background:var(--brand-50)}@keyframes lift-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1360px){.metric-grid,.content-grid,.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1120px){.studio-shell{grid-template-columns:1fr}.studio-sidebar{gap:var(--spacing-3xl);padding:var(--spacing-4xl)}.studio-main{padding:var(--spacing-4xl)}.section-grid,.content-grid,.metric-grid,.code-columns,.form-grid,.hero-panel,.workflow-canvas-layout,.canvas-summary,.header-row{grid-template-columns:1fr}}@media(max-width:720px){.studio-main,.studio-sidebar,.card,.hero-panel{padding:var(--spacing-3xl)}.detail-grid{grid-template-columns:1fr}.button-row,.hero-actions,.card-header,.subsection-header,.step-card__header,.notice{flex-direction:column;align-items:stretch}}