.kaleido-experiment { margin: 40px 0; padding: clamp(20px, 4vw, 44px); border: 1px solid #ddcbb7; border-radius: 24px; background: #fffdf7; }
.kaleido-experiment h2 { color: #6b4026; }
.kaleido-experiment > p { max-width: 65ch; }
.kaleido-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .65fr); gap: 32px; align-items: center; }
.kaleido-stage { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: #f7efe6; }
.kaleido-stage img, .kaleido-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kaleido-stage canvas[hidden] { display: block; visibility: hidden; }
.kaleido-controls label { display: block; font-weight: 600; margin: 24px 0 8px; }
.kaleido-controls input { width: 100%; min-height: 44px; accent-color: #6b4026; }
.kaleido-controls button { min-height: 48px; padding: 12px 22px; border: 0; border-radius: 14px; background: #6b4026; color: #fffdf7; font: inherit; cursor: pointer; }
.kaleido-controls button:disabled { opacity: .55; cursor: default; }
.kaleido-controls :focus-visible { outline: 3px solid #386f86; outline-offset: 4px; }
.kaleido-controls p { font-size: 14px; line-height: 1.6; }
.experiment-banner { padding: 16px 24px; background: #efe2d2; border-radius: 14px; margin-top: 24px; }
@media (max-width: 680px) { .kaleido-layout { grid-template-columns: 1fr; gap: 16px; } }