.component-demo[data-v-ff244282]{display:flex;flex-direction:column;gap:16px;width:100%}.component-demo h2[data-v-ff244282]{color:var(--neutral-10);font-size:20px;font-weight:550}.tab-controls[data-v-ff244282]{align-items:center;display:flex;gap:16px;height:30px;justify-content:space-between}.tab-buttons[data-v-ff244282]{background:transparent;border-radius:0;display:flex;gap:8px;height:100%;padding:0}.device-controls[data-v-ff244282]{align-items:center;display:flex;gap:0;height:100%;margin-left:auto}.device-buttons[data-v-ff244282]{display:flex;gap:4px;height:100%}.device-button[data-v-ff244282]{align-items:center;background:transparent;border-radius:10px;color:var(--neutral-6);cursor:pointer;display:flex;font-size:13px;font-weight:450;gap:6px;height:30px;padding:4px 9px;transition:all .3s ease}.device-button[data-v-ff244282]:hover{background:var(--neutral-3);border-color:var(--neutral-4);color:var(--neutral-8)}.device-button.active[data-v-ff244282]{background:var(--white);box-shadow:0 2px 8px #0000000a,0 1px 3px #00000008;box-shadow:0 0 #0000,0 0 #0000,0 1px 1px .5px #3333330a,0 3px 3px -1.5px #33333305,0 6px 6px -3px #3333330a,0 12px 12px -6px #3333330a,0 24px 24px -12px #3333330a,0 48px 48px -24px #3333330a,0 0 0 1px #3333331a,inset 0 -1px 1px -.5px #3333330f;color:var(--neutral-10);transform:translateY(-1px)}.width-indicator[data-v-ff244282]{background:var(--neutral-2);border:1px solid var(--neutral-3);border-radius:6px;color:var(--neutral-7);font-size:12px;font-weight:500;min-width:60px;padding:4px 8px;text-align:center}.action-buttons[data-v-ff244282]{gap:8px;height:100%}.action-buttons[data-v-ff244282],.tab-button[data-v-ff244282]{align-items:center;display:flex}.tab-button[data-v-ff244282]{background:transparent;border-radius:10px;color:var(--neutral-6);cursor:pointer;font-size:14px;font-weight:450;gap:6px;height:30px;padding:4px 10px;transition:all .3s ease}.tab-button.active[data-v-ff244282]{background:var(--white);box-shadow:0 2px 8px #0000000a,0 1px 3px #00000008;box-shadow:0 0 #0000,0 0 #0000,0 1px 1px .5px #3333330a,0 3px 3px -1.5px #33333305,0 6px 6px -3px #3333330a,0 12px 12px -6px #3333330a,0 24px 24px -12px #3333330a,0 48px 48px -24px #3333330a,0 0 0 1px #3333331a,inset 0 -1px 1px -.5px #3333330f;color:var(--neutral-10);transform:translateY(-1px)}.collapse-button[data-v-ff244282],.expand-button[data-v-ff244282]{align-items:center;background:var(--neutral-2);border-radius:10px;color:var(--neutral-6);cursor:pointer;display:flex;font-size:13px;font-weight:450;height:30px;justify-content:center;letter-spacing:-.15px;transition:all .3s ease;width:30px}.collapse-button[data-v-ff244282] svg path,.expand-button[data-v-ff244282] svg path{stroke:var(--neutral-6)}.collapse-button[data-v-ff244282]:hover,.expand-button[data-v-ff244282]:hover{background:var(--neutral-2);color:var(--neutral-8)}.expand-button[data-v-ff244282]{padding:0;width:30px}.expand-button.expanded[data-v-ff244282]:hover{background:var(--neutral-5);color:var(--neutral-10)}.preview-content[data-v-ff244282]{display:flex;flex:1}.preview-wrapper[data-v-ff244282]{border-radius:0!important;flex:1;transition:all .2s ease;width:100%}.preview-wrapper-centered[data-v-ff244282]{align-items:center;display:flex;justify-content:center}.no-preview[data-v-ff244282]{text-align:center}.code-content[data-v-ff244282]{background-color:var(--neutral-2);border-radius:20px;flex:1;flex-direction:column;min-height:100%;padding:12px}.code-content[data-v-ff244282],.code-wrapper[data-v-ff244282]{display:flex;height:100%;overflow:hidden}.code-wrapper[data-v-ff244282]{background:var(--white);border-radius:12px;box-shadow:0 0 #0000,0 0 #0000,0 1px 1px .5px #2929290a,0 3px 3px -1.5px #29292905,0 6px 6px -3px #2929290a,0 12px 12px -6px #2929290a,0 24px 24px -12px #2929290a,0 48px 48px -24px #2929290a,0 0 0 1px #2929290a,inset 0 -1px 1px -.5px #3333330f;flex:1;position:relative}.line-numbers[data-v-ff244282]{border-right:1px solid var(--neutral-2);color:var(--neutral-6);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:14px;line-height:1.5;min-width:50px;padding:16px 12px;text-align:right}.line-number[data-v-ff244282]{align-items:center;display:flex;height:21px;justify-content:flex-end}.code-pre[data-v-ff244282]{background:transparent;color:var(--neutral-10);font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;font-size:14px;line-height:1.5;margin:0;padding:16px;white-space:pre-wrap;word-wrap:break-word;flex:1;overflow-x:auto}.expand-overlay[data-v-ff244282]{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(2px);background:#a1a1a14d;display:flex;justify-content:center;inset:0;padding:24px;position:fixed;z-index:1000}.expand-content[data-v-ff244282]{background:var(--white);border-radius:20px;box-shadow:0 4px 8px #2929290f,0 2px 4px #2929290a,0 1px 2px #2929290a,0 0 0 1px #2929290a,inset 0 -.5px .5px #29292914;display:flex;flex-direction:column;height:90vh;max-height:none;max-width:none;overflow:hidden;position:relative;transform-origin:var(--origin-x,50%) var(--origin-y,50%);width:90vw}.expand-tab-controls[data-v-ff244282]{align-items:center;border-bottom:1px solid var(--neutral-3);display:flex;flex-shrink:0;gap:16px;justify-content:space-between;padding:20px 24px 16px}.expand-content-area[data-v-ff244282]{display:flex;flex:1;flex-direction:column;height:100%;overflow:hidden}.expand-preview-content[data-v-ff244282]{flex:1;overflow:auto;padding:24px}.expand-preview-content[data-v-ff244282],.expand-preview-wrapper[data-v-ff244282]{align-items:center;display:flex;height:100%;justify-content:center}.expand-preview-wrapper[data-v-ff244282]{margin:0 auto;max-width:1048px;padding-bottom:80px;position:relative;transition:width .2s ease;width:100%}.expand-preview-viewport[data-v-ff244282]{background:var(--neutral-1);border:1px solid var(--neutral-3);border-radius:12px;display:grid;height:100%;overflow:hidden;padding:24px;transition:all .2s ease;width:100%;will-change:width}.expand-preview-viewport-centered[data-v-ff244282]{align-items:center;display:flex;justify-content:center}.expand-code-content[data-v-ff244282]{background-color:var(--neutral-2);flex:1;overflow:hidden;padding:12px}.expand-code-wrapper[data-v-ff244282]{background:var(--white);border-radius:12px;box-shadow:0 0 #0000,0 0 #0000,0 1px 1px .5px #2929290a,0 3px 3px -1.5px #29292905,0 6px 6px -3px #2929290a,0 12px 12px -6px #2929290a,0 24px 24px -12px #2929290a,0 48px 48px -24px #2929290a,0 0 0 1px #2929290a,inset 0 -1px 1px -.5px #3333330f;display:flex;height:100%;overflow:hidden;position:relative}.expand-code-wrapper .code-pre[data-v-ff244282]{overflow:auto}.expand-modal-enter-active[data-v-ff244282],.expand-modal-enter-active .expand-content[data-v-ff244282],.expand-modal-leave-active[data-v-ff244282],.expand-modal-leave-active .expand-content[data-v-ff244282]{transition:all .2s ease-out}.expand-modal-enter-from[data-v-ff244282],.expand-modal-leave-to[data-v-ff244282]{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);opacity:0}.expand-modal-enter-to[data-v-ff244282],.expand-modal-leave-from[data-v-ff244282]{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(2px);opacity:1}.expand-modal-enter-from .expand-content[data-v-ff244282],.expand-modal-leave-to .expand-content[data-v-ff244282]{filter:blur(4px);opacity:0;transform:scale(.98) translate(0)}.expand-modal-enter-to .expand-content[data-v-ff244282],.expand-modal-leave-from .expand-content[data-v-ff244282]{filter:none;opacity:1;transform:scale(1) translate(0)}@media (max-width:768px){.expand-overlay[data-v-ff244282]{padding:10px}.expand-content[data-v-ff244282]{border-radius:16px;height:95vh;width:95vw}.expand-tab-controls[data-v-ff244282]{padding:16px 20px 12px}.tab-controls[data-v-ff244282]{flex-wrap:wrap;gap:12px;height:auto}.device-controls[data-v-ff244282]{justify-content:space-between;order:3;width:100%}.device-buttons[data-v-ff244282]{gap:6px}.device-button[data-v-ff244282]{font-size:11px;padding:4px 6px}.action-buttons[data-v-ff244282]{gap:6px}.collapse-button[data-v-ff244282],.copy-button[data-v-ff244282],.expand-button[data-v-ff244282]{font-size:13px;padding:4px 8px}}.copy-button[data-v-ff244282]{align-items:center;background:var(--neutral-2);border-radius:10px;color:var(--neutral-6);cursor:pointer;display:flex;font-size:13px;font-weight:450;gap:6px;height:30px;letter-spacing:-.15px;padding:4px 9px;transition:all .3s ease}.copy-button[data-v-ff244282] svg path{stroke:var(--neutral-6)}.copy-button[data-v-ff244282]:hover:not(:disabled):not(.copied){background:var(--neutral-2);color:var(--neutral-8)}.copy-button.copied[data-v-ff244282]{color:var(--neutral-8)}.copy-button[data-v-ff244282]:disabled{cursor:not-allowed;opacity:.5}.content-area[data-v-ff244282]{border:1px solid var(--neutral-3);border-radius:20px;display:flex;flex-direction:column;margin:0 auto;min-height:200px;position:relative;transition:width .2s ease;width:100%}.no-preview[data-v-ff244282]{color:var(--neutral-6);height:100%}.resize-handle[data-v-ff244282]{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-content:center;opacity:0;position:absolute;right:-8px;top:0;transition:opacity .2s ease;width:16px;z-index:20}.content-area:hover .resize-handle[data-v-ff244282],.resize-handle[data-v-ff244282]:hover{opacity:1}.resize-handle.expanded[data-v-ff244282]{right:-12px;width:20px}.resize-handle-line[data-v-ff244282]{background:var(--primary-500);border-radius:2px;height:40px;position:relative;width:3px}.resize-handle-line[data-v-ff244282]:before{background:var(--white);border:2px solid var(--primary-500);border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.expand-button-content[data-v-ff244282]{align-items:center;background:var(--white);border-radius:8px;color:var(--neutral-7);cursor:pointer;display:flex;font-size:14px;font-weight:450;height:30px;justify-content:center;position:absolute;right:12px;top:12px;transition:all .3s ease;width:30px;z-index:10}.expand-button-content[data-v-ff244282] svg path{stroke:var(--neutral-6)}.expand-button-content[data-v-ff244282]:hover{border-color:var(--neutral-4);color:var(--neutral-8);transform:scale(1.1)}.expand-button-content.expanded[data-v-ff244282]{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-600)}.expand-button-content.expanded[data-v-ff244282]:hover{background:var(--primary-100);border-color:var(--primary-300)}.responsive-indicator[data-v-ff244282]{align-items:center;display:flex;height:100%}.responsive-text[data-v-ff244282]{background:var(--primary-50);border:1px solid var(--primary-200);border-radius:6px;color:var(--primary-600);font-size:12px;font-weight:500;min-width:60px;padding:4px 8px;text-align:center}.code-pre[data-v-ff244282] .shiki{background:transparent!important}.code-pre[data-v-ff244282] .line{line-height:1.5}.code-pre[data-v-ff244282] .shiki .token.keyword{color:#d73a49;font-weight:600}.code-pre[data-v-ff244282] .shiki .token.function{color:#6f42c1}.code-pre[data-v-ff244282] .shiki .token.string{color:#032f62}.code-pre[data-v-ff244282] .shiki .token.comment{color:#6a737d;font-style:italic}.code-pre[data-v-ff244282] .shiki .token.number{color:#005cc5}.code-pre[data-v-ff244282] .shiki .token.operator{color:#d73a49}.code-pre[data-v-ff244282] .shiki .token.punctuation{color:#24292e}.code-pre[data-v-ff244282] .shiki .token.variable{color:#e36209}.code-pre[data-v-ff244282] .shiki .token.class-name{color:#6f42c1}.code-pre[data-v-ff244282] .shiki .token.tag{color:#22863a}.code-pre[data-v-ff244282] .shiki .token.attr-name{color:#6f42c1}.code-pre[data-v-ff244282] .shiki .token.attr-value{color:#032f62}