/* demo.html: a clean canvas for one component, for video frames. Load after site/stage.css.
   The font is ARLing Sans from arling.sk; served elsewhere it falls back to the system font. */

@font-face {
  font-family: "ARLing Sans";
  src: url(/fonts/arling-sans.woff2) format("woff2-variations"), url(/fonts/arling-sans.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  background: #f5f2ea;
}

body {
  font: 15px/1.5 "ARLing Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mo-canvas {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f5f2ea;
}

body.noc .mo-canvas .mo-stage {
  width: min(560px, calc(100% - 40px));
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}

/* UA defaults the ARLing page styles would otherwise reset */
body.noc .mo-stage :is(button, input) { font: inherit; }
body.noc .mo-stage :is(h1, h2, h3, h4, p) { margin: 0; }

.mo-demo-error {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  margin: 0;
  color: #b3261e;
  font: 500 14px/1.5 system-ui, sans-serif;
}

/* the dark shadcn palette, for demo.html?theme=dark */
:root[data-theme="dark"],
:root[data-theme="dark"] body,
:root[data-theme="dark"] .mo-canvas { background: #0f0e0d; }
:root[data-theme="dark"] .mo-stage {
  --background: #171614;
  --foreground: #f4f1ea;
  --card: #171614;
  --card-foreground: #f4f1ea;
  --popover: #1c1b18;
  --popover-foreground: #f4f1ea;
  --primary: #f4f1ea;
  --primary-foreground: #171614;
  --secondary: #26241f;
  --secondary-foreground: #f4f1ea;
  --muted: #26241f;
  --muted-foreground: #a8a39a;
  --accent: #2c2a25;
  --accent-foreground: #f4f1ea;
  --border: #33302a;
  --input: #3b3831;
  --ring: #f2643c;
  --am-success: #4f8a49;
  --ink: #f4f1ea;
  --body: #f4f1ea;
  --line: #33302a;
  color: var(--foreground);
}
:root[data-theme="dark"] .mo-cursor path { fill: #f4f1ea; stroke: #0f0e0d; }
:root[data-theme="dark"] .mo-cursor-ring { border-color: #f4f1ea; }