@layer components{.experiment .experiment-label{margin-top:0;margin-bottom:20px}.experiment label{font-size:14px;font-weight:500;display:block}.experiment input[type=range]{width:100%;min-height:44px;accent-color:var(--color-accent);margin-block:8px 16px;display:block}.experiment input:focus-visible,.experiment select:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}.experiment p:last-child{color:var(--color-subtle);margin-bottom:0;font-size:13px;line-height:1.65}.experiment output{margin-top:20px;font-size:18px;font-weight:500;display:block}.layout-preview{border:1px dashed #9b88b5;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:12px;max-width:100%;padding:12px;display:grid}.layout-preview>div{text-align:center;overflow-wrap:anywhere;background:#e5dcf0;padding:24px 8px;font-size:12px}.color-controls{flex-wrap:wrap;gap:24px;display:flex}.color-controls label{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.color-controls input{cursor:pointer;width:48px;height:44px}.contrast-preview{border:1px solid #d8d0e3;border-radius:8px;margin-top:20px;padding:24px;font-size:20px}.experiment select{background:#fff;border:1px solid #9b88b5;border-radius:4px;min-height:44px;margin-top:8px;padding:8px;display:block}.experiment button{color:#fff;cursor:pointer;background:#241b30;border:0;border-radius:6px;min-height:44px;padding:10px 20px;font-size:14px}.motion-track{background:#e5dcf0;border-radius:8px;height:64px;margin-block:24px;position:relative}.motion-track span{background:var(--color-accent);border-radius:50%;width:40px;height:40px;transition-property:left;display:block;position:absolute;top:12px}.pixel-meter{background:#e5dcf0;border-radius:8px;height:16px;margin-block:20px;overflow:hidden}.pixel-meter span{background:var(--color-accent);height:100%;display:block}@media (prefers-reduced-motion:reduce){.motion-track span{transition:none}}}