body{font-family:Arial,sans-serif}body.strategy2-ui-reduce,body.strategy3-ui-reduce{--app-preference: reduce}body.strategy2-ui-animate,body.strategy3-ui-animate{--app-preference: animate}body.strategy2-ui-system,body.strategy3-ui-system{--app-preference: system}body.strategy1-debug-ui-animate{--strategy1-anim-color-indicator: red;--strategy1-content: "UI animate"}body.strategy1-debug-ui-reduce{--strategy1-anim-color-indicator: orange;--strategy1-content: "UI reduce"}body.strategy1-debug-os-animate{--strategy1-anim-color-indicator: blue;--strategy1-content: "OS animate"}body.strategy1-debug-os-reduce{--strategy1-anim-color-indicator: green;--strategy1-content: "OS reduce"}body.strategy1-animate{--strategy1-anim-dur-long: 5s;--strategy1-anim-iteration-count-infinite: infinite}body.strategy1-reduce{--strategy1-anim-dur-long: 1ms;--strategy1-anim-iteration-count-infinite: 1}main{--strategy2-anim-color-indicator: blue;--strategy2-anim-dur-long: 5s;--strategy2-anim-iteration-count-infinite: infinite;--strategy2-content: "OS animate"}@container style(--app-preference: reduce){main{--strategy2-anim-color-indicator: orange;--strategy2-anim-dur-long: 1ms;--strategy2-anim-iteration-count-infinite: 1;--strategy2-content: "UI reduce"}}@container style(--app-preference: animate){main{--strategy2-anim-color-indicator: red;--strategy2-content: "UI animate"}}@container style(--app-preference: system){@media(prefers-reduced-motion:reduce){main{--strategy2-anim-color-indicator: green;--strategy2-anim-dur-long: 1ms;--strategy2-anim-iteration-count-infinite: 1;--strategy2-content: "OS reduce"}}}body{--strategy3-anim-color-indicator: if( style(--app-preference: reduce): orange; style(--app-preference: animate): red; style(--app-preference: system) and media(prefers-reduced-motion: reduce): green; else: blue; );--strategy3-anim-dur-long: if( style(--app-preference: reduce) or (style(--app-preference: system) and media(prefers-reduced-motion: reduce)): 1ms; else: 5s; );--strategy3-anim-iteration-count-infinite: if( style(--app-preference: reduce) or (style(--app-preference: system) and media(prefers-reduced-motion: reduce)): 1; else: infinite; );--strategy3-content: if( style(--app-preference: reduce): "UI reduce"; style(--app-preference: animate): "UI animate"; style(--app-preference: system) and media(prefers-reduced-motion: reduce): "OS reduce"; else: "OS animate"; )}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-tag,.hljs-punctuation{color:#444a}.hljs-tag .hljs-name,.hljs-tag .hljs-attr{color:#444}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta .hljs-keyword,.hljs-doctag,.hljs-name{font-weight:700}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#800}.hljs-title,.hljs-section{color:#800;font-weight:700}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-operator,.hljs-selector-pseudo{color:#ab5656}.hljs-literal{color:#695}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}