@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0c0904;
  --fg: #ffb000;
  --fg-bright: #ffd480;
  --fg-dim: #a87614;
  --glow: rgb(255 176 0 / 0.35);
  --font: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --font-size: 16px;
  --line-height: 1.5;
  --app-height: 100dvh;
  color-scheme: dark;
}

:root[data-theme="green"] {
  --bg: #030a05;
  --fg: #33ff66;
  --fg-bright: #b3ffc6;
  --fg-dim: #1f9c40;
  --glow: rgb(51 255 102 / 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  overflow: hidden;
  color: var(--fg);
  font: 400 var(--font-size) / var(--line-height) var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.measure {
  position: absolute;
  visibility: hidden;
  white-space: pre;
}

/* Screen texture: phosphor glow, scanlines and vignette. */
.crt {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: var(--app-height);
  overflow: hidden;
  text-shadow: 0 0 2px var(--glow);
}

.crt::before,
.crt::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
}

.crt::before {
  background: repeating-linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.16) 0 1px,
    transparent 1px 3px
  );
}

.crt::after {
  background: radial-gradient(ellipse at center, transparent 62%, rgb(0 0 0 / 0.42) 100%);
}

.screen {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 32px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
}

.line,
.ps1,
.typed {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.line {
  min-height: calc(var(--line-height) * 1em);
}

.line--hang {
  padding-left: var(--hang);
  text-indent: calc(-1 * var(--hang));
}

.tone-dim {
  color: var(--fg-dim);
}

.tone-bright {
  color: var(--fg-bright);
}

.tone-inverse {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, 16ch);
  column-gap: 2ch;
  margin: 0;
  padding: 0 0 0 2ch;
  list-style: none;
}

.link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.link:focus-visible,
.link:active {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
}

@media (hover: hover) {
  .link:hover {
    background: var(--fg);
    color: var(--bg);
    text-shadow: none;
  }
}

.prompt {
  position: relative;
  min-height: calc(var(--line-height) * 1em);
}

.prompt.is-busy .ps1,
.prompt.is-busy .typed {
  visibility: hidden;
}

.typed {
  color: var(--fg-bright);
}

.cursor {
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
  animation: blink 1s steps(1, end) infinite;
}

.prompt.is-typing .cursor {
  animation: none;
}

.prompt:not(.is-focused) .cursor {
  animation: none;
  background: transparent;
  color: var(--fg-bright);
  box-shadow: inset 0 0 0 1px var(--fg);
}

@keyframes blink {
  50% {
    background: transparent;
    color: var(--fg-bright);
  }
}

/* The real input only receives keystrokes; the visible text and cursor are rendered beside it. */
.input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 16px;
}

.status {
  display: flex;
  overflow: hidden;
  padding: 0 1ch;
  background: var(--fg);
  color: var(--bg);
  text-shadow: none;
  white-space: pre;
}

.status > span + span:not(.status-clock)::before {
  padding: 0 1ch;
  content: "│";
}

.status-clock {
  margin-left: auto;
  padding-left: 2ch;
}

@media (max-width: 640px) {
  :root {
    --font-size: 14px;
  }

  .screen {
    padding: 16px 16px 12px;
  }

  .projects {
    padding-left: 1ch;
  }

  .status-hints {
    display: none;
  }
}

@media (prefers-contrast: more) {
  .crt {
    text-shadow: none;
  }

  .crt::before,
  .crt::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}