:root {
  color-scheme: light;
  font-size: 100%;
  color: var(--site-text);
  background: var(--site-background);
  --site-text: #17202a;
  --site-muted: #4a4a43;
  --site-muted-soft: #5c594e;
  --site-background: #f4f1e8;
  --site-surface: #ffffff;
  --site-panel-background: #fffdf7;
  --site-subtle-surface: #f8f6ef;
  --site-inset-surface: #f2f0e9;
  --site-hover: #e9e5da;
  --site-control-text: #3e443d;
  --site-control-border: #777263;
  --site-panel-border: #a9a38f;
  --site-divider: #d2cdbd;
  --site-focus: #9b5c00;
  --tool-accent: #075a9c;
  --tool-accent-hover: #064978;
  --tool-accent-strong: #04395f;
  --tool-accent-soft: #e8f3fb;
  --tool-accent-notice: #e4f0f8;
  --tool-accent-border: #064978;
  --tool-accent-rgb: 7 90 156;
  --tool-accent-light-rgb: 39 121 178;
  --tool-on-accent: #ffffff;
}

[data-domain="guitar"],
[data-domain="music"] {
  --tool-accent: #27644e;
  --tool-accent-hover: #194b38;
  --tool-accent-strong: #173e30;
  --tool-accent-soft: #edf5f1;
  --tool-accent-notice: #e5f2eb;
  --tool-accent-border: #244c3d;
  --tool-accent-rgb: 39 100 78;
  --tool-accent-light-rgb: 58 134 102;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

button,
select,
summary,
a {
  touch-action: manipulation;
}

a {
  color: var(--tool-accent);
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 3px;
}