styles.css

:root {
  color-scheme: light;
  --color-bg-page: #fff;
  --color-bg-page-inv: #000;
  --color-input-bg: #f9f9f9;
  --color-input-bg-hl: #fff;
  --color-button-bg: #fff;
  --color-button-bg-hl: #e1e3e6;
  --color-hl-bg: color-mix(in srgb, var(--color-bg-page-inv) 5%, #0000 100%);
  --color-border: #6c71749e;
  --color-border-dim: #91989b9e;
  --color-text: #272930;
  --color-text-dim: #52545c;
  --color-accent: #702fd8;
  --color-link: var(--color-accent);
  --color-invalid: #c20808;
  --color-color-pink: #d105af;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg-page: #1a1b1d;
    --color-bg-page-inv: #fff;
    --color-input-bg: var(--color-bg-page);
    --color-input-bg-hl: #000;
    --color-button-bg: #2d2d30;
    --color-button-bg-hl: #4d4d52;
    --color-hl-bg: color-mix(in srgb, var(--color-bg-page-inv) 10%, #0000 100%);
    --color-border: #dfdfdf47;
    --color-border-dim: #dfdfdf50;
    --color-text: #eee;
    --color-text-dim: #ccc;
    --color-link: #ba9cff;
    --color-invalid: #ff4040;
    --color-color-pink: #ff77e8;
  }
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg-page);
  overflow-y: scroll; /* Always show scroll bar */
}

#main_container {
  max-width: 916px; padding: 16px; margin: auto;
}



body, button, input, select {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--color-text);
}

button, input, select {
  border-radius: 8px;
}

.text-label_large {
  font-size: 18px;
  font-weight: 500;
}

a[href] {
  color: var(--color-link);
  text-underline-offset: 2px;
}

a:not(.card > :first-child, .emoji_button) {
  outline-offset: 3px;
  outline-color: var(--color-link);
}

a[href].style_as_text {
  color: var(--color-text);
  text-decoration: none;
}

a[href]:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

a[href]:focus-visible {
  text-decoration-thickness: 2px !important;
}

[role=contentinfo] p:not([id]) {
  font-size: 12px;
  color: var(--color-text-dim);
}



.item-row {
  display: flex;
  flex-direction: row;
  gap: 7px;
}

.center {
  text-align: center;
}

.full * {
  width: 100%;
}



button {
  font-size: 15px;
  padding: 7px;
  border: 1px solid var(--color-border);
  background-color: var(--color-button-bg);
  cursor: pointer;
}

button:enabled:hover {
  background-color: var(--color-button-bg-hl);
  border-color: var(--color-border-dim);
}

button:enabled:active {
  filter: brightness(0.85);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  background-color: var(--color-bg-page);
}

button.accent {
  background-color: var(--color-accent) !important;
  color: #fff;
  outline: #fff 2px solid;
  outline-offset: -3px;
}

input, select {
  font-size: 15px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--color-border-dim);
  background-color: var(--color-input-bg);
  box-shadow: inset #0004 0px 1px 2px -1px;
}

select {
  max-width: 300px;
}

:is(input, select):focus {
  background-color: var(--color-input-bg-hl);
  box-shadow: none;
}



.floating_button {
  position: fixed;
  bottom: 9px;
  right: 9px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.skip_button {
  top: 9px;
  left: 9px;
  bottom: unset;
  right: unset;
}

.skip_button:focus {
  opacity: 1;
  pointer-events: all !important;
  opacity: 1 !important;
}

.emoji_button {
  font-size: 17px;
}

h2 a.pink {
  color: var(--color-color-pink);
  outline-color: var(--color-color-pink);
}

.disclaimer {
  margin-top: 50px;
}



[data-hidden] {
  display: none !important;
}



dialog {
  max-width: 720px;
  border: solid 1px var(--color-border);
  border-radius: 12px;
  box-shadow: #0006 0px 4px 19px 1px;
  background-color: #fafafaad;
  backdrop-filter: blur(12px);
}

::backdrop {
  background-color: #fff9;
  backdrop-filter: blur(0.75px);
}

@media (prefers-color-scheme: dark) {
  dialog {
    box-shadow: #000 0px 4px 19px 1px;
    background-color: #141414e2;
  }
  
  ::backdrop {
    background-color: #0007;
  }
}