/* /motion/ pages: the demo stage and the fonts the components draw with (Inter, OFL: fonts/OFL-Inter.txt; Noto Sans SC below) */
@font-face{font-family:"Inter-Bold";src:url(/motion/fonts/Inter-Bold.woff2) format("woff2");font-display:block}
@font-face{font-family:"Inter-SemiBold";src:url(/motion/fonts/Inter-SemiBold.woff2) format("woff2");font-display:block}
@font-face{font-family:"Inter-Medium";src:url(/motion/fonts/Inter-Medium.woff2) format("woff2");font-display:block}
@font-face{font-family:"Inter-Regular";src:url(/motion/fonts/Inter-Regular.woff2) format("woff2");font-display:block}
/* zh demos: Noto Sans SC (OFL: fonts/OFL-NotoSansSC.txt), subset by scripts/sync-motion.mjs to the characters the demos draw */
@font-face{font-family:"NotoSansSC-Bold";src:url(/motion/fonts/NotoSansSC-Bold.woff2) format("woff2");font-display:block}
@font-face{font-family:"NotoSansSC-Medium";src:url(/motion/fonts/NotoSansSC-Medium.woff2) format("woff2");font-display:block}
@font-face{font-family:"NotoSansSC-Regular";src:url(/motion/fonts/NotoSansSC-Regular.woff2) format("woff2");font-display:block}
.mv-box{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:#0b0d12;border:1px solid var(--line)}
.mv-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.mv-play{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 0;font:12px/1.4 var(--mono);color:var(--mute);letter-spacing:.04em}
.mv-play button{font:inherit;color:var(--fg);background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 12px;cursor:pointer}
.mv-fams{display:flex;flex-wrap:wrap;gap:8px 18px;font:12px/1.4 var(--mono);letter-spacing:.04em;margin:0 0 8px}
.mv-fams a{color:var(--mute);text-decoration:none}.mv-fams a:hover{color:var(--fg)}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 22px;margin:0 0 56px;padding:0;list-style:none}
.mv-card a{text-decoration:none;display:block}
.mv-card h3{font:500 17px/1.3 var(--sans);margin:12px 0 4px}
.mv-card p{margin:0;color:var(--mute);font-size:14px;line-height:1.5}
.mv-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.mv-tags li{font:11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 8px}
.mv-fam-h{font:400 clamp(30px,3.4vw,44px)/1.05 var(--serif);margin:0 0 6px;scroll-margin-top:80px}
.mv-fam-p{color:var(--mute);margin:0 0 22px;max-width:70ch}
.mv-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;margin:0 0 64px}
@media (min-width:1000px){.mv-detail{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.mv-detail h2{font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.mv-detail section{margin:0 0 28px}
.mv-detail p{margin:0;line-height:1.6}
.mv-detail ul{margin:0;padding-left:18px}.mv-detail li{margin:0 0 6px;line-height:1.5}
.mv-params{width:100%;border-collapse:collapse;font-size:14px}
.mv-params th,.mv-params td{text-align:left;vertical-align:top;padding:9px 10px 9px 0;border-top:1px solid var(--line)}
.mv-params th{font:500 12px/1.4 var(--mono);white-space:nowrap}
.mv-params td,.mv-params td code{overflow-wrap:anywhere}
@media (max-width:600px){.mv-params th{white-space:normal}}
.mv-params td code,.mv-code{font:12px/1.5 var(--mono)}
.mv-code{display:block;white-space:pre-wrap;word-break:break-word;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:14px;margin:0;overflow-x:auto}
.mv-cta{display:inline-flex;gap:10px;align-items:center;border-top:1px solid var(--fg);border-bottom:1px solid var(--line);padding:12px 0;text-decoration:none;font-size:15px}