/* A few of Obsidian's default theme variables, light and dark, so the drawing is coloured as in a note. */
:root {
  --text-normal: #222;
  --text-muted: #6b6b6b;
  --text-faint: #8a8a8a;
  --text-on-accent: #fff;
  --text-error: #d04040;
  --background-primary: #fff;
  --background-secondary: #f6f6f6;
  --background-modifier-border: #e0e0e0;
  --background-modifier-border-focus: #bdbdbd;
  --background-modifier-border-hover: #d0d0d0;
  --background-modifier-hover: rgba(0, 0, 0, 0.075);
  --interactive-accent: #7b6cd9;
  --layer-modal: 50;
  --radius-s: 4px;
  --radius-m: 8px;
  --size-4-1: 4px;
  --size-4-2: 8px;
  --size-4-3: 12px;
  --size-4-6: 24px;
  --font-ui-small: 13px;
  --font-ui-smaller: 12px;
  --color-red: #e93147;
  --color-red-rgb: 233, 49, 71;
  --color-orange: #ec7500;
  --color-orange-rgb: 236, 117, 0;
  --color-yellow: #e0ac00;
  --color-yellow-rgb: 224, 172, 0;
  --color-green: #08b94e;
  --color-green-rgb: 8, 185, 78;
  --color-cyan: #00bfbc;
  --color-cyan-rgb: 0, 191, 188;
  --color-blue: #086ddd;
  --color-blue-rgb: 8, 109, 221;
  --color-purple: #7852ee;
  --color-purple-rgb: 120, 82, 238;
  --color-pink: #d53984;
  --color-pink-rgb: 213, 57, 132;
}
:root.dark {
  --text-normal: #dadada;
  --text-muted: #999;
  --text-faint: #777;
  --background-primary: #1e1e1e;
  --background-secondary: #262626;
  --background-modifier-border: #363636;
  --background-modifier-border-focus: #555555;
  --background-modifier-border-hover: #444;
  --background-modifier-hover: rgba(255, 255, 255, 0.075);
  --color-red: #fb464c;
  --color-red-rgb: 251, 70, 76;
  --color-green: #44cf6e;
  --color-green-rgb: 68, 207, 110;
  --color-blue: #027aff;
  --color-blue-rgb: 2, 122, 255;
  --color-purple: #a882ff;
  --color-purple-rgb: 168, 130, 255;
  --color-orange: #e9973f;
  --color-orange-rgb: 233, 151, 63;
  --color-cyan: #53dfdd;
  --color-cyan-rgb: 83, 223, 221;
  --color-pink: #fa99cd;
  --color-pink-rgb: 250, 153, 205;
  --color-yellow: #e0de71;
  --color-yellow-rgb: 224, 222, 113;
}
body {
  margin: 0;
  font:
    16px/1.5 -apple-system,
    system-ui,
    sans-serif;
  color: var(--text-normal);
  background: var(--background-primary);
}
#page {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
#note {
  flex: 1;
  min-width: 0;
  max-width: 700px;
  padding: 16px;
}
#pane {
  flex: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 16px;
  border-left: 1px solid var(--background-modifier-border);
}
/* On a phone's width the pane is a view of its own below the note, as on Obsidian's phone app. */
@media (max-width: 700px) {
  #page {
    flex-direction: column;
    align-items: stretch;
  }
  #pane {
    position: static;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--background-modifier-border);
  }
}
textarea,
select {
  color: inherit;
}
:root {
  --font-monospace: Menlo, monospace;
  --font-interface: -apple-system, system-ui, sans-serif;
  --text-faint: #999;
  --text-warning: #c87a00;
  --text-selection: rgba(120, 100, 220, 0.25);
}
button {
  font: inherit;
  color: inherit;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
}
.harness-icon {
  font-size: 18px;
  line-height: 1;
}
.harness-notice {
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
}
pre {
  background: var(--background-secondary);
  padding: 12px;
  overflow-x: auto;
  position: relative;
}