.motion-duration-card-preview{color:#14213d;background:linear-gradient(160deg,#f1f5fa,#e4ebf4);border:1px solid #d3dce8;border-radius:8px;align-content:center;gap:8px;padding:12px;display:grid}.motion-duration-card-ruler{gap:3px;display:grid}.motion-duration-card-track{background:#d3dce8;border-radius:99px;height:8px;display:block;position:relative;overflow:hidden}.motion-duration-card-zone{position:absolute;top:0;bottom:0}.motion-duration-card-zone.is-ok{background:#2f855a;width:56%;left:14%}.motion-duration-card-zone.is-slow{background:repeating-linear-gradient(135deg,#c53030 0 4px,#e9a3a3 4px 8px);left:80%;right:0}.motion-duration-card-ticks{height:12px;display:block;position:relative}.motion-duration-card-ticks small{color:#4a5872;white-space:nowrap;font-weight:700;position:absolute;top:0;transform:translate(-50%);font-size:9px!important}.motion-duration-card-ticks small:first-child{left:14%}.motion-duration-card-ticks small:nth-child(2){left:33%}.motion-duration-card-ticks small:nth-child(3){left:52%}.motion-duration-card-ticks small:nth-child(4){left:86%}.motion-duration-card-marks{grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.motion-duration-card-marks li{text-align:center;background:#fff;border:1px solid #c4d0e0;border-radius:6px;gap:1px;padding:4px 5px;display:grid}.motion-duration-card-marks li b{color:#1d3557;font-weight:800;font-size:11px!important}.motion-duration-card-marks li span{color:#33415c;font-weight:700;font-size:10px!important}.motion-duration-card-marks li.is-slow{background:#fff1f1;border-color:#e3a5a5}.motion-duration-card-marks li.is-slow b,.motion-duration-card-marks li.is-slow span{color:#a61b1b}.motion-duration-card-verdict{color:#14213d;background:#fff;border-left:4px solid #1d3557;border-radius:5px;margin:0;padding:6px 8px;font-weight:800;font-size:11px!important;line-height:1.4!important}.term-interactive-demo.motion-duration-demo{color:#14213d;background:linear-gradient(165deg,#f1f5fa,#e8eef6);border-color:#cfd8e3;gap:14px}.term-interactive-demo.motion-duration-demo button{color:#14213d;background:#fff;border-color:#b8c5d8}.term-interactive-demo.motion-duration-demo button:hover{color:#14213d;border-color:#1d3557}.term-interactive-demo.motion-duration-demo button[aria-pressed=true]{color:#fff;background:#1d3557;border-color:#1d3557}.term-interactive-demo.motion-duration-demo button:focus-visible{outline-offset:2px;outline:3px solid #2a6fdb}.term-interactive-demo.motion-duration-demo label{color:#22324a}.term-interactive-demo.motion-duration-demo input[type=range]{accent-color:#1d3557;background:0 0;border:0;width:100%;min-height:0;margin:0;padding:0}.term-interactive-demo.motion-duration-demo input[type=range]:focus-visible{outline-offset:3px;outline:3px solid #2a6fdb}.term-interactive-demo.motion-duration-demo input[type=checkbox],.term-interactive-demo.motion-duration-demo input[type=radio]{accent-color:#1d3557}.term-interactive-demo.motion-duration-demo input[type=checkbox]:focus-visible,.term-interactive-demo.motion-duration-demo input[type=radio]:focus-visible{outline-offset:2px;outline:3px solid #2a6fdb}.motion-duration-demo-intro{gap:5px;display:grid}.motion-duration-demo-eyebrow{color:#fff;background:#1d3557;border-radius:999px;width:fit-content;padding:3px 9px;font-size:11px;font-weight:800}.motion-duration-demo-intro p{color:#33415c;margin:0;font-size:13px;line-height:1.6}.motion-duration-demo-intro b{color:#14213d}.motion-duration-demo-controls{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;gap:12px;display:grid}.motion-duration-demo-slider{background:#fff;border:1px solid #cfd8e3;border-radius:9px;gap:6px;min-width:0;padding:10px 12px;display:grid}.motion-duration-demo-slider>label{justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;display:flex}.motion-duration-demo-slider output{color:#1d3557;font-variant-numeric:tabular-nums;font-size:14px;font-weight:800}.motion-duration-demo-scale{border-top:1px solid #d9e1ec;height:64px;margin:2px 10px 0;position:relative}.motion-duration-demo-band{color:#fff;white-space:nowrap;border-radius:3px;height:12px;padding:0 3px;font-size:9px;font-weight:800;line-height:12px;position:absolute;overflow:hidden}.motion-duration-demo-band.is-button{background:#2f855a;top:5px}.motion-duration-demo-band.is-badge{background:#2b6cb0;top:20px}.motion-duration-demo-band.is-drawer{background:#6b46c1;top:35px}.motion-duration-demo-wait{color:#a61b1b;text-align:right;background:repeating-linear-gradient(135deg,#c5303014 0 6px,#c5303029 6px 12px);border-left:2px dashed #c53030;padding:4px 6px;font-size:10px;font-weight:800;position:absolute;top:0;bottom:14px;right:0}.motion-duration-demo-needle{background:#14213d;width:2px;margin-left:-1px;font-style:normal;position:absolute;top:0;bottom:0}.motion-duration-demo-needle em{color:#fff;white-space:nowrap;background:#14213d;border-radius:3px;padding:0 4px;font-size:9px;font-style:normal;font-weight:800;line-height:13px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.motion-duration-demo-needle.is-button em{background:#2f855a}.motion-duration-demo-needle.is-badge em{background:#2b6cb0;bottom:12px}.motion-duration-demo-needle.is-drawer em{background:#6b46c1;bottom:24px}.motion-duration-demo-actions{flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0;display:flex}.motion-duration-demo-strategy{background:#fff;border:1px solid #cfd8e3;border-radius:8px;gap:4px;margin:0;padding:6px 10px 8px;display:grid}.motion-duration-demo-strategy legend{color:#4a5872;padding:0 4px;font-size:11px;font-weight:800}.motion-duration-demo-strategy label,.motion-duration-demo-reduced{cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.motion-duration-demo-system{color:#2f855a;font-size:11px;font-weight:700}.motion-duration-shop{background:#fff;border:1px solid #b8c5d8;border-radius:12px;gap:0;min-height:268px;display:grid;position:relative;overflow:hidden;box-shadow:0 6px 18px #14213d14}.motion-duration-shop-bar{color:#fff;background:#1d3557;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;display:flex}.motion-duration-shop-logo{letter-spacing:.04em;font-size:14px;font-weight:900}.motion-duration-shop-cart{align-items:center;gap:6px;font-size:13px;font-weight:700;display:inline-flex}.motion-duration-shop-badge{color:#fff;font-variant-numeric:tabular-nums;will-change:transform;background:#d62839;border-radius:99px;place-items:center;min-width:22px;height:22px;padding:0 6px;font-size:12px;font-weight:900;display:inline-grid}.motion-duration-shop-tagline{justify-content:flex-end;padding:6px 12px 0;display:flex}.motion-duration-shop-body{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:10px 14px 14px;display:grid}.motion-duration-shop-product{align-items:flex-start;gap:12px;min-width:0;display:flex}.motion-duration-shop-photo{background:linear-gradient(160deg,#f3ede2,#e5dccb);border-radius:9px;flex:0 0 76px;place-items:center;height:92px;display:grid}.motion-duration-shop-photo i{background:#faf6ee;border:3px solid #b9a988;border-top-width:10px;border-radius:4px 4px 8px 8px;width:40px;height:44px}.motion-duration-shop-info{justify-items:start;gap:6px;min-width:0;display:grid}.motion-duration-shop-info>b{color:#14213d;font-size:14px}.motion-duration-shop-info>span{color:#4a5872;font-size:12px}.term-interactive-demo.motion-duration-demo .motion-duration-shop-add{color:#fff;cursor:pointer;will-change:transform;background:#1d3557;border:0;border-radius:8px;min-height:40px;padding:8px 16px;font-size:14px;font-weight:800}.term-interactive-demo.motion-duration-demo .motion-duration-shop-add:hover{color:#fff;background:#14284a}.term-interactive-demo.motion-duration-demo .motion-duration-shop-add:active{background:#0f1f3a}.motion-duration-shop-slot{color:#4a5872;border:1px dashed #b8c5d8;border-radius:8px;align-content:start;gap:6px;min-height:172px;padding:9px 10px;font-size:12px;font-weight:700;display:grid;position:relative;overflow:hidden}.motion-duration-shop-lag{color:#33415c;background:#f4f7fb;border:1px solid #d3dce8;border-radius:8px;flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:6px 14px;padding:8px 10px;font-size:12px;display:flex}.motion-duration-shop-lag b{color:#14213d;font-variant-numeric:tabular-nums;font-size:14px}.motion-duration-shop-lag strong{color:#33415c;margin-left:auto;font-size:12px}.motion-duration-shop-lag.is-lagging{background:#fff1f1;border-color:#e3a5a5}.motion-duration-shop-lag.is-lagging strong{color:#a61b1b}.motion-duration-shop-lag.is-synced{background:#effaf3;border-color:#a8d5ba}.motion-duration-shop-lag.is-synced strong{color:#1f6b43}.motion-duration-shop.is-lagging .motion-duration-shop-badge{box-shadow:0 0 0 3px #d6283947}.motion-duration-shop-drawer{z-index:2;color:#fff;visibility:hidden;background:#14213d;border-radius:8px;align-content:start;gap:7px;padding:11px 12px;display:grid;position:absolute;inset:0;transform:translate(calc(100% + 16px));box-shadow:-10px 0 24px #14213d40}.motion-duration-shop-drawer.is-open{visibility:visible;transform:translate(0)}.motion-duration-shop-drawer>b{color:#8ff0b5;font-size:14px}.motion-duration-shop-drawer>span{color:#e6ecf5;font-variant-numeric:tabular-nums;font-size:13px}.term-interactive-demo.motion-duration-demo .motion-duration-shop-close{color:#fff;background:0 0;border-color:#8fa3c4;justify-self:start}.term-interactive-demo.motion-duration-demo .motion-duration-shop-close:hover{color:#fff;background:#ffffff1a;border-color:#fff}.term-interactive-demo.motion-duration-demo .motion-duration-shop-close:focus-visible{outline-color:#8ff0b5}.motion-duration-tag{border:1px solid;border-radius:7px;gap:1px;padding:4px 8px;font-size:11px;line-height:1.35;display:inline-grid}.motion-duration-tag b{font-size:11px;font-weight:800}.motion-duration-tag>span{font-size:12px;font-weight:900}.motion-duration-tag>span:before{margin-right:4px}.motion-duration-tag small{opacity:.85;font-size:10px;font-weight:600}.motion-duration-tag.is-ok{color:#1f6b43;background:#e9f8ef;border-color:#8fd1a8}.motion-duration-tag.is-ok>span:before{content:"✓"}.motion-duration-tag.is-fast,.motion-duration-tag.is-none{color:#5531a8;background:#f2eefd;border-color:#c3b4ec}.motion-duration-tag.is-fast>span:before,.motion-duration-tag.is-none>span:before{content:"»"}.motion-duration-tag.is-slow{color:#a61b1b;background:#fff0f0;border-color:#e9a3a3}.motion-duration-tag.is-slow>span:before{content:"◷"}.motion-duration-tag.is-reduced{color:#22324a;background:#f1f5fa;border-color:#b8c5d8}.motion-duration-tag.is-reduced>span:before{content:"■"}.term-interactive-demo.motion-duration-demo .motion-duration-demo-status{color:#22324a;background:#fff;border-left:4px solid #1d3557;border-radius:0 8px 8px 0;margin:0;padding:10px 12px;font-size:13px;line-height:1.6}.motion-duration-recap{gap:8px;margin:0;padding:0;list-style:none;display:grid}.motion-duration-recap li{color:#33415c;background:#f7f9fc;border:1px solid #d3dce8;border-left:4px solid #1d3557;border-radius:7px;padding:9px 12px 9px 14px;font-size:13px;line-height:1.65}.motion-duration-recap li b{color:#14213d}.motion-duration-when,.motion-duration-examples{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;display:grid}.motion-duration-when article,.motion-duration-examples article{background:#f2fbf5;border:1px solid #a8d5ba;border-radius:8px;align-content:start;gap:6px;padding:11px 12px;display:grid}.motion-duration-when article.is-bad,.motion-duration-examples article.is-bad{background:#fff6f6;border-color:#ecc2c2}.motion-duration-when small,.motion-duration-examples small{color:#1f6b43;font-size:11px;font-weight:800}.motion-duration-when .is-bad small,.motion-duration-examples .is-bad small{color:#a61b1b}.motion-duration-when ul{color:#33415c;gap:4px;margin:0;padding-left:18px;font-size:13px;line-height:1.55;display:grid}.motion-duration-examples b{color:#14213d;font-size:14px}.motion-duration-examples code{color:#1d3557;font-family:var(--font-geist-mono), ui-monospace, monospace;font-size:12px}.motion-duration-examples p{color:#33415c;margin:0;font-size:13px;line-height:1.6}.motion-duration-table{border-collapse:collapse;width:100%;font-size:13px}.motion-duration-table th,.motion-duration-table td{color:#33415c;text-align:left;vertical-align:top;border-bottom:1px solid #d9e1ec;padding:8px 10px;line-height:1.5}.motion-duration-table thead th{color:#4a5872;font-size:12px}.motion-duration-table tbody th{color:#14213d;font-weight:800}.motion-duration-table td:nth-child(2){color:#1d3557;white-space:nowrap;font-weight:800}.motion-duration-steps{color:#33415c;gap:8px;margin:14px 0 0;padding-left:20px;font-size:13px;line-height:1.65;display:grid}.motion-duration-steps b{color:#14213d}.motion-duration-steps code{color:#1d3557;font-family:var(--font-geist-mono), ui-monospace, monospace;font-size:12px}@media (prefers-reduced-motion:reduce){.motion-duration-shop-drawer{transition-duration:0s!important}}@media (max-width:560px){.motion-duration-shop-lag strong{width:100%;margin-left:0}.motion-duration-table td:nth-child(2){white-space:normal}}