/* Dark is the default; theme.js sets data-theme from the system setting. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --text: #E8E8E8;
  --dim: #8C8C8C;
  --art-bg: #000000;
  --art-ink: #5B8FD8;
  --art-alt: #9576EA;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --text: #111111;
  --dim: #6B6B6B;
  --art-bg: #FFFFFF;
  --art-ink: #3473BE;
  --art-alt: #6A45C2;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #FFFFFF;
    --text: #111111;
    --dim: #6B6B6B;
    --art-bg: #FFFFFF;
    --art-ink: #3473BE;
    --art-alt: #6A45C2;
  }
}

:root {
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s, color 0.25s;
}

p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; }

/* ---- Buttons & cursor ---- */
.btn {
  display: inline-block;
  padding: 0.2em 0.4em;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover, .btn-solid { background: var(--text); color: var(--bg); }
.btn-solid:hover { background: transparent; color: var(--text); outline: 1px solid var(--text); }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 0.3em;
  vertical-align: text-bottom;
  background: currentColor;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ---- Header ---- */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px var(--gutter);
}
.site-header .btn { justify-self: start; }
.logo { text-decoration: none; }
.logo:hover { text-decoration: underline; text-underline-offset: 4px; }

.theme-toggle {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.2em 0;
  background: none;
  border: 0;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
}
.theme-toggle .track {
  position: relative;
  width: 2.4em;
  height: 1.2em;
  border: 1px solid currentColor;
}
.theme-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.2em - 6px);
  height: calc(1.2em - 6px);
  background: var(--text);
  transition: transform 0.2s;
}
.theme-toggle[aria-checked="true"] .knob { transform: translateX(1.2em); }
.theme-toggle[aria-checked="true"] span:last-child,
.theme-toggle[aria-checked="false"] span:first-child { color: var(--text); }

/* ---- Home: one piece of art ---- */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px var(--gutter) 40px;
}
.art { margin: 0; width: min(100%, 1100px); }
.art canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: calc(100svh - 170px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.art figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--dim);
}
.count { font-variant-numeric: tabular-nums; }

/* ---- ASCII art (login / 404) ---- */
.ascii {
  margin: 0;
  width: 100%;
  font-family: var(--mono);
  line-height: 1;
  white-space: pre;
  text-align: left;
  overflow: hidden;
  color: var(--art-ink);
  user-select: none;
}

/* ---- Login / 404 ---- */
.screen-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px var(--gutter) 0;
}
.session { max-width: 40rem; margin: auto; }
.session p { margin-bottom: 0.35rem; }
.session .btn { margin-top: 1.75rem; }
.prompt { color: var(--dim); }

/* ---- Small screens ---- */
@media (max-width: 640px) {
  .site-header { grid-template-columns: 1fr 1fr; }
  .site-header .logo { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .art canvas { aspect-ratio: 4 / 5; }
}