@font-face { font-family: "ABC Social"; src: url("/assets/fonts/socialRegular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ABC Social"; src: url("/assets/fonts/socialMedium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ABC Social Mono"; src: url("/assets/fonts/socialMonoRegular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ABC Social Mono"; src: url("/assets/fonts/socialMonoMedium.otf") format("opentype"); font-weight: 500; font-display: swap; }

/* Copied from appearance.json; web pages follow the system color scheme. */
:root {
  color-scheme: light;
  --background: #F9F9F6;
  --background-secondary: #F5F5F0;
  --background-tertiary: #EFEFE9;
  --text: #222222;
  --weak: #BBBBBB;
  --secondary: #666666;
  --highlight: #B8D4FF;
  --selection: #C4DDFF;
  --syntaxProperty: #245DA8;
  --syntaxString: #447230;
  --syntaxNumber: #945522;
  --syntaxAtom: #7945A0;
  --uiFontFamily: "ABC Social", sans-serif;
  --fontFamily: "ABC Social Mono", monospace;
  --fontSize: 14px;
  --lineHeight: 1.45;
  --highlightComment: #F3D49B;
  --highlightOrange: #F3CCA5;
  --highlightRed: #F3B8B8;
  --highlightBlue: #B8D4F3;
  --highlightYellow: #F3E6A5;
  --highlightGreen: #BCDDBB;
  --highlightPurple: #D5C1ED;
  --highlightPink: #EFC2DA;
  --highlightGrey: #D0D3D8;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #222222;
    --background-secondary: #2C2C2C;
    --background-tertiary: #444444;
    --text: #FEFEFE;
    --weak: #555555;
    --secondary: #AAAAAA;
    --highlight: #245DA8;
    --selection: #285B91;
    --syntaxProperty: #82AAFF;
    --syntaxString: #A8C98A;
    --syntaxNumber: #DBA776;
    --syntaxAtom: #C792EA;
  }
}
* { box-sizing: border-box; }
body { font: var(--fontSize)/var(--lineHeight) var(--uiFontFamily); max-width: 850px; margin: 48px auto; padding: 0 24px; color: var(--text); background: var(--background); }
h1 { font-size: 28px; font-weight: 500; }
h2 { font-size: 20px; font-weight: 500; }
h3 { font-size: 16px; font-weight: 500; }
section { background: var(--background-secondary); padding: 22px; margin: 18px 0; border: 1px solid var(--weak); border-radius: 8px; }
p, small { color: var(--secondary); }
input, select, textarea, button, .action { font: inherit; color: var(--text); background: var(--background); border: 1px solid var(--weak); border-radius: 3px; padding: 8px; margin: 4px; max-width: 100%; }
input:not([type=checkbox]), textarea { width: min(360px, 100%); }
button, .action { cursor: pointer; }
button:hover, .action:hover { background: color-mix(in srgb, var(--text) 5%, var(--background)); }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid var(--secondary); outline-offset: 2px; }
label { display: block; margin: 12px 0; }
label input, label select, label textarea { display: block; margin: 6px 0 0; }
li { margin: 8px 0; }
a { color: var(--text); text-underline-offset: 3px; }
.action { display: inline-block; padding: 8px 12px; text-decoration: none; }
pre, code { font-family: var(--fontFamily); }
pre, #status { white-space: pre-wrap; overflow-wrap: anywhere; }
::selection { background: var(--selection); }
.sharePage { max-width: 520px; margin: 12vh auto; }
.sharePage p { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media (max-width: 560px) { body { margin: 24px auto; padding: 0 16px; } section { padding: 16px; } }