.Vup1lq_stage{--demo-bg:#101416;--demo-surface:#161b1e;--demo-border:#ffffff12;--demo-muted:#98a3a8;--demo-text:#edf1ef;color:var(--demo-text);font-family:var(--font-public-sans),sans-serif;text-align:left;min-width:0;position:relative}.Vup1lq_window{background:var(--demo-bg);flex-direction:column;min-width:0;display:flex;overflow:hidden}.Vup1lq_expand{width:29px;height:29px;color:var(--demo-muted);cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.Vup1lq_expand svg{width:15px;height:15px}.Vup1lq_expand:hover{color:#fff}.Vup1lq_workspace{height:var(--landing-editor-height,580px);grid-template-columns:minmax(0,3fr) minmax(0,2fr);min-height:0;display:grid}.Vup1lq_conversation{border-right:1px solid var(--demo-border);flex-direction:column;min-width:0;min-height:0;display:flex}.Vup1lq_transcript{scrollbar-width:thin;scrollbar-color:#354047 transparent;font-size:var(--text-xs);flex:1;padding:16px 22px;line-height:1.7;overflow:auto}.Vup1lq_transcript p{margin:6px 0 14px}.Vup1lq_userMessage>span,.Vup1lq_assistant>span{font-size:calc(var(--text-xs) * .833333);color:var(--demo-muted)}.Vup1lq_userMessage{background:#ffffff06;border:1px solid #ffffff0b;border-radius:9px;margin-bottom:24px;padding:12px 14px}.Vup1lq_userMessage p{margin-bottom:0}.Vup1lq_assistant{padding:0 2px}.Vup1lq_assistant>span{color:#d6f9a9}.Vup1lq_muted{color:var(--demo-muted)}.Vup1lq_files{font:calc(var(--text-xs) * .833333)/1.7 var(--font-paper-mono);color:#becac4;align-items:center;gap:7px;margin-bottom:14px;display:flex}.Vup1lq_files span{color:#a5d4ad}.Vup1lq_exchange{margin-top:20px}.Vup1lq_suggestions{flex-wrap:wrap;gap:6px;padding:10px 18px;display:flex}.Vup1lq_suggestions button{color:#b9c4c1;font:calc(var(--text-xs) * .75) var(--font-public-sans);cursor:pointer;background:0 0;border:1px solid #ffffff15;border-radius:6px;align-items:center;gap:6px;padding:6px 8px;display:flex}.Vup1lq_suggestions button:hover{color:#fff;background:#ffffff09}.Vup1lq_suggestions span{opacity:.5}.Vup1lq_composer{background:#ffffff03;border:1px solid #ffffff24;border-radius:10px;margin:0 16px 16px;padding:11px 12px}.Vup1lq_composer:focus-within{border-color:#d6f9a966}.Vup1lq_composer textarea{resize:none;width:100%;color:var(--demo-text);font:var(--text-2xs)/1.6 var(--font-public-sans);background:0 0;border:0;outline:none;min-height:48px}.Vup1lq_composer textarea::placeholder{color:#8b9895}.Vup1lq_composer>div{justify-content:space-between;align-items:center;gap:8px;display:flex}.Vup1lq_composer small{font-size:calc(var(--text-base) * .5);color:var(--demo-muted)}.Vup1lq_composer button{color:#16221b;cursor:pointer;background:#d6f9a9;border:0;border-radius:6px;width:27px;height:27px}.Vup1lq_composer button:disabled{opacity:.4;cursor:default}.Vup1lq_preview{background:#fafbf8;flex-direction:column;min-width:0;display:flex}.Vup1lq_preview iframe{background:#fafbf8;border:0;flex:1;width:100%;height:100%;min-height:0}.Vup1lq_statusbar{border-top:1px solid var(--demo-border);background:#14191c;justify-content:space-between;align-items:center;gap:12px;min-height:28px;padding:5px 12px 5px 18px;display:flex}.Vup1lq_statusbar>span{color:#86978f;font-size:calc(var(--text-xs) * .75);align-items:center;gap:6px;display:flex}.Vup1lq_mobileTabs{display:none}.Vup1lq_srOnly{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:760px){.Vup1lq_workspace{grid-template-columns:minmax(0,1fr);height:540px}.Vup1lq_conversation{border-right:0;display:none}.Vup1lq_workspace[data-mobile-panel=chat] .Vup1lq_conversation{display:flex}.Vup1lq_workspace[data-mobile-panel=chat] .Vup1lq_preview{display:none}.Vup1lq_mobileTabs{border-bottom:1px solid var(--demo-border);background:#151b1e;justify-content:center;gap:4px;padding:5px;display:flex}.Vup1lq_mobileTabs button{color:var(--demo-muted);font-size:calc(var(--text-xs) * .833333);cursor:pointer;background:0 0;border:0;border-radius:5px;padding:7px 25px}.Vup1lq_mobileTabs button[aria-pressed=true]{color:#fff;background:#ffffff0c}.Vup1lq_statusbar{justify-content:center;min-height:43px;padding:5px 8px}.Vup1lq_statusbar>span{display:flex}.Vup1lq_transcript{padding:12px 18px}.Vup1lq_composer small{font-size:calc(var(--text-xs) * .75)}.Vup1lq_suggestions button{font-size:calc(var(--text-xs) * .833333)}.Vup1lq_composer textarea{font-size:calc(var(--text-base) * .8125)}}.Vup1lq_suggestions button:focus-visible,.Vup1lq_expand:focus-visible{outline-offset:2px;outline:2px solid #66bbe1}.Vup1lq_statusbar{position:relative}.Vup1lq_stage[data-expanded=true],.Vup1lq_stage[data-expanded=true] .Vup1lq_window{height:100%}.Vup1lq_stage[data-expanded=true] .Vup1lq_workspace{flex:1;height:auto}@media (max-width:760px){.Vup1lq_statusbar{justify-content:space-between}}.Vup1lq_statusbar>span i{background:#a4cf9d;border-radius:50%;width:4px;height:4px;display:inline-block}.Vup1lq_buildSteps{color:#becac4;font:var(--text-2xs)/1.7 var(--font-paper-mono);gap:7px;margin:18px 0;display:grid}.Vup1lq_buildSteps span{color:#a5d4ad}.Vup1lq_codeChange{border:1px solid var(--demo-border);font:var(--text-2xs)/1.8 var(--font-paper-mono);white-space:pre-wrap;color:#b9d6bd;background:#ffffff03;border-radius:8px;margin:14px 0 18px;padding:14px 16px}
[data-landing-site]{--landing-header-size:calc(var(--text-base) * 4.25);--landing-header-weight:600;--landing-header-top:25px;--landing-header-gap:32px;--landing-nav-height:96px;--landing-heading-font:var(--font-public-sans);--landing-heading-justify:center;--landing-heading-align:center;--landing-demo-width:84%;--landing-radius:24px;--landing-art-opacity:.8;--landing-editor-height:580px;position:relative}[data-landing-site] [data-site-header]{width:100%;height:var(--landing-nav-height);background:0 0;border:0;align-items:center;padding:0 24px;display:flex;position:absolute;top:0;left:0}[data-landing-site] [data-site-header] a{color:var(--ink);text-shadow:0 1px 14px #09070f55}[data-landing-site] [data-site-nav-inner]{width:100%;height:100%;padding:0}[data-landing-site] main>section:first-child{padding:0 0 24px}[data-landing-site] main>section:first-child>div{border-radius:0 0 var(--landing-radius) var(--landing-radius);max-width:none}
[data-site-frame][data-landing-site]{--canvas:#09090c;--panel:#09090c;--panel-deep:#09090c;--landing-radius:0px}[data-landing-site] main>.chromatic-opening{isolation:isolate;background:linear-gradient(#000 65%,#09090c);padding:0;position:relative;overflow:hidden}.chromatic-opening:before{content:"";pointer-events:none;background:url(/brand/chromatic/mist-desktop.webp) top/100% 100% no-repeat;height:960px;max-height:110svh;position:absolute;inset:0 0 auto;-webkit-mask-image:linear-gradient(#000 75%,#0000);mask-image:linear-gradient(#000 75%,#0000)}[data-landing-site] .chromatic-hero{flex-direction:column;align-items:center;padding:170px 24px 148px;display:flex;position:relative}.chromatic-heading h1{font:600 clamp(calc(var(--text-base) * 2.375),4.8vw,calc(var(--text-base) * 4.25))/1.08 var(--font-public-sans),sans-serif;letter-spacing:-.055em;text-align:center;text-wrap:balance;margin:0 0 38px}.chromatic-prompt{width:640px;max-width:100%}.chromatic-prompt>.fc-root{background:0 0;width:100%}.chromatic-trails{height:360px;max-width:var(--landing-column);margin:0 auto calc(var(--fc-space-6) * 2);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;display:grid;position:relative}.chromatic-trails-art{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 15% 85%,#0000);mask-image:linear-gradient(#0000,#000 15% 85%,#0000)}.chromatic-trails-action{z-index:1;padding:var(--fc-space-6);grid-column:2;justify-content:center;display:flex;position:relative}@media (max-width:760px){[data-landing-site] .chromatic-hero{padding:148px 20px 48px}.chromatic-heading h1{font-size:clamp(var(--text-4xl),8.5vw,calc(var(--text-base) * 3.625));max-width:550px}.chromatic-opening:before{background-image:url(/brand/chromatic/mist-mobile.webp);height:840px;max-height:none}.chromatic-trails{flex-direction:column;justify-content:flex-end;height:260px;display:flex}.chromatic-trails-art{inset:var(--fc-space-8) 0 auto;height:calc(100% - var(--fc-space-8) * 2);-webkit-mask-image:none;mask-image:none}[data-landing-site] [data-site-header]{padding-inline:var(--fc-space-4)}[data-landing-site] [data-site-header] nav{gap:var(--fc-space-3)}[data-landing-site] [data-site-header] nav a{font-size:var(--text-xs)}}[data-landing-site] main>.chromatic-opening:has([data-expanded=true]){z-index:1100;overflow:visible}.chromatic-demo{width:min(100%,var(--landing-column))}.chromatic-demo>div{margin-inline:auto}
.IoMiEa_panel{padding:var(--landing-step-4) 0;background:var(--panel-deep)}.IoMiEa_grid{gap:calc(var(--landing-pad) * 2);max-width:var(--landing-column);padding:0 var(--landing-pad);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);margin:0 auto;display:grid}.IoMiEa_side{align-self:start}.IoMiEa_title{max-width:12ch;font-family:var(--font-public-sans), sans-serif;font-size:calc(var(--text-base) * 2);font-weight:600;line-height:var(--leading-tight);letter-spacing:-.02em;text-transform:lowercase;margin:0}.IoMiEa_column{display:grid}.IoMiEa_open{gap:var(--landing-step);margin:0 0 var(--landing-step-2);display:grid}.IoMiEa_row{gap:6px;display:grid}.IoMiEa_q{color:var(--text);font-family:var(--font-public-sans), sans-serif;font-size:var(--text-lg);font-weight:600;line-height:var(--leading-snug);text-transform:lowercase;margin:0}.IoMiEa_a{max-width:none;color:var(--muted);font-size:var(--text-base);line-height:var(--leading-normal);margin:0}.IoMiEa_lead{color:var(--text);font-weight:600}.IoMiEa_a a,.IoMiEa_accBody a{color:var(--green);text-underline-offset:3px;text-decoration:none}.IoMiEa_a a:hover,.IoMiEa_accBody a:hover{text-decoration:underline}.IoMiEa_list{display:grid}.IoMiEa_acc{border-top:1px solid var(--line)}.IoMiEa_acc:last-child{border-bottom:1px solid var(--line)}.IoMiEa_summary{padding:var(--landing-step-tight) 0;color:var(--text);font-family:var(--font-public-sans), sans-serif;font-size:var(--text-lg);font-weight:500;line-height:var(--leading-snug);text-transform:lowercase;cursor:pointer;grid-template-columns:1ch minmax(0,1fr);align-items:baseline;gap:12px;list-style:none;display:grid}.IoMiEa_summary::-webkit-details-marker{display:none}.IoMiEa_summary:hover,.IoMiEa_acc[open] .IoMiEa_summary{color:var(--green)}.IoMiEa_summary:focus-visible{outline:1px solid var(--green);outline-offset:3px}.IoMiEa_label{display:block}.IoMiEa_sign{color:var(--muted);font-weight:400}.IoMiEa_sign:after{content:"+"}.IoMiEa_acc[open] .IoMiEa_sign{color:var(--green)}.IoMiEa_acc[open] .IoMiEa_sign:after{content:"–"}.IoMiEa_accBody{max-width:none;padding:0 0 var(--landing-step-tight) calc(1ch + 12px);color:var(--muted);font-size:var(--text-base);line-height:var(--leading-normal);margin:0}@media (max-width:900px){.IoMiEa_grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.6vh,36px)}.IoMiEa_title{max-width:none;font-size:calc(var(--text-base) * 2)}}.IoMiEa_more{font-size:var(--text-base);margin-top:24px}.IoMiEa_more a{color:var(--text);text-underline-offset:4px}.IoMiEa_rows{display:block}.IoMiEa_rows .IoMiEa_side{margin-bottom:var(--fc-space-8)}.IoMiEa_rows .IoMiEa_title{max-width:none}.IoMiEa_rows .IoMiEa_more{margin-top:var(--fc-space-4)}.IoMiEa_tierLabel{padding:var(--fc-space-6) 0 var(--fc-space-3);color:var(--muted);font:400 var(--text-xs)/1.5 var(--font-public-sans), sans-serif;letter-spacing:.1em;display:block}.IoMiEa_rows .IoMiEa_open{gap:0;margin:0}.IoMiEa_rows .IoMiEa_row{gap:clamp(var(--fc-space-4),3vw,calc(var(--fc-space-6) * 2));padding:clamp(var(--fc-space-6),2.6vw,var(--fc-space-8)) 0;border-top:1px solid var(--line);grid-template-columns:minmax(190px,330px) minmax(0,1fr)}.IoMiEa_rows .IoMiEa_row:last-child{border-bottom:1px solid var(--line)}.IoMiEa_rows .IoMiEa_a{max-width:62ch}.IoMiEa_rows .IoMiEa_summary{padding:var(--fc-space-4) 0;display:flex}.IoMiEa_rows .IoMiEa_sign{order:1;margin-left:auto}.IoMiEa_rows .IoMiEa_accBody{max-width:62ch;padding:0 0 var(--fc-space-6)}@media (max-width:900px){.IoMiEa_rows .IoMiEa_row{gap:var(--fc-space-3);grid-template-columns:minmax(0,1fr)}}