:root{--color-paper:oklch(96.8% .009 285);--color-paper-2:oklch(99.4% .004 285);--color-paper-3:oklch(94.2% .014 285);--color-ink:oklch(19% .026 282);--color-ink-2:oklch(43% .028 282);--color-ink-3:oklch(59% .024 282);--color-rule:oklch(87% .02 285);--color-rule-strong:oklch(75% .035 285);--color-accent:oklch(53% .23 292);--color-accent-hover:oklch(46% .23 292);--color-accent-soft:oklch(93% .045 292);--color-accent-ink:oklch(100% 0 0);--color-focus:oklch(62% .2 292);--color-success:oklch(48% .14 155);--color-success-soft:oklch(95% .035 155);--color-error:oklch(56% .21 25);--color-error-soft:oklch(95% .04 25);--color-overlay:oklch(16% .035 255/.68);--color-shadow:oklch(22% .04 285/.09);--color-shadow-heavy:oklch(15% .04 285/.2);--text:var(--color-ink-2);--text-h:var(--color-ink);--text-muted:var(--color-ink-3);--bg:var(--color-paper);--bg-elevated:var(--color-paper-2);--border:var(--color-rule);--border-focus:var(--color-focus);--code-bg:var(--color-paper-3);--accent:var(--color-accent);--accent-hover:var(--color-accent-hover);--accent-bg:var(--color-accent-soft);--accent-border:var(--color-focus);--accent-glow:var(--color-shadow);--success:var(--color-success);--success-bg:var(--color-success-soft);--error:var(--color-error);--error-bg:var(--color-error-soft);--font-display:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-body:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;--sans:var(--font-body);--mono:var(--font-mono);--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-display:clamp(1.5rem, 2.4vw, 2.25rem);--space-3xs:.25rem;--space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--radius-sm:6px;--radius:8px;--radius-lg:14px;--shadow-sm:0 1px 2px var(--color-shadow);--shadow-md:0 8px 24px var(--color-shadow);--shadow-lg:0 18px 48px var(--color-shadow-heavy);--shadow-glow:none;--ease-out:cubic-bezier(.16, 1, .3, 1);--dur-short:.16s;font:16px/1.5 var(--font-body);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--color-ink-2);background:var(--color-paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}:root:not([data-theme=light]){--color-paper:oklch(12.5% .022 282);--color-paper-2:oklch(16.5% .028 282);--color-paper-3:oklch(20.5% .032 282);--color-ink:oklch(95% .012 285);--color-ink-2:oklch(77% .022 285);--color-ink-3:oklch(59% .028 285);--color-rule:oklch(26% .036 285);--color-rule-strong:oklch(37% .05 285);--color-accent:oklch(70% .19 292);--color-accent-hover:oklch(76% .16 292);--color-accent-soft:oklch(24% .07 292);--color-focus:oklch(74% .17 292);--color-success:oklch(70% .13 155);--color-success-soft:oklch(27% .045 155);--color-error:oklch(72% .16 25);--color-error-soft:oklch(27% .055 25);--color-shadow:oklch(4% .02 282/.34);--color-shadow-heavy:oklch(3% .02 282/.55)}}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-paper:oklch(12.5% .022 282);--color-paper-2:oklch(16.5% .028 282);--color-paper-3:oklch(20.5% .032 282);--color-ink:oklch(95% .012 285);--color-ink-2:oklch(77% .022 285);--color-ink-3:oklch(59% .028 285);--color-rule:oklch(26% .036 285);--color-rule-strong:oklch(37% .05 285);--color-accent:oklch(70% .19 292);--color-accent-hover:oklch(76% .16 292);--color-accent-soft:oklch(24% .07 292);--color-focus:oklch(74% .17 292);--color-success:oklch(70% .13 155);--color-success-soft:oklch(27% .045 155);--color-error:oklch(72% .16 25);--color-error-soft:oklch(27% .055 25);--color-shadow:oklch(4% .02 282/.34);--color-shadow-heavy:oklch(3% .02 282/.55)}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body{overflow-x:clip}html{background:var(--color-paper)}body{background:var(--color-paper);min-width:320px;margin:0}*,:before,:after{box-sizing:border-box}button,input,select{font:inherit}button{white-space:nowrap}#root{min-width:0;min-height:100svh}h1,h2,h3{min-width:0;color:var(--color-ink);font-family:var(--font-display);overflow-wrap:anywhere;margin:0;font-style:normal}p{margin:0}code,.counter{font-family:var(--font-mono)}.error-boundary{place-content:center;gap:var(--space-xs);min-height:100svh;padding:var(--space-lg);text-align:center;background:var(--color-paper);color:var(--color-ink-2);display:grid}.error-boundary-btn{padding:var(--space-xs) var(--space-sm);color:var(--color-accent-ink);background:var(--color-accent);border-radius:var(--radius);cursor:pointer;border:0;justify-self:center}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.code-preview-wrap{background:var(--color-paper-2);border:1px solid var(--color-rule-strong);border-radius:var(--radius-lg);min-width:0;max-width:100%;height:100%;box-shadow:var(--shadow-md);flex-direction:column;display:flex;overflow:hidden}.code-preview--dark{background:var(--color-paper-2)}.code-preview-header{justify-content:space-between;align-items:center;gap:var(--space-xs);min-height:48px;padding:var(--space-2xs) var(--space-sm);background:var(--color-paper-3);border-bottom:1px solid var(--color-rule);display:flex}.code-preview-label{color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.03em;font-weight:700}.copy-btn{min-height:32px;padding:var(--space-3xs) var(--space-xs);color:var(--color-ink);background:var(--color-paper-2);border:1px solid var(--color-rule-strong);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-xs);transition:color var(--dur-short), border-color var(--dur-short), background var(--dur-short);font-weight:700}.copy-btn:hover{color:var(--color-accent);background:var(--color-accent-soft);border-color:var(--color-accent)}.copy-btn:active{transform:translateY(1px)}.code-preview-body{scrollbar-width:thin;flex:1;min-height:0;overflow:auto}.code-preview-body pre,.code-preview-body code{white-space:pre!important;padding:var(--space-sm)!important;font-family:var(--font-mono)!important;background:0 0!important;margin:0!important;font-size:.8125rem!important;line-height:1.65!important;display:block!important;overflow-x:auto!important}@media (width>=768px){.code-preview-body pre,.code-preview-body code{padding:var(--space-md)!important;font-size:var(--text-sm)!important}}.toast{right:var(--space-sm);bottom:var(--space-sm);left:var(--space-sm);z-index:9999;align-items:center;gap:var(--space-2xs);padding:var(--space-xs) var(--space-sm);color:var(--color-ink);background:var(--color-paper-2);border:1px solid var(--color-rule-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:var(--text-sm);animation:toast-in var(--dur-short) var(--ease-out);border-left-width:4px;font-weight:650;display:flex;position:fixed}.toast-success{border-left-color:var(--color-success)}.toast-error{border-left-color:var(--color-error)}.toast-info{border-left-color:var(--color-accent)}.toast-icon{font-family:var(--font-mono);line-height:1}@keyframes toast-in{0%{opacity:0;transform:translateY(var(--space-2xs))}to{opacity:1;transform:translateY(0)}}@media (width>=480px){.toast{right:var(--space-md);bottom:var(--space-md);width:max-content;max-width:min(360px,100vw - 3rem);left:auto}}.env-select{margin-top:var(--space-3xs);position:relative}.env-select-trigger{width:100%;min-height:42px;padding:.625rem var(--space-xs);color:var(--color-ink);text-align:left;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);justify-content:space-between;align-items:center;font-weight:600;display:flex}.env-select-trigger:hover{border-color:var(--color-rule-strong)}.env-select:focus-within .env-select-trigger{border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-accent-soft)}.env-select-value{flex:1}.env-select-arrow{margin-left:var(--space-2xs);color:var(--color-ink-3);transition:transform var(--dur-short);flex:none}.env-select-arrow.open{transform:rotate(180deg)}.env-select-dropdown{z-index:9999;max-height:220px;padding:var(--space-3xs);background:var(--color-paper-2);border:1px solid var(--color-rule-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);margin:0;list-style:none;overflow-y:auto}.env-select-option{align-items:center;gap:var(--space-2xs);padding:.625rem var(--space-xs);color:var(--color-ink);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);font-weight:600;display:flex}.env-select-option:hover{background:var(--color-paper-3)}.env-select-option.selected{color:var(--color-accent);background:var(--color-accent-soft)}.env-select-check{width:1rem;color:var(--color-accent);flex:none}.onboarding-overlay{z-index:1000;padding:var(--space-sm);place-items:center;display:grid;position:fixed;inset:0}.onboarding-backdrop{background:var(--color-overlay);cursor:pointer;position:absolute;inset:0}.onboarding-modal{background:var(--color-paper-2);border:1px solid var(--color-rule-strong);border-radius:var(--radius-lg);width:min(100%,500px);max-height:calc(100svh - 2rem);box-shadow:var(--shadow-lg);flex-direction:column;display:flex;position:relative;overflow:hidden}.onboarding-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-rule);justify-content:space-between;align-items:center;display:flex}.onboarding-header h2{font-size:var(--text-lg);letter-spacing:-.02em;font-weight:700}.onboarding-close{width:36px;height:36px;color:var(--color-ink-2);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;font-size:1.5rem;line-height:1;display:grid}.onboarding-close:hover{color:var(--color-ink);background:var(--color-paper-3)}.onboarding-progress{gap:var(--space-3xs);padding:var(--space-sm) var(--space-md) 0;grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.onboarding-progress-dot{background:var(--color-rule);height:3px;transition:background var(--dur-short);border-radius:999px}.onboarding-progress-dot.active,.onboarding-progress-dot.current{background:var(--color-accent)}.onboarding-body{padding:var(--space-lg) var(--space-md);flex:1;overflow-y:auto}.onboarding-step-content{gap:var(--space-sm);grid-template-columns:2.5rem minmax(0,1fr);align-items:start;display:grid}.onboarding-step-content .step-num{width:2.5rem;height:2.5rem;color:var(--color-accent);background:var(--color-accent-soft);border:1px solid var(--color-accent);border-radius:var(--radius);font-family:var(--font-mono);place-items:center;font-weight:700;display:grid}.onboarding-step-content strong{margin-bottom:var(--space-2xs);color:var(--color-ink);font-size:var(--text-md);display:block}.onboarding-step-content p{color:var(--color-ink-2);font-size:var(--text-sm);line-height:1.65}.onboarding-footer{padding:var(--space-sm) var(--space-md);border-top:1px solid var(--color-rule)}.onboarding-footer--steps{align-items:center;gap:var(--space-xs);display:flex}.onboarding-footer-spacer{flex:1}.onboarding-footer .btn{min-width:88px}.field-tooltip-wrap{display:inline-flex;position:relative}.field-tooltip{width:1.125rem;height:1.125rem;color:var(--color-ink-3);border:1px solid var(--color-rule-strong);cursor:help;font-family:var(--font-mono);background:0 0;border-radius:50%;place-items:center;padding:0;font-size:.625rem;font-weight:700;display:grid}.field-tooltip:hover{color:var(--color-accent);background:var(--color-accent-soft);border-color:var(--color-accent)}.field-tooltip-popover{z-index:9999;max-width:min(260px,100vw - 1.5rem);padding:var(--space-2xs) var(--space-xs);color:var(--color-ink);background:var(--color-paper-2);border:1px solid var(--color-rule-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:var(--text-xs);white-space:normal;line-height:1.5}.field-tooltip-popover:before,.field-tooltip-popover:after{display:none}.app{width:min(1800px,100%);padding:var(--space-xs);margin:0 auto}.header{top:var(--space-xs);z-index:100;align-items:center;gap:var(--space-xs);padding:var(--space-2xs) var(--space-3xs) var(--space-xs);background:var(--color-paper);border:0;border-bottom:1px solid var(--color-rule);box-shadow:none;border-radius:0;grid-template-columns:minmax(0,1fr) auto;display:grid;position:sticky}.brand-lockup{align-items:center;gap:var(--space-2xs);min-width:0;display:flex}.app-logo{flex:none;width:28px;height:28px}.product-kicker,.workspace-index{color:var(--color-accent);font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:.625rem;font-weight:700;line-height:1.2;display:block}.header h1{letter-spacing:-.018em;font-size:.9375rem;font-weight:680;line-height:1.15}.header .product-kicker{color:var(--color-ink-3);font-family:var(--font-body);letter-spacing:0;text-transform:none;margin-top:2px;font-size:.6875rem;font-weight:500}.header-actions{align-items:center;gap:var(--space-2xs);grid-area:1/2;display:flex}.theme-toggle-btn,.header-help-btn{width:34px;height:34px;color:var(--color-ink-2);background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:var(--radius);cursor:pointer;transition:border-color var(--dur-short), color var(--dur-short), background var(--dur-short);place-items:center;padding:0;display:grid}.theme-toggle-btn:hover,.header-help-btn:hover{color:var(--color-accent);background:var(--color-accent-soft);border-color:var(--color-rule-strong)}.mode-selector{gap:var(--space-3xs);padding:var(--space-3xs);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.mode-btn{min-width:0;padding:var(--space-2xs) var(--space-xs);color:var(--color-ink-2);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);transition:color var(--dur-short), background var(--dur-short), box-shadow var(--dur-short);background:0 0;border:0;font-weight:650}.mode-btn:hover{color:var(--color-ink)}.mode-btn.active{color:var(--color-accent);background:var(--color-paper-2);box-shadow:var(--shadow-sm), inset 0 -2px 0 var(--color-accent)}.layout{gap:var(--space-md);padding-top:var(--space-xs);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}.sidebar,.main{gap:var(--space-sm);min-width:0;padding:var(--space-sm);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.workspace-heading{z-index:5;gap:var(--space-3xs);min-height:36px;padding:0 var(--space-3xs) var(--space-xs);background:var(--color-paper-2);border-bottom:1px solid var(--color-rule);grid-template-columns:1.5rem minmax(0,1fr);align-items:center;display:grid;position:sticky;top:0}.workspace-heading:before{content:"";top:calc(var(--space-sm) * -1);right:calc(var(--space-3xs) * -1);left:calc(var(--space-3xs) * -1);height:var(--space-sm);pointer-events:none;background:var(--color-paper-2);position:absolute}.workspace-heading h2{font-size:var(--text-md);letter-spacing:-.03em;font-weight:700;line-height:1.15}.section{min-width:0;padding:var(--space-sm) var(--space-3xs) var(--space-md);border:0;border-bottom:1px solid var(--color-rule);box-shadow:none;background:0 0;border-radius:0}.section:focus-within{border-color:var(--color-accent)}.section h3{margin-bottom:var(--space-sm);color:var(--color-accent);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:700}.section label{margin-bottom:var(--space-xs);color:var(--color-ink-2);font-size:var(--text-sm);font-weight:600;display:block}.section label:last-child{margin-bottom:0}.field-label{align-items:center;gap:var(--space-3xs);display:inline-flex}.section-hint{margin:calc(var(--space-xs) * -1) 0 var(--space-xs);color:var(--color-ink-3);font-size:var(--text-xs)}.section input[type=text],.section input[type=number],.section select{width:100%;min-height:42px;margin-top:var(--space-3xs);padding:.625rem var(--space-xs);color:var(--color-ink);background-color:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-size:var(--text-sm);transition:border-color var(--dur-short), box-shadow var(--dur-short), background var(--dur-short);display:block}.section select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--color-ink-3) 50%), linear-gradient(135deg, var(--color-ink-3) 50%, transparent 50%);background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:2.5rem}.section input:hover,.section select:hover{border-color:var(--color-rule-strong)}.section input:focus,.section select:focus{background:var(--color-paper);border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-accent-soft);outline:0}.field-error input{border-color:var(--color-error);background:var(--color-error-soft)}.field-error-msg{margin-top:var(--space-3xs);color:var(--color-error);font-size:var(--text-xs);display:block}.checkbox{align-items:center;gap:var(--space-2xs);cursor:pointer;min-height:32px;display:flex!important}.checkbox input{width:1rem;height:1rem;accent-color:var(--color-accent)}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tabs{gap:var(--space-3xs);width:100%;padding:var(--space-3xs);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius);flex-wrap:wrap;display:flex}.tab{min-height:36px;padding:var(--space-2xs) var(--space-xs);color:var(--color-ink-2);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-sm);transition:color var(--dur-short), background var(--dur-short);background:0 0;border:0;font-weight:600}.tab:hover{color:var(--color-ink)}.tab.active{color:var(--color-accent);background:var(--color-paper-2);box-shadow:var(--shadow-sm)}.tab.tab-sm{font-family:var(--font-mono);font-size:var(--text-xs);padding-inline:.625rem}.preview-area{min-width:0;min-height:0;overflow:hidden}.preview-empty{padding:var(--space-xl) var(--space-md);color:var(--color-ink-2);text-align:center;background:var(--color-paper-2);border:1px dashed var(--color-rule-strong);border-radius:var(--radius-lg)}.preview-empty p+p{margin-top:var(--space-2xs);color:var(--color-ink-3);font-size:var(--text-sm)}.preview-footer{justify-content:space-between;align-items:center;gap:var(--space-2xs);flex-wrap:wrap;display:flex}.shortcut-hint{color:var(--color-ink-3);font-family:var(--font-mono);font-size:var(--text-xs)}.validation-badge{padding:var(--space-3xs) var(--space-2xs);font-size:var(--text-xs);border:1px solid;border-radius:999px;font-weight:700}.validation-badge--ok{color:var(--color-success);background:var(--color-success-soft);border-color:var(--color-success)}.validation-badge--error{color:var(--color-error);background:var(--color-error-soft);border-color:var(--color-error)}.actions{gap:var(--space-2xs);flex-direction:column;display:flex}.btn{min-height:42px;padding:.625rem var(--space-sm);border-radius:var(--radius);cursor:pointer;font-size:var(--text-sm);transition:background var(--dur-short), border-color var(--dur-short), color var(--dur-short), transform var(--dur-short);border:1px solid #0000;font-weight:700}.btn-primary{color:var(--color-accent-ink);background:var(--color-accent)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn-secondary{color:var(--color-ink);background:var(--color-paper-2);border-color:var(--color-rule-strong)}.btn-secondary:hover:not(:disabled){background:var(--color-paper-3);border-color:var(--color-accent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-reset{width:100%;color:var(--color-ink-2);border-color:var(--color-rule);background:0 0}.btn-reset:hover{color:var(--color-error);background:var(--color-error-soft);border-color:var(--color-error)}@media (width>=560px){.app{padding:var(--space-xs) var(--space-md) var(--space-md)}.mode-selector{justify-self:center;width:340px}.actions{flex-flow:wrap}}@media (width>=900px){.app{padding:var(--space-xs) var(--space-lg)}.header{gap:var(--space-sm);grid-template-columns:minmax(260px,1fr) 340px auto}.mode-selector{grid-area:1/2;width:340px}.header-actions{grid-area:1/3}.layout{gap:var(--space-sm);padding-top:var(--space-sm);grid-template-columns:minmax(340px,400px) minmax(0,1fr)}.sidebar{scrollbar-width:thin;max-height:calc(100dvh - 108px);overflow-y:auto}.main{grid-template-rows:auto auto minmax(0,1fr) auto auto;height:calc(100dvh - 108px);max-height:none;display:grid;position:sticky;top:84px;overflow:hidden}.main>.workspace-heading{grid-row:1}.main>.tabs{grid-row:2}.main>.preview-area{grid-row:3}.main>.preview-footer{grid-row:4}.main>.actions{grid-row:5}}@media (width>=1200px){.layout{gap:var(--space-lg);grid-template-columns:minmax(360px,420px) minmax(0,1fr)}}