.design-page.svelte-gh7rrn{min-height:100vh;padding:8rem 1.5rem 4rem;background:var(--color-bg-pure)}.design-container.svelte-gh7rrn{max-width:64rem;margin:0 auto}.design-header.svelte-gh7rrn{text-align:center;margin-bottom:4rem}.header-icon.svelte-gh7rrn{display:inline-flex;align-items:center;justify-content:center;width:5rem;height:5rem;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:1rem;color:var(--color-primary);margin-bottom:1.5rem}.design-header.svelte-gh7rrn h1:where(.svelte-gh7rrn){font-size:var(--text-h1);font-weight:700;color:var(--color-fg-primary);margin:0 0 .75rem}.design-subtitle.svelte-gh7rrn{font-size:1.125rem;color:var(--color-fg-muted);max-width:32rem;margin:0 auto}.design-section.svelte-gh7rrn{margin-bottom:4rem}.section-header.svelte-gh7rrn{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--color-border-default)}.section-header.svelte-gh7rrn svg{color:var(--color-primary)}.section-header.svelte-gh7rrn h2:where(.svelte-gh7rrn){font-size:1.5rem;font-weight:600;color:var(--color-fg-primary);margin:0}.section-description.svelte-gh7rrn{color:var(--color-fg-muted);margin:0 0 1.5rem}.principles-grid.svelte-gh7rrn{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.principle-card.svelte-gh7rrn{padding:1.5rem;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:1rem}.principle-card.svelte-gh7rrn h3:where(.svelte-gh7rrn){font-size:1.125rem;font-weight:600;color:var(--color-fg-primary);margin:0 0 .5rem}.principle-card.svelte-gh7rrn p:where(.svelte-gh7rrn){font-size:.875rem;color:var(--color-fg-muted);margin:0;line-height:1.5}.colors-grid.svelte-gh7rrn{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}.color-card.svelte-gh7rrn{display:flex;gap:1rem;padding:1rem;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:.75rem}.color-swatch.svelte-gh7rrn{width:3.5rem;height:3.5rem;border-radius:.5rem;border:1px solid var(--color-border-default);flex-shrink:0}.color-info.svelte-gh7rrn{display:flex;flex-direction:column;gap:.25rem;min-width:0}.color-name.svelte-gh7rrn{font-weight:600;color:var(--color-fg-primary);font-size:.875rem}.color-value.svelte-gh7rrn{font-size:.75rem;color:var(--color-fg-muted);background:var(--color-bg-subtle);padding:.125rem .375rem;border-radius:.25rem;width:-moz-fit-content;width:fit-content}.color-usage.svelte-gh7rrn{font-size:.75rem;color:var(--color-fg-subtle)}.typography-list.svelte-gh7rrn{display:flex;flex-direction:column;gap:1rem}.type-row.svelte-gh7rrn{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:.75rem}.type-preview.svelte-gh7rrn{color:var(--color-fg-primary);line-height:1.2}.type-info.svelte-gh7rrn{display:flex;align-items:center;gap:1rem;font-size:.75rem}.type-info.svelte-gh7rrn code:where(.svelte-gh7rrn){color:var(--color-fg-muted);background:var(--color-bg-subtle);padding:.25rem .5rem;border-radius:.25rem}.type-weight.svelte-gh7rrn{color:var(--color-fg-subtle)}.type-usage.svelte-gh7rrn{color:var(--color-fg-muted)}.spacing-grid.svelte-gh7rrn{display:flex;gap:2rem;flex-wrap:wrap}.spacing-item.svelte-gh7rrn{display:flex;flex-direction:column;align-items:center;gap:.5rem}.spacing-visual.svelte-gh7rrn{background:var(--color-primary);border-radius:.25rem}.spacing-item.svelte-gh7rrn code:where(.svelte-gh7rrn){font-size:.75rem;color:var(--color-fg-secondary)}.spacing-item.svelte-gh7rrn span:where(.svelte-gh7rrn){font-size:.75rem;color:var(--color-fg-muted)}.accessibility-grid.svelte-gh7rrn{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.a11y-card.svelte-gh7rrn{padding:1.5rem;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:.75rem}.a11y-card.svelte-gh7rrn h3:where(.svelte-gh7rrn){font-size:1rem;font-weight:600;color:var(--color-fg-primary);margin:0 0 .5rem}.a11y-card.svelte-gh7rrn p:where(.svelte-gh7rrn){font-size:.875rem;color:var(--color-fg-muted);margin:0;line-height:1.5}.design-footer.svelte-gh7rrn{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--color-border-default)}.back-link.svelte-gh7rrn{font-size:var(--text-body-sm);color:var(--color-fg-muted);text-decoration:none;transition:color var(--duration-micro) var(--ease-standard)}.back-link.svelte-gh7rrn:hover{color:var(--color-primary)}.lab-section.svelte-gh7rrn{margin-bottom:4rem}.lab-container.svelte-gh7rrn{padding:2rem;background:linear-gradient(135deg,rgba(124,43,238,.03) 0%,transparent 50%);border:1px solid var(--color-border-default);border-radius:1rem}.lab-header.svelte-gh7rrn{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.header-content.svelte-gh7rrn{display:flex;flex-direction:column;gap:.25rem}.lab-title.svelte-gh7rrn{font-size:1.5rem;font-weight:600;color:var(--color-fg-primary);margin:0}.lab-description.svelte-gh7rrn{font-size:.875rem;color:var(--color-fg-muted);margin:0}.view-all.svelte-gh7rrn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:.5rem;color:var(--color-fg-secondary);text-decoration:none;font-size:.875rem;transition:all var(--duration-micro) var(--ease-standard)}.view-all.svelte-gh7rrn:hover{border-color:var(--color-primary);color:var(--color-primary);background:#7c2bee0d}.components-grid.svelte-gh7rrn{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.component-card.svelte-gh7rrn{background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:1rem;overflow:hidden;transition:all var(--duration-standard) var(--ease-standard);position:relative}.component-card.svelte-gh7rrn:hover{border-color:var(--color-border-emphasis);transform:translateY(-4px);box-shadow:0 8px 24px #7c2bee26}.card-header.svelte-gh7rrn{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border-default)}.component-name.svelte-gh7rrn{font-size:1rem;font-weight:600;color:var(--color-fg-primary);margin:0}.component-version.svelte-gh7rrn{font-size:.75rem;color:var(--color-fg-muted);background:var(--color-bg-subtle);padding:.25rem .5rem;border-radius:.375rem}.card-preview.svelte-gh7rrn{position:relative;height:200px;overflow:hidden}.preview-overlay.svelte-gh7rrn{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration-standard) var(--ease-standard)}.component-card.svelte-gh7rrn:hover .preview-overlay:where(.svelte-gh7rrn){opacity:1}.docs-button.svelte-gh7rrn{padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--duration-micro) var(--ease-standard)}.docs-button.svelte-gh7rrn:hover{background:#8b3dff;transform:scale(1.05)}.card-footer.svelte-gh7rrn{padding:1rem 1.25rem}.component-description.svelte-gh7rrn{font-size:.875rem;color:var(--color-fg-muted);margin:0;line-height:1.5}.preview-video.svelte-gh7rrn{position:relative;width:100%;height:100%}.preview-video.svelte-gh7rrn img:where(.svelte-gh7rrn){width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.video-gradient.svelte-gh7rrn{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%)}.video-controls.svelte-gh7rrn{position:absolute;bottom:0;left:0;right:0;padding:1rem;display:flex;align-items:center;gap:1rem}.play-button.svelte-gh7rrn{width:40px;height:40px;border-radius:50%;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all var(--duration-micro) var(--ease-standard);flex-shrink:0}.play-button.svelte-gh7rrn:hover{background:#fff3;border-color:#fff6;transform:scale(1.1)}.progress-bar.svelte-gh7rrn{flex:1;height:4px;background:#fff3;border-radius:2px;overflow:hidden}.progress-fill.svelte-gh7rrn{height:100%;width:35%;background:var(--color-primary);border-radius:2px;animation:svelte-gh7rrn-progress-animate 3s ease-in-out infinite}@keyframes svelte-gh7rrn-progress-animate{0%,to{width:35%}50%{width:60%}}.preview-heatmap.svelte-gh7rrn{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-bg-pure);padding:1.5rem}.heatmap-mock.svelte-gh7rrn{width:100%;max-width:300px}.heatmap-header.svelte-gh7rrn{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.heatmap-label.svelte-gh7rrn{font-size:.75rem;color:var(--color-fg-secondary);font-weight:500}.heatmap-time.svelte-gh7rrn{font-size:.75rem;color:var(--color-primary);font-weight:600}.heatmap-bars.svelte-gh7rrn{display:flex;align-items:flex-end;gap:4px;height:80px;margin-bottom:.75rem}.heatmap-bar.svelte-gh7rrn{flex:1;height:var(--height);background:var(--color-border-emphasis);border-radius:2px 2px 0 0;animation:svelte-gh7rrn-bar-grow 1s ease-out;transition:all var(--duration-micro) var(--ease-standard)}.heatmap-bar.svelte-gh7rrn:hover,.heatmap-bar.peak.svelte-gh7rrn{background:var(--color-primary)}@keyframes svelte-gh7rrn-bar-grow{0%{height:0;opacity:0}to{height:var(--height);opacity:1}}.heatmap-timeline.svelte-gh7rrn{width:100%}.timeline-track.svelte-gh7rrn{position:relative;width:100%;height:4px;background:var(--color-border-default);border-radius:2px;overflow:hidden}.timeline-progress.svelte-gh7rrn{position:absolute;left:0;top:0;height:100%;width:45%;background:var(--color-primary);border-radius:2px;animation:svelte-gh7rrn-timeline-progress 3s ease-in-out infinite}@keyframes svelte-gh7rrn-timeline-progress{0%,to{width:45%}50%{width:70%}}.timeline-cursor.svelte-gh7rrn{position:absolute;left:45%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--color-primary);border:2px solid var(--color-bg-pure);border-radius:50%;animation:svelte-gh7rrn-cursor-move 3s ease-in-out infinite;box-shadow:0 0 8px #7c2bee80}@keyframes svelte-gh7rrn-cursor-move{0%,to{left:45%}50%{left:70%}}.preview-metric.svelte-gh7rrn{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--color-bg-pure);padding:1.5rem}.metric-mock.svelte-gh7rrn{width:100%;max-width:250px}.metric-header.svelte-gh7rrn{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.metric-label.svelte-gh7rrn{font-size:.75rem;color:var(--color-fg-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.metric-status.svelte-gh7rrn{font-size:.75rem;color:var(--color-success);font-weight:600;display:flex;align-items:center;gap:.25rem}.metric-status.svelte-gh7rrn:before{content:"";width:6px;height:6px;background:var(--color-success);border-radius:50%;animation:svelte-gh7rrn-pulse 2s ease-in-out infinite}@keyframes svelte-gh7rrn-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.metric-value.svelte-gh7rrn{font-size:2.5rem;font-weight:700;color:var(--color-fg-primary);margin-bottom:.75rem;animation:svelte-gh7rrn-count-up 2s ease-out}@keyframes svelte-gh7rrn-count-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.metric-bar.svelte-gh7rrn{height:8px;background:var(--color-border-default);border-radius:4px;overflow:hidden}.metric-fill.svelte-gh7rrn{height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,#8b3dff 100%);border-radius:4px;animation:svelte-gh7rrn-fill-animate 2s ease-out}@keyframes svelte-gh7rrn-fill-animate{0%{width:0}to{width:78%}}@media(max-width:768px){.components-grid.svelte-gh7rrn{grid-template-columns:1fr}.lab-header.svelte-gh7rrn{flex-direction:column;align-items:flex-start}.principles-grid.svelte-gh7rrn,.accessibility-grid.svelte-gh7rrn{grid-template-columns:1fr}.type-row.svelte-gh7rrn{flex-direction:column;align-items:flex-start;gap:.75rem}.type-info.svelte-gh7rrn{flex-wrap:wrap}}@media(max-width:640px){.design-page.svelte-gh7rrn{padding:6rem 1rem 3rem}}