:root{--color-primary:#ffa000;--color-primary-light:#ffb74d;--color-primary-dark:#ff8f00;--color-success:#10b981;--color-warning:#f59e0b;--color-error:#ef4444;--color-text-primary:#2c3e50;--color-text-secondary:#34495e;--color-text-tertiary:#6b7280;--color-bg-primary:#fff;--color-bg-secondary:#fff5e6;--color-bg-tertiary:#fff8e1;--color-border:#ffe0b2;--color-border-light:#fff3e0;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--spacing-1:.25rem;--spacing-2:.5rem;--spacing-3:.75rem;--spacing-4:1rem;--spacing-6:1.5rem;--spacing-8:2rem;--font-sans:ui-sans-serif,system-ui,-apple-system,sans-serif;--font-mono:ui-monospace,"Fira Code",monospace;--header-height:4rem;--nav-height:3.5rem;--container-width:64rem}.app{background-color:var(--color-bg-tertiary,#f3f4f6);flex-direction:column;min-height:100vh;display:flex}.container{width:100%;max-width:960px;margin:0 auto;padding:0 2rem}.app-header{background-color:var(--color-bg-primary,#fff);border-bottom:1px solid var(--color-border,#e5e7eb);padding:var(--spacing-8,2rem)0}.header-content{background:var(--color-bg-primary,#fff);border-radius:var(--radius-lg,.5rem);padding:var(--spacing-6,1.5rem);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);transition:box-shadow .2s ease-in-out}.header-content:hover{box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a)}.header-info{max-width:36rem}h1{color:var(--color-text-primary,#1f2937);margin:0;font-size:2rem;font-weight:600;line-height:1.4}.header-description{color:var(--color-text-secondary,#4b5563);margin:var(--spacing-4,1rem)0;font-size:1.125rem;line-height:1.75}.version-tags{gap:var(--spacing-3,.75rem);margin-top:var(--spacing-4,1rem);display:flex}.version-tag{padding:var(--spacing-1,.25rem)var(--spacing-2,.5rem);background-color:var(--color-bg-secondary,#f3f4f6);border:1px solid var(--color-border,#e5e7eb);border-radius:var(--radius-md,.375rem);color:var(--color-text-secondary,#4b5563);font-size:.875rem;font-family:var(--font-mono,ui-monospace);display:inline-block}.app-main{padding:var(--spacing-8,2rem)0;flex:1}.showcase-grid{gap:var(--spacing-6,1.5rem);flex-direction:column;display:flex}.showcase-section{background:var(--color-bg-primary,#fff);border-radius:var(--radius-lg,.5rem);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);transition:box-shadow .2s ease-in-out}.showcase-section:hover{box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a)}.section-title{color:var(--color-text-primary,#1f2937);padding:var(--spacing-4,1rem)var(--spacing-6,1.5rem);border-bottom:1px solid var(--color-border,#e5e7eb);background:var(--color-bg-secondary,#f9fafb);border-radius:var(--radius-lg,.5rem)var(--radius-lg,.5rem)0 0;align-items:center;min-height:64px;margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;display:flex}.section-content{padding:var(--spacing-6,1.5rem)}.demo-item{margin-bottom:var(--spacing-6)}.demo-item:last-child{margin-bottom:0}.demo-item h3{color:var(--color-text-primary);margin:0 0 var(--spacing-3);font-size:1rem;font-weight:600}.demo-row{gap:var(--spacing-3,.75rem);flex-wrap:wrap;align-items:center;display:flex}.code-block{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-4);margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.5;overflow-x:auto}.code-block code{font-family:inherit}.code-block .comment{color:var(--color-text-tertiary)}.code-block .keyword{color:#f08d49}.code-block .string{color:#42b983}.code-block .property{color:var(--color-warning)}.code-block .function{color:#e06c75}.code-block .tag,.code-block .name{color:#2973b7}.code-block .attr{color:#73a7d9}@media (max-width:960px){.container{max-width:100%;padding:0 1rem}}@media (max-width:640px){.app-header{padding:var(--spacing-6,1.5rem)0}.header-content{padding:var(--spacing-4,1rem)}h1{font-size:1.5rem}.header-description{margin:var(--spacing-3,.75rem)0;font-size:1rem}.showcase-section{border-radius:var(--radius-md,.375rem)}.section-title,.section-content{padding:var(--spacing-4,1rem)}.demo-row{flex-direction:column;align-items:stretch}:deep(.button){justify-content:center;width:100%}.code-block{padding:var(--spacing-3,.75rem);font-size:.75rem}}:deep(.button){border-radius:.25rem;height:2.25rem;padding:0 1rem;font-size:.875rem;font-weight:500;transition:all .2s ease-in-out}:deep(.button--primary){background:var(--color-primary,#ffa000);border:1px solid var(--color-primary,#ffa000);color:#fff}:deep(.button--primary:hover){background:var(--color-primary-dark,#ff8f00);border-color:var(--color-primary-dark,#ff8f00)}:deep(.button--secondary){background:var(--color-bg-secondary,#f2f3f5);border:1px solid var(--color-border,#e5e6eb);color:var(--color-text-primary,#4e5969)}:deep(.button--secondary:hover){background:var(--color-bg-hover,#e5e6eb)}:deep(.button--text){color:var(--color-primary,#ffa000);background:0 0;border:none;padding:0}:deep(.button--text:hover){color:var(--color-primary-dark,#ff8f00)}:deep(.button[disabled]){background:var(--color-bg-disabled,#f2f3f5);border-color:var(--color-border,#e5e6eb);color:var(--color-text-disabled,#c9cdd4);cursor:not-allowed}:deep(.button.is-loading){pointer-events:none;position:relative}:deep(.button.is-loading .button__loading){margin-right:.5rem}:deep(.button--large){height:2.5rem;padding:0 1.25rem;font-size:1rem}:deep(.button--small){height:2rem;padding:0 .75rem;font-size:.813rem}:deep(.card){background:var(--color-bg-primary,#fff);border:1px solid var(--color-border,#e5e7eb);border-radius:var(--radius-lg,.5rem);box-shadow:var(--shadow-sm,0 1px 2px 0 #0000000d);transition:box-shadow .2s ease-in-out}:deep(.card:hover){box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a)}:deep(.card__header){padding:var(--spacing-4,1rem)var(--spacing-6,1.5rem);border-bottom:1px solid var(--color-border,#e5e7eb);background:var(--color-bg-secondary,#f9fafb);border-radius:var(--radius-lg,.5rem)var(--radius-lg,.5rem)0 0}:deep(.card__header h4){color:var(--color-text-primary,#1f2937);margin:0;font-size:1rem;font-weight:600;line-height:1.5}:deep(.card__content){padding:var(--spacing-6,1.5rem);color:var(--color-text-secondary,#4b5563);line-height:1.6}.demo-content{background-color:var(--color-bg-content);border-radius:.5rem;padding:1.5rem}.card-actions{justify-content:flex-end;gap:1rem;display:flex}