.design-to-code_root__KUYQB{--dtc-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;container-type:inline-size;width:100%;max-width:760px;min-width:0;color:var(--foreground);font-family:var(--font-body);font-size:var(--text-sm);letter-spacing:var(--tracking-body);line-height:var(--leading-body)}.design-to-code_srOnly__nyEkm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.design-to-code_card__FS1wM{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--surface)}.design-to-code_panes__leTki{display:grid;grid-template-columns:minmax(0,1fr)}.design-to-code_pane__hSCog{position:relative;display:grid;min-width:0;grid-template-rows:52px 300px}.design-to-code_pane__hSCog+.design-to-code_pane__hSCog{border-top:1px solid var(--border-subtle)}@container (min-width: 640px){.design-to-code_panes__leTki{grid-template-columns:344px minmax(0,1fr)}.design-to-code_pane__hSCog+.design-to-code_pane__hSCog{border-top:0;border-left:1px solid var(--border-subtle)}}.design-to-code_head__f4BjP{display:flex;min-width:0;align-items:center;gap:8px;padding:0 8px 0 16px;border-bottom:1px solid var(--border-subtle)}.design-to-code_pane__hSCog+.design-to-code_pane__hSCog .design-to-code_head__f4BjP{padding-left:8px}.design-to-code_sourceIcon__iy2ok{display:grid;flex:none;width:16px;height:16px;place-items:center;color:var(--text-muted)}.design-to-code_sourceIcon__iy2ok svg{display:block}.design-to-code_sourceName__ub1DA{position:relative;display:block;flex:1;min-width:0;height:20px}.design-to-code_sourceNameInner__yw_rn{display:flex;min-width:0;align-items:baseline;gap:8px;line-height:20px;white-space:nowrap}.design-to-code_ellipsis__WaWCp{min-width:0;overflow:hidden;font-weight:500;text-overflow:ellipsis}.design-to-code_sourceMeta___nk3v{flex:none;color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.design-to-code_muted__wrKlz{color:var(--text-muted)}.design-to-code_iconButton__V7guG.design-to-code_iconButton__V7guG{flex:none;width:36px;min-height:36px;padding:0;color:var(--text-muted)}.design-to-code_viewToggle__Mi4bY{flex:none}.design-to-code_viewToggle__Mi4bY button[aria-pressed]{min-height:28px;padding:0 12px}.design-to-code_model__UFoNU{display:inline-flex;min-width:0;align-items:center;gap:6px;margin-left:auto;color:var(--text-secondary);font-size:var(--text-xs);white-space:nowrap}.design-to-code_modelMark__y0zfj{display:grid;flex:none;width:16px;height:16px;place-items:center}.design-to-code_modelMark__y0zfj svg{display:block}.design-to-code_modelName__3Sshh{min-width:0;overflow:hidden;text-overflow:ellipsis}.design-to-code_copy__SYOtN{flex:none}.design-to-code_sourceBody__A_PN1{position:relative;overflow:hidden;background:var(--surface-muted)}.design-to-code_stage__6t7Gw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:15px 12px 15px 78px}.design-to-code_frame__jmAc5{position:relative;flex:0 1 auto;min-width:0;max-width:100%}.design-to-code_media__vm8ES{overflow:hidden;border-radius:14px}.design-to-code_image__FqYT_{display:block;max-width:100%;max-height:268px;height:auto;border:1px solid var(--border);border-radius:14px;object-fit:contain}.design-to-code_scanClip__Vwvsh{position:absolute;inset:0;overflow:hidden;border-radius:14px;pointer-events:none}.design-to-code_scan__hb_JI{position:absolute;inset:0;animation-name:design-to-code_dtc-scan___R2qy;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:both}.design-to-code_scan__hb_JI[data-loop]{animation-iteration-count:infinite}.design-to-code_scan__hb_JI:before{content:"";position:absolute;top:0;right:0;left:0;height:1px;background:var(--accent)}@keyframes design-to-code_dtc-scan___R2qy{0%{transform:translateY(0)}to{transform:translateY(100%)}}.design-to-code_box__hPufe{position:absolute;box-sizing:border-box;border:1px solid color-mix(in oklab,var(--accent) 55%,transparent);border-radius:6px;background:color-mix(in oklab,var(--accent) 6%,transparent);pointer-events:none;transition:border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}.design-to-code_box__hPufe[data-state=active]{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent)}.design-to-code_box__hPufe[data-state=settled]{border-color:color-mix(in oklab,var(--accent) 28%,transparent);background:transparent}.design-to-code_tag__g3f8b{position:absolute;left:0;height:0}.design-to-code_connector__XOX6U{position:absolute;top:-1px;right:0;left:-12px;height:1px;background:color-mix(in oklab,var(--accent) 45%,transparent);transition:background-color var(--duration-fast) var(--ease-standard)}.design-to-code_label__vw7SV{position:absolute;top:0;right:calc(100% + 10px);margin:0;border:0;border-radius:6px;padding:2px 6px;background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-xs);line-height:16px;white-space:nowrap;transform:translateY(-50%);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}.design-to-code_label__vw7SV:disabled{cursor:default}.design-to-code_tag__g3f8b[data-state=active] .design-to-code_label__vw7SV{background:color-mix(in oklab,var(--accent) 10%,transparent);color:var(--foreground)}.design-to-code_tag__g3f8b[data-state=active] .design-to-code_connector__XOX6U{background:var(--accent)}.design-to-code_tag__g3f8b[data-state=settled] .design-to-code_label__vw7SV{color:var(--text-muted)}.design-to-code_tag__g3f8b[data-state=settled] .design-to-code_connector__XOX6U{background:color-mix(in oklab,var(--accent) 28%,transparent)}.design-to-code_dropWrap___tAgd{position:absolute;inset:0;padding:12px}.design-to-code_drop__HDzZn{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:14px;padding:16px;text-align:center;transition:border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}.design-to-code_pane__hSCog[data-dragging] .design-to-code_drop__HDzZn{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 5%,transparent)}.design-to-code_dropIcon__RP_Su{color:var(--text-muted)}.design-to-code_dropTitle__bvgSB{margin:12px 0 0;font-weight:500;line-height:20px}.design-to-code_dropHint__FmiFv{margin:4px 0 0;color:var(--text-muted);font-size:var(--text-xs);line-height:16px}.design-to-code_dropActions__iPS3T{display:flex;gap:8px;margin-top:16px}.design-to-code_dropVeil__MgN93{position:absolute;inset:12px;display:grid;place-items:center;border:1px dashed var(--accent);border-radius:14px;background:color-mix(in oklab,var(--surface) 86%,transparent);color:var(--foreground);font-weight:500;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-standard)}.design-to-code_pane__hSCog[data-dragging][data-has-source] .design-to-code_dropVeil__MgN93{opacity:1}.design-to-code_outBody__9Nxh5{position:relative;overflow:hidden}.design-to-code_layer__poYQ1{position:absolute;inset:0}.design-to-code_previewLayer__UpcBz{background:var(--surface-muted)}.design-to-code_fill__2tB2R,.design-to-code_previewInner__95uve{position:absolute;inset:0}.design-to-code_previewInner__95uve{display:grid;place-items:center;padding:15px}.design-to-code_placeholder__GK9m8{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;color:var(--text-muted);text-align:center}.design-to-code_code__Rx2ph{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:12px 0;font-family:var(--dtc-mono);font-size:var(--text-xs);line-height:20px;letter-spacing:0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.design-to-code_codeInner__ToPut{min-width:100%}.design-to-code_line__sZtnA{display:grid;grid-template-columns:40px minmax(0,1fr);padding-right:16px;transition:background-color var(--duration-fast) var(--ease-standard)}.design-to-code_line__sZtnA[data-hl]{background:color-mix(in oklab,var(--accent) 7%,transparent)}.design-to-code_lineNo__SWCUt{padding-right:14px;color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;user-select:none;animation:design-to-code_dtc-in__Ix2IY .14s ease-out both}.design-to-code_lineText__I_ITh{min-width:0;padding-left:calc(var(--indent, 0ch) + 2ch);text-indent:-2ch;white-space:pre-wrap;overflow-wrap:anywhere}.design-to-code_chunk__xk8ly{animation:design-to-code_dtc-in__Ix2IY .14s ease-out both}.design-to-code_chunk__xk8ly[data-k=kw]{color:var(--series-2)}.design-to-code_chunk__xk8ly[data-k=str]{color:color-mix(in oklab,var(--series-4) 78%,var(--foreground))}.design-to-code_chunk__xk8ly[data-k=num]{color:color-mix(in oklab,var(--series-3) 72%,var(--foreground))}.design-to-code_chunk__xk8ly[data-k=tag]{color:var(--series-1)}.design-to-code_chunk__xk8ly[data-k=attr]{color:color-mix(in oklab,var(--series-3) 62%,var(--foreground))}.design-to-code_chunk__xk8ly[data-k=punct]{color:var(--text-muted)}@keyframes design-to-code_dtc-in__Ix2IY{0%{opacity:0}}.design-to-code_foot__KRDff{display:flex;min-width:0;height:60px;align-items:center;gap:8px;padding:0 12px 0 16px;border-top:1px solid var(--border-subtle)}.design-to-code_status__Ex7LU{position:relative;flex:1;min-width:0;height:20px}.design-to-code_statusInner__IjT0f{display:flex;min-width:0;height:20px;align-items:center;gap:8px}.design-to-code_statusIcon__0MQYr{display:grid;flex:none;width:16px;height:16px;place-items:center;color:var(--text-muted)}.design-to-code_statusIcon__0MQYr[data-tone=success]{color:var(--success)}.design-to-code_statusIcon__0MQYr[data-tone=danger]{color:var(--danger)}.design-to-code_statusText__xEQc6{display:flex;min-width:0;gap:.3em;overflow:hidden;line-height:20px;white-space:nowrap}.design-to-code_statusVerb__EZ7ll{flex:none}.design-to-code_statusObject__EvjNr{min-width:0;overflow:hidden;text-overflow:ellipsis}.design-to-code_statusMeta__IMyP8{flex:none;color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}.design-to-code_spinner__uIrW9{animation:design-to-code_dtc-spin__oGz4O .8s linear infinite}@keyframes design-to-code_dtc-spin__oGz4O{to{transform:rotate(1turn)}}.design-to-code_compact__PomFd.design-to-code_compact__PomFd{flex:none;gap:6px}.design-to-code_figma__XBR6I.design-to-code_figma__XBR6I{padding-inline:12px}.design-to-code_accent__1J5TC.design-to-code_accent__1J5TC{border-color:var(--accent);background:var(--accent);color:var(--accent-foreground)}.design-to-code_accent__1J5TC.design-to-code_accent__1J5TC:disabled{border-color:var(--border);background:var(--surface-muted);color:var(--text-muted);opacity:1;box-shadow:none}@container (max-width: 520px){.design-to-code_figmaLabel__I0mZY,.design-to-code_statusObject__EvjNr{display:none}.design-to-code_figma__XBR6I.design-to-code_figma__XBR6I{padding-inline:9px}}@container (max-width: 440px){.design-to-code_modelName__3Sshh,.design-to-code_sourceMeta___nk3v,.design-to-code_statusMeta__IMyP8{display:none}}.design-to-code_mock__JJakX{box-sizing:border-box;display:flex;width:232px;height:270px;flex-direction:column;border:1px solid var(--border);border-radius:14px;padding:13px;background:var(--surface);color:var(--foreground);text-align:left;user-select:none}.design-to-code_mock__JJakX[data-live]{user-select:auto}.design-to-code_mockHead__f5Vau{display:flex;height:18px;align-items:center;justify-content:space-between}.design-to-code_mockName__ZPhZw{font-weight:500;line-height:18px}.design-to-code_mockBadge__hIqQh{height:18px;border-radius:9px;padding:0 7px;background:color-mix(in oklab,var(--accent) 12%,transparent);color:var(--accent);font-size:var(--text-xs);line-height:18px}.design-to-code_mockToggle__bJavs{position:relative;display:grid;height:24px;flex:none;grid-template-columns:1fr 1fr;margin-top:12px;border-radius:8px;padding:2px;background:var(--surface-muted)}.design-to-code_mockThumb__8z145{position:absolute;top:2px;bottom:2px;left:2px;box-sizing:border-box;width:calc(50% - 2px);border:1px solid var(--border);border-radius:6px;background:var(--surface)}.design-to-code_mockOption__Pty6M{position:relative;z-index:1;display:grid;place-items:center;margin:0;border:0;border-radius:6px;padding:0;background:transparent;color:var(--text-muted);font:inherit;font-size:var(--text-xs);line-height:20px;transition:color var(--duration-fast) var(--ease-standard)}.design-to-code_mockOption__Pty6M[data-on]{color:var(--foreground)}button.design-to-code_mockOption__Pty6M{cursor:pointer;-webkit-tap-highlight-color:transparent;--focus-outline-offset:-2px}.design-to-code_mockPrice__9AKjQ{display:flex;height:28px;flex:none;align-items:baseline;gap:4px;margin:12px 0 0}.design-to-code_mockAmount__XN6nj{position:relative;display:inline-block;font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:28px}.design-to-code_mockUnit__c_2BP{color:var(--text-muted);font-size:var(--text-xs);line-height:16px}.design-to-code_mockList__xXkTG{display:flex;height:90px;flex:none;flex-direction:column;gap:6px;margin:12px 0 0;padding:0;list-style:none}.design-to-code_mockList__xXkTG li{display:flex;height:18px;align-items:center;gap:8px;color:var(--text-secondary);line-height:18px;white-space:nowrap}.design-to-code_mockList__xXkTG svg{flex:none;color:var(--accent)}.design-to-code_mockCta__UmnN_{display:grid;width:100%;height:32px;flex:none;place-items:center;margin-top:14px;border:0;border-radius:8px;padding:0;background:var(--foreground);color:var(--background);font:inherit;font-weight:500;transition:opacity var(--duration-fast) var(--ease-standard)}button.design-to-code_mockCta__UmnN_{cursor:pointer;-webkit-tap-highlight-color:transparent}@media (hover:hover) and (pointer:fine){button.design-to-code_mockCta__UmnN_:hover{opacity:.92}}button.design-to-code_mockCta__UmnN_:active{opacity:.84}@media (prefers-reduced-motion:reduce){.design-to-code_chunk__xk8ly,.design-to-code_lineNo__SWCUt{animation:none}.design-to-code_scan__hb_JI{display:none}.design-to-code_box__hPufe,.design-to-code_connector__XOX6U,.design-to-code_dropVeil__MgN93,.design-to-code_drop__HDzZn,.design-to-code_label__vw7SV,.design-to-code_line__sZtnA,.design-to-code_mockCta__UmnN_,.design-to-code_mockOption__Pty6M{transition:none}}.design-to-code_demo__Qmggm{display:flex;justify-content:center;width:100%}