/* sl-fonts: Magistral bold and regular web sl-font declarations */
@font-face {
  font-family: "Magistral";
  src: url(fonts/magistralb-wf.woff2) format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Magistral";
  src: url(fonts/magistralr-wf.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Root variables: color palette, progress fills, vote meter tokens and control radius */
:root {
  --sl-container: 1320px;
  --sl-sidebar: 400px;
  --sl-gutter: 24px;
  --sl-content: 880px;
  --sl-space-xs: 4px;
  --sl-space-sm: 6px;
  --sl-space-md: 8px;
  --sl-space-lg: 12px;
  --sl-changelog-bg: #f9fafb;
  --sl-changelog-card: #ffffff;
  --sl-changelog-border: #e5e7eb;
  --sl-changelog-text: #374151;
  --sl-changelog-meta: #6b7280;
  --sl-changelog-code: #1f2937;
  --sl-changelog-add: #10b981;
  --sl-changelog-del: #ef4444;
  --sl-changelog-header: #f3f4f6;
  /* Canonical color roles for the lite theme */
  --sl-color-bg: #ffffff;
  --sl-color-surface: #f8f9fb;
  --sl-color-surface-alt: #f2f4f7;
  --sl-color-surface-dark: #2a303c;
  --sl-color-surface-darker: #22272f;
  --sl-color-surface-divider: #3b4049;
  --sl-color-surface-soft: #e4e9ef;
  --sl-color-border-subtle: #ebebee;
  --sl-color-border-stronger: #e7e7eb;
  --sl-color-border-muted: #d9d9dc;
  --sl-color-text: #222222;
  --sl-color-text-strong: #111827;
  --sl-color-text-heading: #223345;
  --sl-color-text-muted: #6e7c8b;
  --sl-color-text-subtle: #a5b2bf;
  --sl-color-brand: #64b1e1;
  --sl-color-brand-banner: #62b4ea;
  --sl-color-brand-link: #30a2f6;
  --sl-color-brand-strong: #207fb6;
  --sl-color-success: #5c9425;
  --sl-color-success-soft: #9fd779;
  --sl-color-warning: #f47a20;
  --sl-color-warning-soft: #ffa024;
  --sl-color-danger: #a92c2c;
  --sl-color-danger-soft: #fb7878;
  --sl-color-accent: #8c2ca9;
  --sl-shadow-soft: 0 1px 2px rgba(42, 48, 60, 0.12);
  --sl-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.2);
  --sl-shadow-strong: 0 6px 12px rgba(0, 0, 0, 0.175);
  --sl-color-border: #e8ebee;
  --sl-color-border-strong: #cad2da;
  --sl-radius-control: 4px;
  --sl-size-16: 16px;
  --sl-size-18: 18px;
  --sl-size-24: 24px;
  --sl-size-32: 32px;
  --sl-size-34: 34px;
  --sl-size-48: 48px;
  --sl-size-64: 64px;
  --sl-icon-size-xs: var(--sl-size-16);
  --sl-icon-size-sm: var(--sl-size-18);
  --sl-icon-size-md: var(--sl-size-24);
  --sl-icon-size-lg: var(--sl-size-32);
  --sl-icon-size-xl: var(--sl-size-48);
  --sl-img-placeholder-size: 64px;
  --sl-img-placeholder-icon-size: var(--sl-icon-size-xl);
  --sl-control-size: var(--sl-size-34);
  --sl-nav-control-size: var(--sl-control-size);
  --sl-login-link-color: #556779;
  --sl-login-link-hover-color: #2a303c;
  --sl-login-pill-bg: #f2f4f7;
  --sl-login-pill-radius: 15px;
  --sl-login-link-pad-x: 15px;
  --sl-login-link-pad-y: 5px;
  --sl-login-link-height: 30px;
  --sl-login-link-line-height: 20px;
  --sl-login-dropdown-width: 160px;
  --sl-login-dropdown-min-width: 180px;
  --sl-login-dropdown-offset-x: -100px;
  --sl-login-dropdown-form-left: 50%;
  --sl-login-dropdown-form-margin-left: var(--sl-login-dropdown-offset-x);
  --sl-login-dropdown-form-width: var(--sl-login-dropdown-width);
  --sl-login-dropdown-form-max-width: none;
  --sl-login-dropdown-padding: 20px;
  --sl-login-dropdown-radius: 6px;
  --sl-login-dropdown-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  --sl-login-field-width: 162px;
  --sl-login-field-height: 30px;
  --sl-login-field-pad-x: 6px;
  --sl-login-field-pad-y: 4px;
  --sl-login-submit-pad-x: 15px;
  --sl-login-submit-pad-y: 5px;
  --sl-login-submit-mr: 3px;
  --sl-login-links-gap: 8px;
  --sl-login-links-font-size: 11px;
  --sl-login-avatar-size: 34px;
  --sl-login-avatar-border-width: 6px;
  --sl-login-avatar-border-color: #f2f4f7;
  --sl-login-avatar-offset-top: -8px;
  --sl-but-neutral-text: #2a303c;
  --sl-but-neutral-start: #f8f9fb;
  --sl-but-neutral-end: #ebedf1;
  --sl-but-neutral-border-inner: rgba(247, 251, 255, 0.95);
  --sl-but-neutral-border-outer: rgba(202, 210, 218, 0.85);
  --sl-but-primary-text: #ffffff;
  --sl-but-primary-start: #78c6fb;
  --sl-but-primary-end: #6dbaf7;
  --sl-but-primary-border-inner: rgba(235, 246, 255, 0.95);
  --sl-but-primary-border-outer: rgba(109, 186, 247, 0.58);
  --sl-but-success-text: #ffffff;
  --sl-but-success-start: #9fd779;
  --sl-but-success-end: #96d26d;
  --sl-but-success-border-inner: rgba(238, 247, 228, 0.95);
  --sl-but-success-border-outer: rgba(150, 210, 109, 0.58);
  --sl-but-danger-text: #ffffff;
  --sl-but-danger-start: #fb7878;
  --sl-but-danger-end: #f76d6d;
  --sl-but-danger-border-inner: rgba(255, 233, 233, 0.95);
  --sl-but-danger-border-outer: rgba(247, 109, 109, 0.58);
  --sl-but-warning-text: #ffffff;
  --sl-but-warning-start: #ffa024;
  --sl-but-warning-end: #f18c0d;
  --sl-but-warning-border-inner: rgba(255, 242, 220, 0.95);
  --sl-but-warning-border-outer: rgba(241, 140, 13, 0.58);
  --sl-but-accent-text: #ffffff;
  --sl-but-accent-start: #b15ee5;
  --sl-but-accent-end: #8c2ca9;
  --sl-but-accent-border-inner: rgba(242, 226, 250, 0.95);
  --sl-but-accent-border-outer: rgba(140, 44, 169, 0.58);
  --sl-but-link-border-light: rgba(248, 250, 253, 0.95);
  --sl-but-link-border-dark: rgba(202, 210, 218, 0.85);
  --sl-but-link-hover-border: rgba(183, 198, 211, 0.95);
  --sl-but-link-text: #30a2f6;
  --sl-but-text-shadow-dark: 0 1px 0 rgba(0, 0, 0, 0.18);
  --sl-but-text-shadow-light: 0 1px 0 rgba(255, 255, 255, 0.5);
  --sl-but-text-shadow-neutral: 0 1px 0 rgba(255, 255, 255, 0.85);
  --sl-but-border-light: rgba(247, 251, 255, 0.94);
  --sl-but-border-dark: rgba(202, 210, 218, 0.85);
  --sl-but-shadow-control: 0 2px 4px rgba(42, 48, 60, 0.16);
  --sl-but-border-shadow: inset 0 0 0 1px var(--sl-but-border-light), 0 0 0 1px var(--sl-but-border-dark), var(--sl-but-shadow-control);
  --sl-color-on-dark: #ffffff;
  --sl-color-tone-neutral: #6b7280;
  --sl-color-tone-danger: #fd3b3b;
  --sl-color-tone-info: #1d9bf0;
  --sl-color-tone-primary: #4c75a3;
  --sl-color-tone-warning: #ffa024;
  --sl-color-tone-success: #5c9425;
  --sl-color-tone-accent: #8c2ca9;
  --sl-bg-hover-gloss: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  --sl-progress-track-border: #ccc;
  --sl-progress-track-bg: #e7e7eb;
  --sl-progress-track-radius: 3px;
  --sl-progress-track-height: 10px;
  --sl-progress-fill-height: 8px;
  --sl-progress-fill-1-base: #5c9ade;
  --sl-progress-fill-1-start: #00adee;
  --sl-progress-fill-1-end: #0078a5;
  --sl-progress-fill-2-base: #77af3f;
  --sl-progress-fill-2-start: #8fc857;
  --sl-progress-fill-2-end: #5c9425;
  --sl-progress-fill-3-base: #faa51a;
  --sl-progress-fill-3-start: #faa51a;
  --sl-progress-fill-3-end: #f47a20;
  --sl-progress-fill-4-base: #c44747;
  --sl-progress-fill-4-start: #dd5f5f;
  --sl-progress-fill-4-end: #a92c2c;
  --sl-progress-fill-5-base: #9b36b9;
  --sl-progress-fill-5-start: #bf5fdd;
  --sl-progress-fill-5-end: #8c2ca9;
}

/* Reset: zero margins, padding and borders on all HTML elements */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Base: global element styles, typography, links and form defaults */
body {
  background: #fff;
  min-width: 0;
}

body,
select,
input,
textarea,
button {
  font:
    14px/1.4 Arial,
    Tahoma,
    sans-serif;
  color: #222;
  outline: none;
}

a {
  outline: none;
  text-decoration: none;
  color: #30a2f6;
}

a:hover {
  cursor: pointer;
  text-decoration: none;
}

a img {
  border: 0 none;
}

a > img {
  vertical-align: bottom;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
  line-height: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 26px;
  margin: 30px 0 10px 0;
}

h2 {
  font-size: 24px;
  margin: 25px 0 10px;
}

h3 {
  font-size: 22px;
  margin: 14px 0 8px;
}

h4 {
  font-size: 18px;
  margin: 2px 0;
  display: inline;
}

h5 {
  font-size: 16px;
}

p,
dl,
dd,
pre,
ul,
ol,
blockquote {
  margin-bottom: 18px;
}

legend {
  color: var(--sl-color-brand-link);
  font-weight: bold;
  padding: var(--sl-space-sm);
  border: 1px solid var(--sl-color-border);
  border-radius: var(--sl-radius-control);
}

fieldset {
  padding: var(--sl-space-sm);
  margin: var(--sl-space-sm);
  border: 1px solid var(--sl-color-border);
  border-radius: var(--sl-radius-control);
}

optgroup {
  font:
    14px/1.4 Arial,
    Tahoma,
    sans-serif;
  color: #222;
  outline: none;
}

strong,
b {
  font-weight: bold;
}

em,
cite,
i {
  font-style: italic;
}

caption {
  text-align: left;
}

th,
td {
  vertical-align: middle;
}

small {
  font-size: 0.9em;
}

hr {
  margin-top: 20px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #e4e3e7;
}

ul {
  padding-left: 25px;
  list-style: disc outside;
}

ol {
  padding-left: 25px;
  list-style: decimal outside;
}

table {
  max-width: 100%;
}

input[type="radio"],
input[type="checkbox"] {
  line-height: normal;
  margin: 4px 0 0;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  width: auto;
}

input[required]:valid,
textarea[required]:valid {
  color: #008000;
}

input[required]:invalid,
textarea[required]:invalid {
  color: #ff0000;
}

input[placeholder] {
  text-overflow: ellipsis;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button[disabled],
input[disabled] {
  cursor: default;
}

blockquote {
  background: #fff;
  border-left: 1px solid #b8c3cd;
  border-right: 1px solid #b8c3cd;
  color: #798086;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  margin: 4px;
  padding: 4px;
  border-radius: 8px;
}

blockquote:before {
  color: #b8c3cd;
  content: "\201c";
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.2em;
  vertical-align: -0.4em;
}

blockquote:after {
  color: #b8c3cd;
  content: "\201d";
  font-size: 3em;
  line-height: 0.1em;
  margin-left: 0.1em;
  vertical-align: -0.4em;
}

blockquote > p:first-child {
  display: inline;
}