.ComposeExamplePage-module__0WDlPq__shell{height:calc(100vh - 72px - var(--openui-space-3xl) - 40px);padding:0 var(--openui-space-xl)0 0;flex-direction:column;margin-top:20px;margin-bottom:-48px;display:flex;overflow:hidden}.ComposeExamplePage-module__0WDlPq__shellEmbedded{flex:1;height:100%;min-height:0;margin-top:0;margin-bottom:0}.ComposeExamplePage-module__0WDlPq__body{gap:var(--openui-space-3xl);flex-direction:row;flex:1;min-height:0;display:flex}.ComposeExamplePage-module__0WDlPq__leftPanel{scrollbar-width:none;-ms-overflow-style:none;gap:var(--openui-space-3xl);padding-right:var(--openui-space-2xs);flex-direction:column;width:100%;max-width:400px;padding-bottom:80px;display:flex;overflow:hidden auto}.ComposeExamplePage-module__0WDlPq__leftPanel.ComposeExamplePage-module__0WDlPq__fadeTop{-webkit-mask-image:linear-gradient(#0000 0%,#000 48px);mask-image:linear-gradient(#0000 0%,#000 48px)}.ComposeExamplePage-module__0WDlPq__leftPanel.ComposeExamplePage-module__0WDlPq__fadeBottom{-webkit-mask-image:linear-gradient(#000 calc(100% - 80px),#0000 100%);mask-image:linear-gradient(#000 calc(100% - 80px),#0000 100%)}.ComposeExamplePage-module__0WDlPq__leftPanel.ComposeExamplePage-module__0WDlPq__fadeTop.ComposeExamplePage-module__0WDlPq__fadeBottom{-webkit-mask-image:linear-gradient(#0000 0%,#000 48px calc(100% - 80px),#0000 100%);mask-image:linear-gradient(#0000 0%,#000 48px calc(100% - 80px),#0000 100%)}.ComposeExamplePage-module__0WDlPq__leftPanel::-webkit-scrollbar{display:none}.ComposeExamplePage-module__0WDlPq__exampleHeader{gap:var(--openui-space-xl);padding-left:var(--openui-space-l);flex-direction:column;display:flex}.ComposeExamplePage-module__0WDlPq__exampleTitle{font:var(--openui-text-heading-xl);color:var(--openui-text-neutral-primary);letter-spacing:-1px;margin:0;font-size:48px}.ComposeExamplePage-module__0WDlPq__exampleDescription{font:var(--openui-text-body-default);color:var(--openui-text-neutral-secondary);line-height:var(--openui-line-height-default);margin:0}.ComposeExamplePage-module__0WDlPq__stepList{gap:var(--openui-space-l);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ComposeExamplePage-module__0WDlPq__nextFlowLink{gap:var(--openui-space-xs);margin-top:var(--openui-space-xl);padding:var(--openui-space-m-l)var(--openui-space-l);border-radius:var(--openui-radius-3xl);background:var(--openui-highlight);flex-direction:column;text-decoration:none;transition:background .15s;display:flex}.ComposeExamplePage-module__0WDlPq__nextFlowLink:hover{background:var(--openui-highlight-strong);border-color:var(--openui-border-interactive)}.ComposeExamplePage-module__0WDlPq__nextFlowTop{justify-content:space-between;align-items:center;display:flex}.ComposeExamplePage-module__0WDlPq__nextFlowLabel{font:var(--openui-text-label-default);color:var(--openui-text-neutral-secondary)}.ComposeExamplePage-module__0WDlPq__nextFlowArrow{color:var(--openui-text-neutral-secondary);transition:transform .15s}.ComposeExamplePage-module__0WDlPq__nextFlowLink:hover .ComposeExamplePage-module__0WDlPq__nextFlowArrow{transform:translate(2px)}.ComposeExamplePage-module__0WDlPq__nextFlowText{font:var(--openui-text-body-default);color:var(--openui-text-neutral-link)}.ComposeExamplePage-module__0WDlPq__stepSection{flex-direction:column;display:flex}.ComposeExamplePage-module__0WDlPq__stepHeader{text-align:left;border-radius:0 var(--openui-radius-2xl)var(--openui-radius-2xl)0;width:100%;color:var(--openui-text-neutral-primary);padding:var(--openui-space-m)var(--openui-space-m)var(--openui-space-m)var(--openui-space-l);cursor:pointer;background:0 0;border:none;border-left:3px solid #0000;flex-direction:column;gap:2px;transition:background-color .2s ease-in-out,border-color .2s ease-in-out,border-radius .2s ease-in-out,border-left-width .2s ease-in-out,padding-left .2s ease-in-out;display:flex}.ComposeExamplePage-module__0WDlPq__stepHeader:hover{background:var(--openui-highlight)}.ComposeExamplePage-module__0WDlPq__stepHeaderActive{border-left-color:var(--openui-interactive-accent-default);background:var(--openui-highlight);border-radius:0 var(--openui-radius-2xl)var(--openui-radius-2xl)0}.ComposeExamplePage-module__0WDlPq__stepHeading{align-items:baseline;gap:var(--openui-space-s);display:flex}.ComposeExamplePage-module__0WDlPq__stepNumber{font:var(--openui-text-label-lg-heavy);color:var(--openui-text-neutral-primary)}.ComposeExamplePage-module__0WDlPq__stepTitle{font:var(--openui-text-body-lg-heavy);color:var(--openui-text-neutral-primary)}.ComposeExamplePage-module__0WDlPq__stepBody{opacity:0;grid-template-rows:0fr;transition:grid-template-rows .35s,opacity .3s;display:grid}.ComposeExamplePage-module__0WDlPq__stepBodyOpen{opacity:1;grid-template-rows:1fr}.ComposeExamplePage-module__0WDlPq__stepBodyInner{min-height:0;display:block;overflow:hidden}.ComposeExamplePage-module__0WDlPq__stepDescription{margin-top:var(--openui-space-2xs);font:var(--openui-text-body-default);color:var(--openui-text-neutral-secondary);line-height:var(--openui-line-height-default)}.ComposeExamplePage-module__0WDlPq__blockLinks{column-gap:var(--openui-space-m);row-gap:var(--openui-space-2xs);margin-top:var(--openui-space-xl);flex-wrap:wrap;display:flex}.ComposeExamplePage-module__0WDlPq__blockLink{align-items:center;gap:var(--openui-space-2xs);font:var(--openui-text-label-default-heavy);color:var(--openui-text-neutral-link);text-decoration:none;display:inline-flex}.ComposeExamplePage-module__0WDlPq__systemPrompt{margin-top:var(--openui-space-s);padding:var(--openui-space-m)var(--openui-space-m);border-left:2px solid var(--openui-border-interactive);background:var(--openui-highlight-subtle);border-radius:0 var(--openui-radius-s)var(--openui-radius-s)0;font:var(--openui-text-body-default);color:var(--openui-text-neutral-primary);display:block}.ComposeExamplePage-module__0WDlPq__systemPromptLabel{font:var(--openui-text-label-default-heavy);color:var(--openui-text-neutral-secondary);margin-bottom:var(--openui-space-xs);font-style:normal;display:block}.ComposeExamplePage-module__0WDlPq__rightPanel{border:1px solid var(--openui-border-default);border-radius:var(--openui-radius-7xl);background:var(--openui-info-background);padding:var(--openui-space-3xl)var(--openui-space-xl)var(--openui-space-xl);flex-direction:column;width:100%;height:calc(100% - 20px);margin-bottom:20px;display:flex;overflow:hidden}.ComposeExamplePage-module__0WDlPq__rightColumn{gap:var(--openui-space-s);flex-direction:column;width:100%;min-width:0;display:flex}.ComposeExamplePage-module__0WDlPq__rightPanelCompose{background:var(--openui-pink-background)}.ComposeExamplePage-module__0WDlPq__rightPanelContent{gap:var(--openui-space-l);flex-direction:column;flex:1;min-height:0;display:flex}.ComposeExamplePage-module__0WDlPq__previewSection{flex-direction:column;flex:auto;min-height:0;display:flex}.ComposeExamplePage-module__0WDlPq__editorPanel{gap:var(--openui-space-m);width:100%;padding:var(--openui-space-m-l);border:1px solid var(--openui-border-default);border-radius:var(--openui-radius-5xl);background:var(--openui-highlight-subtle);flex-direction:column;display:flex}.ComposeExamplePage-module__0WDlPq__editorCodeFrame{border:1px solid var(--openui-border-default);border-radius:var(--openui-radius-2xl);position:relative;overflow:hidden}.ComposeExamplePage-module__0WDlPq__editorCodeFrameDark{background:#0a0a0a;background:lab(2.75381% 0 0)}.ComposeExamplePage-module__0WDlPq__editorCodeFrameLight{background:var(--swatch-white)}.ComposeExamplePage-module__0WDlPq__editorHighlight{padding:var(--openui-space-l)var(--openui-space-xl);font:var(--openui-text-code-default);white-space:pre-wrap;word-break:break-all;pointer-events:none;scrollbar-width:none;margin:0;line-height:1.7;position:absolute;inset:0;overflow:auto;background:0 0!important}.ComposeExamplePage-module__0WDlPq__editorHighlight::-webkit-scrollbar{display:none}.ComposeExamplePage-module__0WDlPq__previewScroll{padding:0 var(--openui-space-m)var(--openui-space-2xl);flex:1;min-height:0;overflow-y:auto}.ComposeExamplePage-module__0WDlPq__previewScrollCompose{padding:0 var(--openui-space-3xl)var(--openui-space-3xl)}.ComposeExamplePage-module__0WDlPq__previewScroll.ComposeExamplePage-module__0WDlPq__previewFadeTop{-webkit-mask-image:linear-gradient(#0000 0%,#000 24px);mask-image:linear-gradient(#0000 0%,#000 24px)}.ComposeExamplePage-module__0WDlPq__previewScroll.ComposeExamplePage-module__0WDlPq__previewFadeBottom{-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),#0000 100%);mask-image:linear-gradient(#000 calc(100% - 48px),#0000 100%)}.ComposeExamplePage-module__0WDlPq__previewScroll.ComposeExamplePage-module__0WDlPq__previewFadeTop.ComposeExamplePage-module__0WDlPq__previewFadeBottom{-webkit-mask-image:linear-gradient(#0000 0%,#000 24px calc(100% - 48px),#0000 100%);mask-image:linear-gradient(#0000 0%,#000 24px calc(100% - 48px),#0000 100%)}.ComposeExamplePage-module__0WDlPq__previewScope{flex-direction:column;width:100%;max-width:800px;margin:0 auto;display:flex}.ComposeExamplePage-module__0WDlPq__editorInput{resize:vertical;width:100%;min-height:240px;box-shadow:none;color:#0000;font:var(--openui-text-code-default);padding:var(--openui-space-l)var(--openui-space-xl);white-space:pre-wrap;word-break:break-all;background:0 0;border:none;border-radius:0;outline:none;line-height:1.7;display:block;position:relative;overflow:auto}.ComposeExamplePage-module__0WDlPq__editorInputDark{caret-color:#dedede;caret-color:lab(88.4% 0 .0000119209)}.ComposeExamplePage-module__0WDlPq__editorInputLight{caret-color:var(--openui-text-neutral-primary)}.ComposeExamplePage-module__0WDlPq__editorInputDark::selection{color:#0000;background:#124a7b80;background:lab(29.9106% -3.00425 -33.6042/.5)}.ComposeExamplePage-module__0WDlPq__editorInputLight::selection{color:#0000;background:#c9daebcc;background:lab(86.044% -3.06767 -10.6048/.8)}.ComposeExamplePage-module__0WDlPq__editorInput:hover,.ComposeExamplePage-module__0WDlPq__editorInput:focus{box-shadow:none;background:0 0;border:none;outline:none}.ComposeExamplePage-module__0WDlPq__editorMeta{gap:var(--openui-space-s);display:flex}.ComposeExamplePage-module__0WDlPq__editorError{font:var(--openui-text-body-xs-heavy);color:var(--openui-text-danger-primary)}.ComposeExamplePage-module__0WDlPq__sectionHighlight{z-index:0;position:relative}.ComposeExamplePage-module__0WDlPq__sectionHighlight:after{content:"";inset:calc(-1*var(--openui-space-l))calc(-1*var(--openui-space-l));border-radius:var(--openui-radius-3xl);border:3px solid var(--openui-border-info-emphasis);opacity:.1;pointer-events:none;z-index:1;animation:5s forwards ComposeExamplePage-module__0WDlPq__highlightPulse;position:absolute}@keyframes ComposeExamplePage-module__0WDlPq__highlightPulse{0%{opacity:0}3%{opacity:1}80%{opacity:1}to{opacity:0}}@media (max-width:1024px){.ComposeExamplePage-module__0WDlPq__shell{height:auto;margin-bottom:0;overflow:visible}.ComposeExamplePage-module__0WDlPq__body{flex-direction:column;flex:none;overflow:visible}.ComposeExamplePage-module__0WDlPq__leftPanel{max-width:none;max-height:none;overflow:visible}.ComposeExamplePage-module__0WDlPq__rightPanel{height:auto;margin-bottom:0}.ComposeExamplePage-module__0WDlPq__previewSection{flex:none}.ComposeExamplePage-module__0WDlPq__previewScroll{max-height:400px}.ComposeExamplePage-module__0WDlPq__editorInput{min-height:180px}}
.page-module__4klTTG__page{min-height:0;height:calc(100vh - 72px - var(--openui-space-3xl) - 48px);flex-direction:column;display:flex}.page-module__4klTTG__backRow{margin-bottom:var(--openui-space-m);padding-left:var(--openui-space-l);flex-shrink:0}.page-module__4klTTG__backLink{align-items:center;gap:var(--openui-space-2xs);font:var(--openui-text-label-sm);color:var(--openui-text-neutral-secondary);border-radius:var(--openui-radius-m);padding:var(--openui-space-2xs)var(--openui-space-xs);margin:calc(-1*var(--openui-space-2xs))calc(-1*var(--openui-space-xs));text-decoration:none;transition:background-color .15s,color .15s;display:inline-flex}.page-module__4klTTG__backLink:hover{color:var(--openui-text-neutral-primary);background:var(--openui-highlight)}.page-module__4klTTG__composeWrap{flex-direction:column;flex:1;min-height:0;display:flex}
.page-module__7_dKUa__page{min-height:0;height:calc(100vh - 72px - var(--openui-space-3xl) - 48px);flex-direction:column;display:flex}.page-module__7_dKUa__backRow{margin-bottom:var(--openui-space-m);padding-left:var(--openui-space-l);flex-shrink:0}.page-module__7_dKUa__backLink{align-items:center;gap:var(--openui-space-2xs);font:var(--openui-text-label-sm);color:var(--openui-text-neutral-secondary);border-radius:var(--openui-radius-m);padding:var(--openui-space-2xs)var(--openui-space-xs);margin:calc(-1*var(--openui-space-2xs))calc(-1*var(--openui-space-xs));text-decoration:none;transition:background-color .15s,color .15s;display:inline-flex}.page-module__7_dKUa__backLink:hover{color:var(--openui-text-neutral-primary);background:var(--openui-highlight)}.page-module__7_dKUa__composeWrap{flex-direction:column;flex:1;min-height:0;display:flex}