.motion-performance-card-preview{color:#e6ebf5;background:linear-gradient(150deg,#161a24,#1e2433);border:1px solid #2a3142;border-radius:8px;gap:7px;padding:12px;display:grid}.motion-performance-card-row{border:1px solid;border-radius:7px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding:6px 8px;display:grid}.motion-performance-card-row code{color:#e6ebf5;font-size:10px;font-weight:800}.motion-performance-card-row b{justify-self:end;font-size:10px}.motion-performance-card-row.is-bad{background:#2a1a20;border-color:#5b2b31}.motion-performance-card-row.is-bad b{color:#fca5a5}.motion-performance-card-row.is-good{background:#142a21;border-color:#1f4a35}.motion-performance-card-row.is-good b{color:#86efac}.motion-performance-card-steps{grid-column:1/-1;gap:4px;display:flex}.motion-performance-card-steps i{color:#7d879c;border:1px dashed #3a4357;border-radius:4px;padding:1px 6px;font-size:9px;font-style:normal;font-weight:700}.motion-performance-card-steps i.is-on{color:#fde68a;background:#3a2f12;border-style:solid;border-color:#fbbf24}.motion-performance-card-verdict{color:#f1f5fb;font-size:11px;line-height:1.4}.term-interactive-demo.motion-performance-demo{color:#e6ebf5;background:#12151c;border-color:#2a3142;gap:14px}.motion-performance-demo :focus-visible{outline-offset:2px;outline:3px solid #fbbf24}.motion-performance-demo-head{gap:4px;display:grid}.motion-performance-demo-eyebrow{color:#fbbf24;letter-spacing:.04em;font-size:12px;font-weight:800}.motion-performance-demo-head p{color:#c8d1e1;margin:0;font-size:14px;line-height:1.6}.motion-performance-demo-head b{color:#fff}.motion-performance-demo-controls{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 16px;display:grid}.motion-performance-demo-load{border:0;flex-wrap:wrap;gap:6px;margin:0;padding:0;display:flex}.motion-performance-demo-load legend{color:#9aa6bd;margin-bottom:6px;padding:0;font-size:12px;font-weight:800}.motion-performance-demo-load label{color:#dbe2ef;cursor:pointer;background:#1b2030;border:1px solid #343c50;border-radius:8px;align-items:center;gap:6px;padding:6px 10px;font-size:13px;font-weight:700;display:inline-flex}.motion-performance-demo-load label.is-selected{color:#fde68a;background:#2c2614;border-color:#fbbf24}.motion-performance-demo-load input{accent-color:#fbbf24;margin:0}.motion-performance-demo-load small{color:#9aa6bd;flex-basis:100%;font-size:12px}.motion-performance-demo-actions{flex-wrap:wrap;gap:6px;display:flex}.term-interactive-demo.motion-performance-demo button{color:#e6ebf5;background:#1b2030;border-color:#3a4357}.term-interactive-demo.motion-performance-demo button:hover{color:#fde68a;border-color:#fbbf24}.term-interactive-demo.motion-performance-demo button.is-primary{color:#1a1405;background:#fbbf24;border-color:#fbbf24}.term-interactive-demo.motion-performance-demo button.is-primary:hover{color:#1a1405;background:#fcd34d}.term-interactive-demo.motion-performance-demo button:disabled{opacity:.45;cursor:not-allowed}.term-interactive-demo.motion-performance-demo .motion-performance-demo-note{color:#fde68a;grid-column:1/-1;margin:0;font-size:12px}.motion-performance-demo-lanes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;display:grid}.motion-performance-demo-lane{background:#181c27;border:1px solid #2a3142;border-radius:12px;gap:8px;padding:10px;display:grid}.motion-performance-demo-lane.is-bad{border-color:#7f2d35;box-shadow:inset 0 0 0 1px #7f2d35}.motion-performance-demo-lane.is-good{border-color:#1f6b46;box-shadow:inset 0 0 0 1px #1f6b46}.motion-performance-demo-lane-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.motion-performance-demo-lane-head b{color:#fff;font-size:14px}.term-interactive-demo.motion-performance-demo select{color:#e6ebf5;width:auto;min-height:32px;font:inherit;background:#0f121a;border:1px solid #3a4357;border-radius:7px;padding:4px 8px;font-size:13px}.motion-performance-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.motion-performance-demo-track{background:repeating-linear-gradient(90deg,#202636 0 1px,#0000 1px 32px),#0f121a;border-radius:10px;height:58px;position:relative;overflow:hidden}.motion-performance-demo-runner{position:absolute;inset:7px 64px 7px 0}.motion-performance-demo-runner i{background:linear-gradient(160deg,#60a5fa,#6366f1);border-radius:8px;width:52px;position:absolute;top:0;bottom:0;left:6px;box-shadow:0 2px 8px #0006}.motion-performance-demo-runner em{color:#fff;font-size:13px;font-style:normal;font-weight:800;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.motion-performance-demo-runner.is-width{width:64px;right:auto}.motion-performance-demo-runner.is-width i{width:auto;right:6px}.motion-performance-demo-runner.is-playing.is-left{animation:1.2s ease-in-out infinite alternate motion-performance-left}.motion-performance-demo-runner.is-playing.is-width{animation:1.2s ease-in-out infinite alternate motion-performance-width}.motion-performance-demo-runner.is-playing.is-transform{animation:1.2s ease-in-out infinite alternate motion-performance-move}.motion-performance-demo-runner.is-playing.is-opacity{animation:1.2s ease-in-out infinite alternate motion-performance-fade}@keyframes motion-performance-left{0%{left:0}to{left:calc(100% - 64px)}}@keyframes motion-performance-width{0%{width:64px}to{width:100%}}@keyframes motion-performance-move{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes motion-performance-fade{0%{opacity:1}to{opacity:.1}}.motion-performance-demo-steps{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.motion-performance-demo-steps i{color:#7d879c;border:1px dashed #3a4357;border-radius:5px;padding:2px 8px;font-size:12px;font-style:normal;font-weight:700}.motion-performance-demo-steps i.is-on{color:#fde68a;background:#3a2f12;border-style:solid;border-color:#fbbf24}.motion-performance-demo-steps small{color:#b4bfd3;flex-basis:100%;font-size:12px}.term-interactive-demo.motion-performance-demo .motion-performance-demo-verdict{color:#c8d1e1;background:#0f121a;border-radius:7px;margin:0;padding:6px 8px;font-size:13px;font-weight:700}.motion-performance-demo-lane.is-bad .motion-performance-demo-verdict{color:#fca5a5}.motion-performance-demo-lane.is-good .motion-performance-demo-verdict{color:#86efac}.motion-performance-demo-meter{background:#0f121a;border:1px solid #2a3142;border-radius:12px;gap:6px;padding:10px;display:grid}.motion-performance-demo-meter-head{flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:13px;display:flex}.motion-performance-demo-meter-head b{color:#fff}.motion-performance-demo-meter-head span{color:#fde68a;font-weight:700}.motion-performance-demo-bars{background:repeating-linear-gradient(0deg,#0000 0 15px,#1d2333 15px 16px);border-radius:6px;align-items:flex-end;gap:2px;height:64px;padding:4px;display:flex}.motion-performance-demo-bars small{color:#9aa6bd;align-self:center;font-size:12px}.motion-performance-demo-bars i{background:#4ade80;border-radius:2px 2px 0 0;flex:1;min-width:3px;min-height:3px}.motion-performance-demo-bars i.is-slow{background:#fbbf24}.motion-performance-demo-bars i.is-long{background:#f87171}.motion-performance-demo-meter-note{color:#9aa6bd;font-size:12px;line-height:1.5}.term-interactive-demo.motion-performance-demo .motion-performance-demo-status{color:#e6ebf5;background:#1b2030;border-radius:10px;padding:10px 12px}.motion-performance-recap,.motion-performance-list,.motion-performance-steps{gap:8px;margin:0;padding-left:20px;line-height:1.65;display:grid}.motion-performance-examples{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;display:grid}.motion-performance-examples-col{border:1px solid;border-radius:12px;align-content:start;gap:8px;padding:12px;display:grid}.motion-performance-examples-col>small{font-size:12px;font-weight:850}.motion-performance-examples-col.is-good{color:#173b28;background:#f2faf5;border-color:#b7dcc5}.motion-performance-examples-col.is-good>small{color:#166534}.motion-performance-examples-col.is-bad{color:#4a1717;background:#fdf3f3;border-color:#efc0c0}.motion-performance-examples-col.is-bad>small{color:#991b1b}.motion-performance-example{background:#ffffffbf;border-radius:10px;gap:5px;padding:10px;display:grid}.motion-performance-example code{overflow-wrap:anywhere;font-size:12px}.motion-performance-example p{margin:0;font-size:13px;line-height:1.55}@media (max-width:640px){.motion-performance-demo-controls{grid-template-columns:minmax(0,1fr)}}