.canvas-container.svelte-7tiwzr{position:relative;background:var(--color-bg-pure);border:1px solid var(--color-border-default);border-radius:var(--radius-md);overflow:hidden}canvas.svelte-7tiwzr{display:block;width:100%;cursor:crosshair}canvas.dragging.svelte-7tiwzr{cursor:grabbing}.clear-crop.svelte-7tiwzr{position:absolute;bottom:var(--space-sm);right:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);color:var(--color-fg-secondary);font-size:var(--text-caption);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard)}.clear-crop.svelte-7tiwzr:hover{background:var(--color-hover);color:var(--color-fg-primary)}.experiment-page.svelte-pvtxit{max-width:var(--width-content);margin:0 auto;padding:var(--space-xl) var(--gutter)}.experiment-header.svelte-pvtxit{margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border-default)}.header-meta.svelte-pvtxit{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);font-size:var(--text-caption);color:var(--color-fg-muted);text-transform:uppercase;letter-spacing:.05em}.separator.svelte-pvtxit{color:var(--color-fg-subtle)}.experiment-header.svelte-pvtxit h1:where(.svelte-pvtxit){font-size:var(--text-h1);font-weight:var(--font-bold);color:var(--color-fg-primary);margin-bottom:var(--space-sm);line-height:var(--leading-tight)}.subtitle.svelte-pvtxit{font-size:var(--text-body-lg);color:var(--color-fg-secondary);line-height:var(--leading-relaxed)}.ascii-art.svelte-pvtxit{font-family:var(--font-mono);font-size:.65rem;line-height:1.2;color:var(--color-fg-muted);text-align:center;overflow-x:auto;margin:var(--space-xl) 0;padding:var(--space-md);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md)}.section.svelte-pvtxit{margin-bottom:var(--space-2xl)}.section.svelte-pvtxit h2:where(.svelte-pvtxit){font-size:var(--text-h2);font-weight:var(--font-semibold);color:var(--color-fg-primary);margin-bottom:var(--space-md)}.section.svelte-pvtxit h3:where(.svelte-pvtxit){font-size:var(--text-h3);font-weight:var(--font-semibold);color:var(--color-fg-primary);margin-top:var(--space-lg);margin-bottom:var(--space-sm)}.section.svelte-pvtxit p:where(.svelte-pvtxit){font-size:var(--text-body);color:var(--color-fg-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-sm)}.section.svelte-pvtxit ul:where(.svelte-pvtxit){margin:var(--space-sm) 0;padding-left:var(--space-md)}.section.svelte-pvtxit li:where(.svelte-pvtxit){font-size:var(--text-body);color:var(--color-fg-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-xs)}.section.svelte-pvtxit em:where(.svelte-pvtxit){font-style:italic}.section.svelte-pvtxit strong:where(.svelte-pvtxit){font-weight:var(--font-semibold);color:var(--color-fg-primary)}.demo-controls.svelte-pvtxit{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg)}.upload-area.svelte-pvtxit{display:flex;gap:var(--space-sm)}.upload-button.svelte-pvtxit{display:inline-flex;align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-fg-primary);font-size:var(--text-body-sm);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard)}.upload-button.svelte-pvtxit:hover{background:var(--color-hover);border-color:var(--color-border-emphasis)}.upload-button.svelte-pvtxit input:where(.svelte-pvtxit){display:none}.demo-button.svelte-pvtxit{padding:var(--space-sm) var(--space-md);background:transparent;border:1px solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-fg-secondary);font-size:var(--text-body-sm);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard)}.demo-button.svelte-pvtxit:hover{background:var(--color-hover);border-color:var(--color-border-emphasis);color:var(--color-fg-primary)}.error-message.svelte-pvtxit{padding:var(--space-sm) var(--space-md);background:var(--color-error-muted);border:1px solid var(--color-error-border);border-radius:var(--radius-md);color:var(--color-error);font-size:var(--text-body-sm)}.preview-container.svelte-pvtxit{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-md)}.preview-column.svelte-pvtxit{display:flex;flex-direction:column}.preview-column.svelte-pvtxit h3:where(.svelte-pvtxit){font-size:var(--text-body);font-weight:var(--font-semibold);color:var(--color-fg-secondary);margin:0 0 var(--space-sm) 0}.svg-display.svelte-pvtxit{background:#fff;border:1px solid var(--color-border-default);border-radius:var(--radius-md);padding:var(--space-md);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}.svg-display.svelte-pvtxit svg{max-width:100%;max-height:100%}.preview-caption.svelte-pvtxit{font-size:var(--text-caption);color:var(--color-fg-muted);margin-top:var(--space-xs)}.loading-state.svelte-pvtxit,.empty-state.svelte-pvtxit{background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--color-fg-muted);font-size:var(--text-body-sm)}.crop-info.svelte-pvtxit{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md);font-size:var(--text-body-sm);color:var(--color-fg-secondary)}.crop-info.svelte-pvtxit code:where(.svelte-pvtxit){font-family:var(--font-mono);color:var(--color-fg-primary)}.test-render-section.svelte-pvtxit{margin-top:var(--space-lg);padding:var(--space-lg);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md);text-align:center}.test-render-button.svelte-pvtxit{display:inline-flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);background:var(--color-bg-elevated);border:2px solid var(--color-border-emphasis);border-radius:var(--radius-md);color:var(--color-fg-primary);font-size:var(--text-body);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard)}.test-render-button.svelte-pvtxit .button-icon{width:24px;height:24px;margin-bottom:var(--space-xs)}.test-render-button.svelte-pvtxit:hover{background:var(--color-hover);border-color:var(--color-fg-primary);transform:translateY(-2px)}.button-subtitle.svelte-pvtxit{font-size:var(--text-caption);font-weight:var(--font-normal);color:var(--color-fg-muted)}.test-render-description.svelte-pvtxit{margin-top:var(--space-sm);font-size:var(--text-body-sm);color:var(--color-fg-secondary)}.rendering-progress.svelte-pvtxit{margin-top:var(--space-lg);padding:var(--space-md);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md)}.progress-bar.svelte-pvtxit{width:100%;height:8px;background:var(--color-bg-pure);border-radius:var(--radius-full);overflow:hidden}.progress-fill.svelte-pvtxit{height:100%;background:var(--color-fg-primary);transition:width var(--duration-standard) var(--ease-standard)}.progress-text.svelte-pvtxit{margin-top:var(--space-sm);font-size:var(--text-body-sm);color:var(--color-fg-secondary);text-align:center}.validation-section.svelte-pvtxit{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border-default)}.validation-header.svelte-pvtxit{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.validation-header.svelte-pvtxit h2:where(.svelte-pvtxit){margin:0}.render-time.svelte-pvtxit{font-size:var(--text-body-sm);color:var(--color-fg-muted);font-family:var(--font-mono)}.demo-notice.svelte-pvtxit{display:flex;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-warning-muted);border:1px solid var(--color-warning-border);border-radius:var(--radius-md);color:var(--color-warning);font-size:var(--text-body-sm)}.demo-notice.svelte-pvtxit .notice-icon{width:20px;height:20px;flex-shrink:0;margin-top:2px}.comparison-grid.svelte-pvtxit{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-md)}.comparison-column.svelte-pvtxit{display:flex;flex-direction:column}.comparison-column.svelte-pvtxit h3:where(.svelte-pvtxit){font-size:var(--text-body);font-weight:var(--font-semibold);color:var(--color-fg-secondary);margin:0 0 var(--space-sm) 0}.comparison-image.svelte-pvtxit{width:100%;border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-bg-pure)}.validation-status.svelte-pvtxit{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);margin-top:var(--space-sm);padding:var(--space-sm);background:var(--color-success-muted);border:1px solid var(--color-success-border);border-radius:var(--radius-sm);color:var(--color-success);font-size:var(--text-body-sm)}.validation-status.svelte-pvtxit .status-icon{width:18px;height:18px;flex-shrink:0}.download-button.svelte-pvtxit{margin-top:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:transparent;border:1px solid var(--color-border-default);border-radius:var(--radius-sm);color:var(--color-fg-secondary);font-size:var(--text-body-sm);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard);width:100%}.download-button.svelte-pvtxit:hover{background:var(--color-hover);border-color:var(--color-border-emphasis);color:var(--color-fg-primary)}.render-actions.svelte-pvtxit{margin-top:var(--space-lg);text-align:center}.secondary-button.svelte-pvtxit{padding:var(--space-sm) var(--space-lg);background:transparent;border:1px solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-fg-secondary);font-size:var(--text-body-sm);cursor:pointer;transition:all var(--duration-micro) var(--ease-standard)}.secondary-button.svelte-pvtxit:hover{background:var(--color-hover);border-color:var(--color-border-emphasis);color:var(--color-fg-primary)}.pipeline-diagram.svelte-pvtxit{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin:var(--space-lg) 0;flex-wrap:wrap}.pipeline-step.svelte-pvtxit{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.step-icon.svelte-pvtxit{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-body-sm);color:var(--color-fg-primary)}.step-label.svelte-pvtxit{font-size:var(--text-caption);color:var(--color-fg-muted)}.pipeline-arrow.svelte-pvtxit{font-size:var(--text-h3);color:var(--color-fg-muted)}.experiment-footer.svelte-pvtxit{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border-default)}.tags.svelte-pvtxit{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-sm)}.tag.svelte-pvtxit{padding:var(--space-xs) var(--space-sm);font-size:var(--text-caption);color:var(--color-fg-muted);background:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:var(--radius-full)}.principles.svelte-pvtxit{font-size:var(--text-caption);color:var(--color-fg-muted);font-family:var(--font-mono)}@media(max-width:768px){.experiment-header.svelte-pvtxit h1:where(.svelte-pvtxit){font-size:var(--text-h2)}.ascii-art.svelte-pvtxit{font-size:.5rem}.preview-container.svelte-pvtxit,.comparison-grid.svelte-pvtxit{grid-template-columns:1fr}.pipeline-diagram.svelte-pvtxit{flex-direction:column}.pipeline-arrow.svelte-pvtxit{transform:rotate(90deg)}}