body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc;color:#1a202c}*{box-sizing:border-box}.demo-container{max-width:1200px;margin:0 auto;padding:2rem}.demo-header{text-align:center;margin-bottom:3rem}.logo-container{display:flex;justify-content:center;margin-bottom:1.5rem}.demo-logo{width:240px;height:60px;transition:transform .3s ease}.demo-logo:hover{transform:scale(1.05)}.demo-header h1{font-size:2.5rem;margin-bottom:1rem;color:#1a202c}.demo-header p{font-size:1.2rem;color:#4a5568;margin-bottom:2rem}.demo-section{margin-bottom:4rem}.demo-section h2{font-size:2rem;margin-bottom:1.5rem;color:#2d3748}.demo-section p{font-size:1.1rem;color:#4a5568;margin-bottom:2rem;line-height:1.6}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:2rem;margin-bottom:2rem}.theme-toggle{margin-bottom:2rem;text-align:center}.theme-toggle button{background:#4299e1;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .2s}.theme-toggle button:hover{background:#3182ce}.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.feature-item{background:white;padding:1.5rem;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.feature-item h3{color:#2d3748;margin-bottom:.5rem}.feature-item p{color:#4a5568;margin:0}.dark-theme{background-color:#1a202c;color:#e2e8f0}.dark-theme .demo-header h1{color:#e2e8f0}.dark-theme .demo-logo{filter:drop-shadow(0 0 4px rgba(255,255,255,.2))}.dark-theme .demo-header p{color:#a0aec0}.dark-theme .demo-section h2{color:#e2e8f0}.dark-theme .demo-section p{color:#a0aec0}.dark-theme .feature-item{background:#2d3748;border-color:#4a5568}.dark-theme .feature-item h3{color:#e2e8f0}.dark-theme .feature-item p{color:#a0aec0}.language-showcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.controls{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;align-items:center}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{font-size:.875rem;font-weight:500;color:#4a5568}.dark-theme .control-group label{color:#a0aec0}.control-group input,.control-group select,.control-group button{padding:.5rem;border:1px solid #d1d5db;border-radius:4px;font-size:.875rem}.control-group input:focus,.control-group select:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.control-group button{background:#4299e1;color:#fff;border:none;cursor:pointer;transition:background-color .2s}.control-group button:hover{background:#3182ce}.control-group button:active{transform:translateY(1px)}@media (max-width: 768px){.demo-container{padding:1rem}.demo-header h1{font-size:2rem}.demo-grid,.language-showcase{grid-template-columns:1fr}.controls{flex-direction:column;align-items:stretch}}:root{--theme-color-background: var(--theme-color-background, #ffffff);--theme-color-background-secondary: var(--theme-color-background-secondary, #f8fafc);--theme-color-background-tertiary: var(--theme-color-background-tertiary, #f1f5f9);--theme-color-text: var(--theme-color-text, #0f172a);--theme-color-text-secondary: var(--theme-color-text-secondary, #475569);--theme-color-text-muted: var(--theme-color-text-muted, #64748b);--theme-color-border: var(--theme-color-border, #e2e8f0);--theme-color-border-light: var(--theme-color-border-light, #f1f5f9);--theme-color-border-hover: var(--theme-color-border-hover, #cbd5e1);--theme-color-primary: var(--theme-color-primary, #3b82f6);--theme-color-primary-hover: var(--theme-color-primary-hover, #2563eb);--theme-color-primary-active: var(--theme-color-primary-active, #1d4ed8);--theme-color-hover: var(--theme-color-hover, #f8fafc);--theme-color-active: var(--theme-color-active, #f1f5f9);--theme-color-focus: var(--theme-color-focus, rgba(59, 130, 246, .1));--theme-spacing-xs: var(--theme-spacing-xs, .25rem);--theme-spacing-sm: var(--theme-spacing-sm, .5rem);--theme-spacing-md: var(--theme-spacing-md, 1rem);--theme-spacing-lg: var(--theme-spacing-lg, 1.5rem);--theme-spacing-xl: var(--theme-spacing-xl, 2rem);--theme-spacing-2xl: var(--theme-spacing-2xl, 3rem);--theme-spacing-3xl: var(--theme-spacing-3xl, 4rem);--theme-spacing-4xl: var(--theme-spacing-4xl, 6rem);--theme-radius-none: var(--theme-radius-none, 0);--theme-radius-sm: var(--theme-radius-sm, .25rem);--theme-radius-md: var(--theme-radius-md, .375rem);--theme-radius-lg: var(--theme-radius-lg, .5rem);--theme-radius-xl: var(--theme-radius-xl, .75rem);--theme-radius-2xl: var(--theme-radius-2xl, 1rem);--theme-radius-full: var(--theme-radius-full, 9999px);--theme-font-family-sans: var(--theme-font-family-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);--theme-font-family-serif: var(--theme-font-family-serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif);--theme-font-family-mono: var(--theme-font-family-mono, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);--theme-font-size-xs: var(--theme-font-size-xs, .75rem);--theme-font-size-sm: var(--theme-font-size-sm, .875rem);--theme-font-size-base: var(--theme-font-size-base, 1rem);--theme-font-size-lg: var(--theme-font-size-lg, 1.125rem);--theme-font-size-xl: var(--theme-font-size-xl, 1.25rem);--theme-font-size-2xl: var(--theme-font-size-2xl, 1.5rem);--theme-font-size-3xl: var(--theme-font-size-3xl, 1.875rem);--theme-font-size-4xl: var(--theme-font-size-4xl, 2.25rem);--theme-font-size-5xl: var(--theme-font-size-5xl, 3rem);--theme-transition-fast: var(--theme-transition-fast, .15s ease);--theme-transition-normal: var(--theme-transition-normal, .25s ease);--theme-transition-slow: var(--theme-transition-slow, .35s ease);--theme-transition-bounce: var(--theme-transition-bounce, .25s cubic-bezier(.68, -.55, .265, 1.55));--theme-z-index-dropdown: var(--theme-z-index-dropdown, 1000);--theme-z-index-modal: var(--theme-z-index-modal, 1050);--theme-z-index-tooltip: var(--theme-z-index-tooltip, 1100);--theme-z-index-overlay: var(--theme-z-index-overlay, 1200)}.theme-base{font-family:var(--theme-font-family-sans);font-size:var(--theme-font-size-base);color:var(--theme-color-text);background-color:var(--theme-color-background);transition:color var(--theme-transition-normal),background-color var(--theme-transition-normal)}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:var(--theme-spacing-sm) var(--theme-spacing-md);border:1px solid var(--theme-color-border);border-radius:var(--theme-radius-md);background-color:var(--theme-color-background);color:var(--theme-color-text);cursor:pointer;transition:all var(--theme-transition-normal);font-size:var(--theme-font-size-sm);font-weight:500}.theme-toggle:hover{background-color:var(--theme-color-hover);border-color:var(--theme-color-border-hover)}.theme-toggle:focus{outline:none;background-color:var(--theme-color-hover);border-color:var(--theme-color-primary);box-shadow:0 0 0 3px var(--theme-color-focus)}.theme-selector{padding:var(--theme-spacing-sm) var(--theme-spacing-md);border:1px solid var(--theme-color-border);border-radius:var(--theme-radius-md);background-color:var(--theme-color-background);color:var(--theme-color-text);font-size:var(--theme-font-size-sm);transition:all var(--theme-transition-normal)}.theme-selector:focus{outline:none;border-color:var(--theme-color-primary);box-shadow:0 0 0 3px var(--theme-color-focus)}.theme-bg-primary{background-color:var(--theme-color-background)}.theme-bg-secondary{background-color:var(--theme-color-background-secondary)}.theme-text-primary{color:var(--theme-color-text)}.theme-text-secondary{color:var(--theme-color-text-secondary)}.theme-text-muted{color:var(--theme-color-text-muted)}.theme-border{border:1px solid var(--theme-color-border)}.theme-rounded{border-radius:var(--theme-radius-md)}.theme-shadow{box-shadow:var(--theme-color-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1))}body.theme-dark{color-scheme:dark}body.theme-light{color-scheme:light}*{transition:background-color var(--theme-transition-normal),color var(--theme-transition-normal),border-color var(--theme-transition-normal)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}