html,body,#root{height:100%;margin:0}@supports (height:100dvh){html,body,#root,.preview-shell,.preview-main{height:100dvh}}body{font-family:var(--font-family-sans);background:hsl(var(--muted));color:hsl(var(--foreground));font-size:var(--font-size-sm);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}.preview-shell{grid-template-columns:1fr;height:100vh;min-height:0;display:grid;position:relative}.preview-sidebar-backdrop{z-index:30;background:hsl(var(--foreground) / .35);cursor:pointer;border:0;padding:0;position:fixed;inset:0}.preview-sidebar{border-right:1px solid hsl(var(--border));background:hsl(var(--card));min-height:0;font-size:var(--font-size-sm);z-index:40;width:min(280px,88vw);box-shadow:none;flex-direction:column;transition:transform .18s;display:flex;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.preview-shell[data-sidebar-open=true] .preview-sidebar{box-shadow:8px 0 24px hsl(var(--foreground) / .12);transform:translate(0)}.preview-sidebar-header{justify-content:space-between;align-items:center;gap:8px;padding:12px 12px 8px;display:flex}.preview-sidebar-close{border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 4px);background:hsl(var(--background));width:28px;height:28px;color:hsl(var(--muted-foreground));cursor:pointer;justify-content:center;align-items:center;font-size:18px;line-height:1;display:inline-flex}.preview-sidebar-sub{font-size:var(--font-size-xs);color:hsl(var(--muted-foreground));padding:0 12px 8px;display:block}.preview-brand{font-weight:600;font-size:var(--font-size-sm);color:hsl(var(--foreground));align-items:center;gap:8px;display:flex}.preview-brand-mark{border-radius:calc(var(--radius) - 2px);background:hsl(var(--primary));width:22px;height:22px;color:hsl(var(--primary-foreground));letter-spacing:.04em;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:inline-flex}.preview-brand-name{flex:1}.preview-brand-badge{text-transform:uppercase;letter-spacing:.06em;border-radius:calc(var(--radius) - 4px);background:hsl(var(--accent));color:hsl(var(--accent-foreground));padding:2px 6px;font-size:10px;font-weight:600}.preview-search{border-bottom:1px solid hsl(var(--border));padding:10px 12px}.preview-search-input{width:100%;height:var(--control-height-sm,30px);border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));font:inherit;font-size:var(--font-size-xs);color:inherit;outline:none;padding:0 10px;transition:border-color .12s,box-shadow .12s}.preview-search-input:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring) / .18)}.preview-tree{flex:1;padding:6px 6px 12px;overflow-y:auto}.preview-tree-list{margin:0;padding:0;list-style:none}.preview-tree-list-root{padding:4px 0}.preview-tree-empty{text-align:center;color:hsl(var(--muted-foreground));font-size:var(--font-size-xs);padding:16px}.preview-tree-row{--row-pad:calc(8px + var(--depth,0) * 10px);width:100%;padding:5px 8px 5px var(--row-pad);border-radius:calc(var(--radius) - 4px);cursor:pointer;text-align:left;color:hsl(var(--foreground));font:inherit;background:0 0;border:0;align-items:center;gap:8px;margin:0;line-height:1.3;transition:background-color .1s;display:flex}.preview-tree-row:hover{background:hsl(var(--accent))}.preview-tree-root{text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--muted-foreground));margin-top:4px;padding-top:8px;padding-bottom:6px;font-size:11px;font-weight:600}.preview-tree-root .preview-tree-count{background:hsl(var(--background));border:1px solid hsl(var(--border))}.preview-tree-section{text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--muted-foreground));cursor:default;margin-top:4px;padding-top:10px;padding-bottom:6px;font-size:11px;font-weight:600}.preview-tree-section:hover{background:0 0}.preview-tree-section .preview-tree-count{background:hsl(var(--background));border:1px solid hsl(var(--border))}.preview-tree-group{font-weight:500}.preview-tree-root[data-active-path=true] .preview-tree-label,.preview-tree-group[data-active-path=true] .preview-tree-label{color:hsl(var(--primary));font-weight:600}.preview-tree-group[data-active-path=true] .preview-tree-caret{color:hsl(var(--primary))}.preview-tree-leaf{color:hsl(var(--muted-foreground));font-size:12.5px}.preview-tree-leaf:hover{color:hsl(var(--foreground))}.preview-tree-leaf[data-active=true]{background:hsl(var(--accent));color:hsl(var(--primary));box-shadow:inset 3px 0 0 hsl(var(--primary));font-weight:600}.preview-tree-leaf[data-active=true]:hover{background:hsl(var(--accent))}.preview-tree-leaf[data-active=true] .preview-tree-bullet{background:hsl(var(--primary))}.preview-tree-caret{width:12px;height:12px;color:hsl(var(--muted-foreground));flex:0 0 12px;justify-content:center;align-items:center;transition:transform .14s;display:inline-flex}.preview-tree-caret[data-open=true]{transform:rotate(90deg)}.preview-tree-bullet{background:hsl(var(--border));border-radius:999px;flex:0 0 4px;width:4px;height:4px;margin-left:4px;display:inline-block}.preview-tree-leaf:hover .preview-tree-bullet{background:hsl(var(--muted-foreground))}.preview-tree-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.preview-tree-count{color:hsl(var(--muted-foreground));background:hsl(var(--muted));text-align:center;border-radius:999px;min-width:18px;padding:1px 7px;font-size:10px;font-weight:600}.preview-main{background:hsl(var(--muted));flex-direction:column;min-width:0;height:100vh;min-height:0;display:flex;overflow:hidden}.doc-page-header{margin:0 0 16px}.doc-page-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);color:hsl(var(--foreground));margin:0 0 8px}.doc-page-intro.doc-prose{margin-bottom:0}.doc-page-intro .doc-p{font-size:var(--font-size-base);color:hsl(var(--muted-foreground))}.doc-story-body.doc-prose{margin-bottom:24px}.doc-prose{color:hsl(var(--foreground));margin:0 0 16px}.doc-h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin:0 0 12px}.doc-h2{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:24px 0 8px}.doc-h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:16px 0 8px}.doc-h4{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:hsl(var(--foreground));margin:14px 0 6px}.doc-p{color:hsl(var(--muted-foreground));margin:0 0 12px;line-height:1.6}.doc-list{color:hsl(var(--muted-foreground));margin:0 0 16px;padding-left:1.25rem}.doc-inline-code{background:hsl(var(--muted));border-radius:4px;padding:.1em .35em;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875em}.doc-code-block{background:hsl(var(--muted) / .55);border:1px solid hsl(var(--border));border-radius:6px;margin:0 0 16px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.5;overflow-x:auto}.doc-code-block code{white-space:pre}.doc-table-wrap{border:1px solid hsl(var(--border));border-radius:6px;margin:0 0 20px;overflow-x:auto}.doc-table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.45}.doc-table th,.doc-table td{text-align:left;vertical-align:top;border-bottom:1px solid hsl(var(--border));padding:10px 14px}.doc-table th{background:hsl(var(--muted) / .45);font-weight:var(--font-weight-semibold);color:hsl(var(--foreground));white-space:nowrap}.doc-table td{color:hsl(var(--muted-foreground))}.doc-table tbody tr:last-child td{border-bottom:none}.doc-table td:first-child code,.doc-table th:first-child code{font-weight:var(--font-weight-medium);color:hsl(var(--foreground))}.simple-demo-block-preview{background:#fff;min-height:80px;padding:40px 48px}.simple-demo-block-preview .preview-loading,.simple-demo-block-preview .preview-error{margin:0}.demo-block{width:100%;box-shadow:0 1px 3px hsl(var(--foreground) / .06);background:#fff;border:1px solid #bdbdbd;border-radius:4px;margin:0 0 20px;overflow:hidden}.demo-block-toolbar{color:#3c3c3c;background:#ececec;border-bottom:1px solid #cfcfcf;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:6px 10px;font-size:12px;line-height:1.2;display:flex}.demo-block-field{align-items:center;gap:8px;display:inline-flex}.demo-block-field-label{color:#5f6368;font-weight:500}.demo-block-select,.demo-block-dim-input{color:#202124;height:24px;font:inherit;background:#fff;border:1px solid #bdbdbd;border-radius:2px;padding:0 8px}.demo-block-select{cursor:pointer;min-width:140px}.demo-block-dims{align-items:center;gap:6px;display:inline-flex}.demo-block-dim-input{text-align:center;width:52px}.demo-block-dim-input-wide{width:56px}.demo-block-dim-input:not([readonly]):focus{outline-offset:-1px;outline:2px solid #1a73e8}.demo-block-dim-sep{color:#5f6368}.demo-block-field-zoom{gap:4px}.demo-block-zoom-input{width:52px}.demo-block-zoom-suffix{color:#5f6368;margin-right:2px}.demo-block-zoom-preset{color:#202124;height:24px;font:inherit;cursor:pointer;background:#fff;border:1px solid #bdbdbd;border-radius:2px;padding:0 8px}.demo-block-zoom-preset:hover{background:#f5f5f5}.demo-block-zoom-preset[data-active=true]{color:#1a73e8;background:#e8f0fe;border-color:#1a73e8}.demo-block-meta{color:#5f6368;font-variant-numeric:tabular-nums;margin-left:auto}.demo-block-canvas{background:#dcdcdc;justify-content:center;align-items:flex-start;min-height:280px;padding:20px;display:flex;position:relative;overflow:visible}.demo-block-canvas[data-responsive=true]{padding:12px 8px}.demo-block-canvas[data-mode=page],.demo-block-canvas[data-mode=component]{justify-content:center}.demo-block-viewport{flex:none;position:relative;overflow:visible}.demo-block-frame{height:auto;box-shadow:0 8px 24px hsl(var(--foreground) / .12);background:#fff;border:1px solid #bdbdbd;flex:none;overflow:auto}.demo-block-frame[data-fill=true]{padding:0;container-type:inline-size}.demo-block-frame[data-layout=padded]{padding:16px}.demo-block .ui-page-container .ui-page-header,.demo-block .ui-page-container .ui-page-footer,.demo-block .ui-page-container:not(.ui-page-container--flush) .ui-page-body{padding-left:var(--space-page-active-x);padding-right:var(--space-page-active-x)}.demo-block-footer{border-top:1px solid hsl(var(--border));background:hsl(var(--card));align-items:center;gap:8px;padding:8px 12px;display:flex}.demo-block-footer-btn{border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));height:28px;color:hsl(var(--foreground));font-size:var(--font-size-xs);cursor:pointer;align-items:center;padding:0 12px;font-weight:500;display:inline-flex}.demo-block-footer-btn:hover{background:hsl(var(--muted))}.demo-block-footer-btn[data-active=true]{border-color:hsl(var(--primary));color:hsl(var(--primary))}.demo-block-footer-copy{margin-left:auto}.demo-block-code{border-top:1px solid hsl(var(--border));color:#f3f3ed;background:#081b31}.demo-block-code-pre{max-height:360px;margin:0;padding:12px 16px;font-size:12px;line-height:1.55;overflow:auto}.demo-block-code-pre code{white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:block}.doc-demo{max-width:960px;margin:0 auto 16px}.doc-demo[data-framed=true]{justify-content:center;display:flex}.doc-demo-frame{background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);box-shadow:0 1px 2px hsl(var(--foreground) / .04);width:100%;overflow:auto;container-type:inline-size}.doc-demo-frame[data-framed=true]{flex:none}.doc-demo-frame[data-device=true]{border-left:0;border-right:0;border-radius:0;width:100%}.doc-demo-frame[data-viewport=full]{width:100%}.doc-code{border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);color:#f3f3ed;background:#081b31;max-width:960px;margin:0 auto;overflow:hidden}.doc-code-header{border-bottom:1px solid hsl(var(--primary-foreground) / .08);background:#061628;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.doc-code-toggle,.doc-code-copy{color:inherit;cursor:pointer;font-size:var(--font-size-sm);background:0 0;border:0;align-items:center;gap:8px;display:inline-flex}.doc-code-caret{transition:transform .12s;display:inline-block}.doc-code-caret[data-open=true]{transform:rotate(90deg)}.doc-code-actions{font-size:var(--font-size-xs);color:hsl(var(--primary-foreground) / .65);align-items:center;gap:12px;display:inline-flex}.doc-code-block{max-height:480px;margin:0;padding:12px 16px;font-size:12px;line-height:1.55;overflow:auto}@media (width<=639px){.demo-block{border-left:0;border-right:0;border-radius:0;margin-left:0;margin-right:0}.demo-block-canvas{min-height:240px;padding:12px}.demo-block-toolbar{padding:8px 10px}.demo-block-meta{width:100%;margin-left:0}}.preview-toolbar{border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));font-size:var(--font-size-sm);flex-direction:column;flex-shrink:0;align-items:stretch;gap:8px;padding:10px 32px;display:flex}.preview-toolbar-start{align-items:center;gap:8px;min-width:0;display:flex}.preview-menu-btn{border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));width:36px;height:36px;color:hsl(var(--foreground));cursor:pointer;flex:0 0 36px;justify-content:center;align-items:center;display:inline-flex}.preview-toolbar-title{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.preview-toolbar-story{font-size:var(--font-size-sm);color:hsl(var(--foreground));white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.preview-toolbar-path{font-size:var(--font-size-xs);color:hsl(var(--muted-foreground));white-space:nowrap;text-overflow:ellipsis;display:none;overflow:hidden}.preview-viewports{border:1px solid hsl(var(--border));border-radius:calc(var(--radius) - 2px);background:hsl(var(--background));width:100%;padding:3px;display:flex}.preview-viewport-btn{border-radius:calc(var(--radius) - 4px);cursor:pointer;font-size:var(--font-size-xs);color:hsl(var(--muted-foreground));background:0 0;border:0;flex:1;justify-content:center;align-items:center;gap:6px;padding:6px 4px;font-weight:500;transition:background-color .12s,color .12s;display:inline-flex}.preview-viewport-btn:hover{color:hsl(var(--foreground))}.preview-viewport-btn[data-active=true]{background:hsl(var(--card));color:hsl(var(--primary));box-shadow:0 1px 2px hsl(var(--foreground) / .06)}.preview-device-badge{border-radius:calc(var(--radius) - 2px);border:1px solid hsl(var(--border));background:hsl(var(--background));width:100%;color:hsl(var(--muted-foreground));font-size:var(--font-size-xs);text-align:center;padding:6px 10px;font-weight:500;display:block}.preview-stage{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden auto}.preview-canvas{flex-direction:column;flex:1;align-items:center;gap:8px;min-height:0;padding:12px 8px 8px;display:flex;overflow:auto}.preview-canvas[data-viewport=full]{align-items:stretch;gap:0;padding:0}.preview-loading{min-height:120px;color:hsl(var(--muted-foreground));font-size:var(--font-size-sm);justify-content:center;align-items:center;display:flex}.preview-frame{background:hsl(var(--background));border-radius:calc(var(--radius) - 2px);border:1px solid hsl(var(--border));box-shadow:0 1px 2px hsl(var(--foreground) / .04);max-width:100%;min-height:80px;transition:width .22s cubic-bezier(.2,.8,.2,1);overflow:visible;container-type:inline-size}.preview-frame[data-viewport=full]{width:100%;max-width:none;box-shadow:none;border-bottom:0;border-left:0;border-right:0;border-radius:0;flex:1;align-self:stretch;min-height:0}.preview-frame[data-framed=true]{overflow:auto}.preview-frame[data-device=true]{max-width:100%;min-height:0;box-shadow:none;border:0;border-radius:0;overflow:visible;width:100%!important}.preview-frame-meta{font-size:var(--font-size-xs);color:hsl(var(--muted-foreground));flex-wrap:wrap;justify-content:center;gap:6px;display:none}.preview-code-panel{border-top:1px solid hsl(var(--border));color:#f3f3ed;background:#081b31;flex-direction:column;flex:none;display:flex}.preview-code-panel[data-open=true]{height:220px}.preview-code-header{border-bottom:1px solid hsl(var(--primary-foreground) / .08);background:#061628;flex:none;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex}.preview-code-toggle{color:inherit;font:inherit;font-size:var(--font-size-xs);cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:0;font-weight:600;display:inline-flex}.preview-code-caret{color:hsl(var(--muted-foreground));transition:transform .14s;display:inline-block}.preview-code-caret[data-open=true]{transform:rotate(90deg)}.preview-code-actions{align-items:center;gap:8px;display:inline-flex}.preview-code-lang{text-transform:uppercase;letter-spacing:.06em;color:hsl(var(--muted-foreground));font-size:10px}.preview-code-copy{border-radius:calc(var(--radius) - 4px);border:1px solid hsl(var(--primary-foreground) / .14);background:hsl(var(--primary-foreground) / .06);color:#f3f3ed;font:inherit;cursor:pointer;padding:4px 10px;font-size:11px}.preview-code-copy:hover{background:hsl(var(--primary-foreground) / .12)}.preview-code-scroll{flex:1;min-height:0;overflow:auto}.preview-code-block{font-family:var(--font-family-mono);white-space:pre;tab-size:2;margin:0;padding:14px 16px;font-size:12px;line-height:1.6}.preview-code-block code{font-family:inherit}.tok-tag{color:#79b1f6}.tok-attr{color:#fe9d5d}.tok-string{color:#81daa1}.tok-comment{color:hsl(var(--muted-foreground));font-style:italic}.tok-keyword{color:#b08eeb}.tok-punct{color:#bfbfb0}.tok-plain{color:#f3f3ed}.preview-empty{text-align:center;color:hsl(var(--muted-foreground));padding:32px}.preview-error{border:1px solid hsl(var(--destructive) / .35);border-radius:calc(var(--radius) - 2px);background:hsl(var(--destructive) / .08);color:hsl(var(--destructive));font-size:var(--font-size-sm);flex-direction:column;gap:8px;padding:12px 16px;display:flex}.preview-error pre{white-space:pre-wrap;font-family:var(--font-family-mono);font-size:var(--font-size-xs);margin:0}.preview-runtime-loading,.preview-runtime-error{font-size:var(--font-size-sm);color:hsl(var(--foreground));padding:16px}.preview-runtime-error pre{white-space:pre-wrap;margin:8px 0 0;font-size:12px}.preview-tree::-webkit-scrollbar{width:10px;height:10px}.preview-canvas::-webkit-scrollbar{width:10px;height:10px}.preview-code-scroll::-webkit-scrollbar{width:10px;height:10px}.preview-tree::-webkit-scrollbar-thumb{background:0 0;border-radius:999px}.preview-canvas::-webkit-scrollbar-thumb{background:0 0;border-radius:999px}.preview-code-scroll::-webkit-scrollbar-thumb{background:0 0;border-radius:999px}.preview-tree:hover::-webkit-scrollbar-thumb{background:hsl(var(--border))}.preview-canvas:hover::-webkit-scrollbar-thumb{background:hsl(var(--border))}.preview-code-scroll:hover::-webkit-scrollbar-thumb{background:hsl(var(--border))}@media (width>=640px){.preview-shell[data-sidebar-open=true]{grid-template-columns:280px 1fr}.preview-shell[data-sidebar-open=false]{grid-template-columns:1fr}.preview-shell[data-sidebar-open=true] .preview-sidebar{width:280px;height:100vh;box-shadow:none;position:sticky;top:0;transform:none}.preview-shell[data-sidebar-open=false] .preview-sidebar{width:min(280px,88vw);height:100vh;position:fixed;inset:0 auto 0 0;transform:translate(-100%)}.preview-sidebar-backdrop,.preview-sidebar-close{display:none}.preview-toolbar{flex-direction:row;justify-content:space-between;align-items:center;padding:10px 20px}.preview-toolbar-path{display:block}.preview-viewports{width:auto;display:inline-flex}.preview-viewport-btn{flex:none;padding:4px 10px}.preview-canvas{gap:10px;padding:16px 14px 10px}.preview-frame-meta{display:flex}.preview-viewport-label{display:inline}}@media (width<=639px){.preview-viewport-label{display:none}.preview-shell[data-host-mobile=true] .preview-canvas{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;align-items:stretch;padding:0;overflow:hidden auto}.preview-shell[data-host-mobile=true] .preview-stage{min-height:0}.preview-shell[data-host-mobile=true] .preview-frame-meta{display:none}.preview-code-panel[data-open=true]{height:min(180px,32dvh)}}