.motion-gallery{gap:var(--space-4);display:grid}.motion-demo-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.motion-recipe{flex-direction:column;min-inline-size:0;display:flex}.motion-recipe .panel-heading{min-block-size:92px}.recipe-footer{justify-content:space-between;align-items:center;gap:var(--space-2);min-block-size:48px;padding:var(--space-3) var(--space-5);border-block-start:1px solid var(--color-line);background:var(--color-canvas);color:var(--color-ink-secondary);flex-wrap:wrap;margin-block-start:auto;font-size:10px;display:flex}.recipe-footer code{font-size:10px}.recipe-replay{align-items:center;gap:var(--space-2);min-block-size:28px;padding:var(--space-1) 0;color:var(--color-ink);text-underline-offset:3px;font-size:11px;text-decoration:underline;display:inline-flex}.surface-stage{min-block-size:186px;margin:0 var(--space-5) var(--space-5);padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-control);background:var(--color-canvas);justify-content:end;align-items:start;display:flex;position:relative}.motion-surface{align-items:start;gap:var(--space-3);max-inline-size:calc(100% - 32px);padding:var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:var(--shadow-raised);display:flex;position:absolute;inset-block-start:72px;inset-inline-end:var(--space-4)}.motion-surface strong{font-size:var(--text-xs);font-weight:600}.motion-surface p{color:var(--color-ink-secondary);margin-block-start:var(--space-1);font-size:11px}.surface-indicator{background:var(--color-success);border-radius:50%;flex:none;block-size:10px;inline-size:10px;margin-block-start:5px}.surface-placeholder{color:var(--color-ink-secondary);font-size:11px;position:absolute;inset-block-end:var(--space-6);inset-inline-start:var(--space-4)}.motion-row-list{gap:var(--space-2);margin:var(--space-2) var(--space-5) var(--space-5);padding:0;list-style:none;display:grid}.motion-row-list li{align-items:center;gap:var(--space-3);min-block-size:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-control);font-size:var(--text-xs);display:flex}.row-order{color:var(--color-ink-secondary);font-family:var(--font-mono);font-size:10px}.motion-row-badge{padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--color-success-subtle);color:var(--color-success);margin-inline-start:auto;font-size:10px}.press-stage{justify-content:center;align-items:center;min-block-size:136px;display:flex}.save-stage{justify-content:center;align-items:center;gap:var(--space-4);min-block-size:136px;padding:var(--space-5);flex-wrap:wrap;display:flex}.save-status{inline-size:100%;color:var(--color-ink-secondary);text-align:center;font-size:11px}.knob-stage{padding:var(--space-8) var(--space-6) var(--space-5)}.knob-control{align-items:center;min-block-size:44px;display:flex;position:relative}.knob-control:has(input:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset);border-radius:var(--radius-control)}.knob-track{border-radius:var(--radius-pill);background:var(--color-neutral-200);block-size:28px;inline-size:100%}.motion-knob{border:3px solid var(--color-surface);background:var(--color-action);block-size:28px;inline-size:28px;box-shadow:var(--shadow-raised);border-radius:50%;margin-inline:auto;display:block;position:relative}.knob-control input{cursor:ew-resize;opacity:0;touch-action:pan-y;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.knob-labels{color:var(--color-ink-secondary);font-family:var(--font-mono);justify-content:space-between;margin-block-start:var(--space-3);font-size:10px;display:flex}.shared-stage{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-6) var(--space-3);display:flex}.shared-slot{border:1px dashed var(--color-control);border-radius:var(--radius-panel);background:var(--color-canvas);flex:none;place-items:center;block-size:64px;inline-size:72px;display:grid}.shared-object{border:1px solid var(--color-ink);border-radius:var(--radius-control);background:var(--color-action);block-size:40px;inline-size:40px;color:var(--color-on-action);font-size:var(--text-md);place-items:center;font-weight:600;display:grid}.shared-route{color:var(--color-ink-secondary)}.shared-caption{justify-content:space-between;align-items:center;gap:var(--space-3);padding:0 var(--space-5) var(--space-4);color:var(--color-ink-secondary);font-size:11px;display:flex}.mask-stage{min-block-size:116px;margin:var(--space-2) var(--space-5) var(--space-5);border:1px solid var(--color-line);border-radius:var(--radius-control);position:relative;overflow:clip}.mask-base,.mask-overlay{justify-content:center;gap:var(--space-3);padding:var(--space-5);background:var(--color-canvas);flex-direction:column;display:flex}.mask-base{min-block-size:116px}.mask-overlay{position:absolute;inset:0}.mask-content{background:var(--color-inverse)}.mask-color{background:var(--color-info-subtle)}.mask-line{border-radius:var(--radius-pill);background:var(--color-neutral-300);block-size:8px;inline-size:75%}.mask-line.short{inline-size:40%}.mask-content .mask-line{background:var(--color-neutral-600)}.mask-color .mask-line{background:var(--color-info)}@media (width<70rem){.motion-demo-grid{grid-template-columns:minmax(0,1fr)}}@media (forced-colors:active){.shared-object,.motion-knob,.knob-track,.motion-row-badge{border:1px solid canvastext}}.icon-grid[data-astro-cid-jyxthyj4]{gap:var(--space-3);padding:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(96px,1fr));margin:0;list-style:none;display:grid}.icon-grid[data-astro-cid-jyxthyj4] li[data-astro-cid-jyxthyj4]{justify-content:center;align-items:center;gap:var(--space-3);min-block-size:96px;padding:var(--space-3) var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-control);background:var(--color-canvas);text-align:center;flex-direction:column;display:flex}.icon-grid[data-astro-cid-jyxthyj4] code[data-astro-cid-jyxthyj4]{color:var(--color-ink-secondary);font-size:10px}.icon-size-examples[data-astro-cid-jyxthyj4]{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-5);border-block-start:1px solid var(--color-line);flex-wrap:wrap;display:flex}.icon-size-row[data-astro-cid-jyxthyj4]{align-items:end;gap:var(--space-5);flex-wrap:wrap;display:flex}.icon-size-row[data-astro-cid-jyxthyj4]>div[data-astro-cid-jyxthyj4]{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.icon-size-row[data-astro-cid-jyxthyj4] span[data-astro-cid-jyxthyj4]{color:var(--color-ink-secondary);font-family:var(--font-mono);font-size:10px}.icon-accessibility-example[data-astro-cid-jyxthyj4]{align-items:center;gap:var(--space-2);color:var(--color-success);font-size:var(--text-xs);display:flex}.icon-code[data-astro-cid-jyxthyj4]{border-block-start:1px solid var(--color-line)}.icon-source-link[data-astro-cid-jyxthyj4]{align-items:center;gap:var(--space-1);text-underline-offset:3px;text-decoration:underline;display:inline-flex}