.motion-lab{margin-top:var(--motif-space-source-700)}.motion-lab-toolbar{padding:var(--motif-space-source-500);background:var(--motif-color-text-primary);color:var(--motif-color-text-inverse)}.motion-lab-toolbar h3{font-family:var(--motif-font-family-editorial);margin:0;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:400}.motion-lab-toolbar p{max-width:620px;margin:var(--motif-space-source-200) 0 0}.motion-lab-status{min-height:1.5em;margin:var(--motif-space-source-300) 0;color:var(--guide-muted);font-size:.9rem}.motion-lab-grid{gap:var(--motif-space-source-400);grid-template-columns:1fr 1fr;display:grid}.motion-lab-card{min-width:0;padding:var(--motif-space-source-400);border:1px solid var(--guide-border-strong);background:var(--motif-color-surface-raised)}.motion-lab-card-head{justify-content:space-between;align-items:start;gap:var(--motif-space-source-400);display:flex}.motion-lab-card-head span{font-size:var(--guide-label-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:800}.motion-lab-card-head h3{font-family:var(--motif-font-family-editorial);margin:5px 0 0;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:400;line-height:1}.motion-lab-card-head button{min-height:var(--guide-control-min);padding:9px var(--motif-space-source-400);border:var(--guide-border-emphasis) solid var(--motif-color-action-primary);border-radius:var(--guide-radius-pill);color:var(--motif-color-text-primary);font:800 .85rem var(--motif-font-family-operational);cursor:pointer;background:0 0}.motion-lab-card-head button:hover{background:var(--motif-color-action-primary);color:var(--motif-color-text-inverse)}.motion-lab-mode{gap:var(--motif-space-source-100);width:fit-content;margin:var(--motif-space-source-300) 0 0;padding:var(--motif-space-source-100);border:var(--guide-border-hairline) solid var(--motif-color-border);border-radius:var(--guide-radius-pill);display:flex}.motion-lab-mode legend{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.motion-lab-mode label{cursor:pointer;min-height:36px;font-size:var(--guide-label-sm);border-radius:999px;padding:7px 12px;font-weight:800;position:relative}.motion-lab-mode label:has(input:checked){background:var(--motif-color-action-primary);color:var(--motif-color-text-inverse)}.motion-lab-mode label:has(input:disabled){cursor:not-allowed}.motion-lab-mode input{opacity:0;position:absolute;inset:0}.motion-lab-mode label:has(input:focus-visible){outline:var(--motif-border-focus-width) solid var(--motif-color-focus);outline-offset:var(--motif-border-focus-offset)}.motion-lab-system-note{margin:var(--motif-space-source-200) 0 0;font-size:var(--guide-label-sm);font-weight:700}.motion-lab-details{margin-top:var(--motif-space-source-300);border-block:var(--guide-border-hairline) solid var(--guide-border-strong)}.motion-lab-details summary{min-height:var(--guide-control-min-roomy);padding:var(--motif-space-source-300) 0;cursor:pointer;font-weight:800}.motion-lab-preview{min-height:var(--guide-preview-min);margin:var(--motif-space-source-400) 0;border:var(--guide-border-hairline) solid var(--guide-border-subtle);background:var(--motif-color-surface-ground);place-items:center;display:grid;overflow:hidden}.motion-lab-settle{justify-items:center;gap:var(--guide-inset-balanced);text-align:center;display:grid}.motion-lab-demo-action{min-height:var(--guide-control-min-roomy);padding:var(--motif-space-source-300) var(--motif-space-source-500);border-radius:var(--guide-radius-pill);background:var(--motif-color-action-primary);color:var(--motif-color-text-inverse);font:800 1rem var(--motif-font-family-operational)}.motion-lab-settle>span:last-child,.motion-lab-open span{font-size:var(--guide-body-sm)}.motion-lab-preview--settle.is-running .motion-lab-demo-action{animation:motion-lab-settle var(--motif-motion-action-press) var(--motif-motion-ease-feedback)}.motion-lab-open{width:min(84%,360px)}.motion-lab-open>strong{background:var(--motif-color-action-primary);color:var(--motif-color-text-inverse);padding:14px 16px;display:block}.motion-lab-open-panel{border:1px solid var(--guide-border-strong);background:var(--motif-color-surface-raised);border-top:0;gap:5px;padding:16px;display:grid}.motion-lab-preview--open.is-running .motion-lab-open-panel{animation:motion-lab-open var(--motif-motion-disclosure-enter) var(--motif-motion-ease-functional)}.motion-lab-arrive{grid-template-columns:repeat(3,1fr);gap:8px;width:84%;display:grid}.motion-lab-arrive span{background:var(--motif-color-source-lilac);align-items:end;min-height:110px;padding:14px;font-weight:800;display:flex}.motion-lab-preview--arrive.is-running .motion-lab-arrive span{animation:motion-lab-arrive var(--motif-motion-editorial-arrive) var(--motif-motion-ease-editorial) both}.motion-lab-preview--arrive.is-running .motion-lab-arrive span:nth-child(2){animation-delay:calc(var(--motif-motion-delay-stagger-short) / 2)}.motion-lab-preview--arrive.is-running .motion-lab-arrive span:nth-child(3){animation-delay:var(--motif-motion-delay-stagger-short)}.motion-lab-carry{isolation:isolate;background:var(--motif-color-text-primary);width:100%;min-height:230px;color:var(--motif-color-text-inverse);grid-template-columns:1fr 1fr;align-items:stretch;gap:30px;padding:30px;display:grid;position:relative}.motion-lab-carry svg{z-index:0;width:100%;height:100%;position:absolute;inset:0}.motion-lab-thread{fill:none;stroke:var(--motif-color-source-coral);stroke-width:12px;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:0}.motion-lab-chapter{z-index:1;background:color-mix(in srgb, var(--motif-color-text-primary) 88%, transparent);border:1px solid color-mix(in srgb, var(--motif-color-text-inverse) 45%, transparent);flex-direction:column;justify-content:flex-end;padding:18px;display:flex;position:relative}.motion-lab-chapter>span{letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;font-weight:800}.motion-lab-chapter strong{font-family:var(--motif-font-family-editorial);font-size:1.45rem;font-weight:400}.motion-lab-preview--carry.is-running .motion-lab-thread{animation:motion-lab-thread var(--motif-motion-chapter-crossing) var(--motif-motion-ease-signature)}.motion-lab-preview--carry.is-running .motion-lab-chapter--to{animation:motion-lab-carry var(--motif-motion-chapter-crossing) var(--motif-motion-ease-signature)}.motion-lab-guidance{border-top:1px solid var(--guide-border-subtle);margin:0}.motion-lab-guidance>div{border-bottom:1px solid var(--guide-border-subtle);grid-template-columns:100px minmax(0,1fr);gap:14px;padding:10px 0;display:grid}.motion-lab-guidance dt{font-size:.75rem;font-weight:800}.motion-lab-guidance dd{margin:0;font-size:.82rem}.motion-lab-guidance code{overflow-wrap:anywhere;font-size:.75rem;display:block}.motion-lab-rule{margin:var(--motif-space-source-400) 0 0;padding:var(--motif-space-source-400);border-left:6px solid var(--motif-color-source-coral);background:var(--motif-color-surface-raised)}@keyframes motion-lab-settle{50%{transform:translateY(var(--motif-motion-distance-press)) scale(.99)}}@keyframes motion-lab-open{0%{opacity:.35;transform:translateY(calc(var(--motif-motion-distance-functional) * -1))}to{opacity:1;transform:none}}@keyframes motion-lab-arrive{0%{opacity:0;transform:translateY(var(--motif-motion-distance-reveal))}to{opacity:1;transform:none}}@keyframes motion-lab-thread{0%{stroke-dashoffset:700px}to{stroke-dashoffset:0}}@keyframes motion-lab-carry{0%{opacity:0;transform:translateY(var(--motif-motion-distance-signature))}to{opacity:1;transform:none}}.motion-lab--reduced.is-running *{animation-duration:var(--motif-motion-reduced-instant)!important;animation-delay:0s!important;transform:none!important}.motion-lab--reduced .motion-lab-thread{stroke-dashoffset:0}@media (max-width:900px){.motion-lab-grid{grid-template-columns:1fr}}@media (max-width:520px){.motion-lab-card{padding:var(--motif-space-source-300)}.motion-lab-mode{width:100%}.motion-lab-mode label{text-align:center;flex:1}.motion-lab-preview{min-height:210px}.motion-lab-arrive{grid-template-columns:1fr}.motion-lab-arrive span{min-height:54px}.motion-lab-carry{grid-template-columns:1fr;gap:12px}.motion-lab-guidance>div{grid-template-columns:1fr;gap:4px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-lab *{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important;transform:none!important}.motion-lab-thread{stroke-dashoffset:0!important}}@media (forced-colors:active){.motion-lab-toolbar,.motion-lab-card,.motion-lab-preview,.motion-lab-carry,.motion-lab-demo-action,.motion-lab-open>strong,.motion-lab-arrive span,.motion-lab-chapter{color:canvastext;background:canvas;border-color:canvastext}.motion-lab-card-head button:hover{color:highlighttext;background:highlight}.motion-lab-mode label:has(input:checked){color:highlighttext;background:highlight}.motion-lab-thread{stroke:canvastext;stroke-dashoffset:0}.motion-lab-card-head button{color:buttontext;border-color:buttontext}.motion-lab-mode label:has(input:focus-visible){outline:2px solid highlight}.motion-lab-card-head button:focus-visible{outline:2px solid highlight}}