:root {
  color-scheme: light dark;
  --bg-chrome: #f8f8f8;
  --bg-tertiary: #14141414;
  --bg-quaternary: #1414140f;
  --bg-neutral: #141414;
  --bg-neutral-hover: #262626;
  --text-primary: #141414;
  --text-secondary: #141414bd;
  --text-tertiary: #14141499;
  --text-inverted: #fcfcfc;
  --border-secondary: #1414141f;
  --border-tertiary: #14141414;
  --text-yellow: #a46700;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-chrome: #141414;
    --bg-tertiary: #f0f0f014;
    --bg-quaternary: #f0f0f00f;
    --bg-neutral: #f0f0f0;
    --bg-neutral-hover: #d7d7d7;
    --text-primary: #f0f0f0;
    --text-secondary: #f0f0f0bd;
    --text-tertiary: #f0f0f099;
    --text-inverted: #181818;
    --border-secondary: #f0f0f01f;
    --border-tertiary: #f0f0f014;
    --text-yellow: #f1b467;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--bg-chrome);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 13px;
  line-height: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sunset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 384px;
  text-align: center;
}
.sunset-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.sunset-mark svg { width: 24px; height: 26px; }
.sunset-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 320px;
}
.sunset h1 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text-primary);
}
.sunset-lede {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-tertiary);
}
.sunset-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-secondary);
}
.sunset-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sunset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
.sunset-button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
.sunset-button-primary {
  background: var(--bg-neutral);
  color: var(--text-inverted);
}
.sunset-button-primary:hover { background: var(--bg-neutral-hover); }
.sunset-button-outline {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-tertiary);
}
.sunset-button-outline:hover { background: var(--bg-quaternary); }
.sunset-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sunset-button { border: 0; font-family: inherit; cursor: pointer; }
.sunset-remember {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}
.sunset-remember-label {
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.sunset-remember-hint {
  display: none;
  flex-basis: 100%;
  margin: 0;
  color: var(--text-yellow);
  overflow-wrap: anywhere;
}
.sunset-checkbox:checked ~ .sunset-remember-hint { display: block; }
.sunset-remember-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.sunset-checkbox {
  appearance: none;
  margin: 0;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  background: var(--bg-tertiary);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sunset-checkbox::after {
  content: "";
  width: 4px;
  height: 7px;
  margin-top: -1px;
  border: solid var(--text-inverted);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.sunset-checkbox:checked {
  background: var(--bg-neutral);
  border-color: var(--bg-neutral);
}
.sunset-checkbox:checked::after { opacity: 1; }
.sunset-checkbox:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
.sunset-remembered {
  margin: 0;
  color: var(--text-tertiary);
}
.sunset-link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.sunset-link-button:hover { color: var(--text-primary); }