:root{color-scheme:light;--demo-accent:#b5440f}
:root[data-theme="dark"]{color-scheme:dark;--demo-accent:#f08a4b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--demo-accent:#f08a4b}}
body{margin:0;background:Canvas;color:CanvasText;font:17px/1.6 system-ui,sans-serif}
main{position:relative;max-width:42rem;margin:auto;padding:1px 16px 48px}
#theme{position:absolute;top:16px;right:16px;font:inherit;font-size:14px}
h1{margin-top:72px;line-height:1.2}
figure{margin:24px 0}
figcaption{margin-top:8px;font-size:15px}
figcaption h4{margin:0}
figcaption p{margin:0}
pre{overflow-x:auto;padding:12px;font-size:14px;background:color-mix(in srgb,currentColor 8%,transparent)}

/* how a theme restyles the shortcode: set the variables, here on one figure by way of its class parameter */
.demo-themed{
  --model-color:#2e7d5b;
  --model-bg:#f4efe2;
  --model-border:3px double #2e7d5b;
  --model-font:Georgia,serif;
  --model-button-bg:#2e7d5b;
  --model-button-fg:#fff;
  --model-button-border:0;
  --model-pressed-bg:#f2c14e;
  --model-pressed-fg:#222;
}