/* ---- page ---------------------------------------------------------------- */

:root {
  --ink: #1f2328;
  --muted: #57606a;
  --rule: #d0d7de;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --term-bg: #0c0c14;
  --term-bar: #16162a;
  --term-text: #e6e6ef;
  --term-dim: #8a8aa0;
  --term-green: #5af78e;
  --term-blue: #57c7ff;
  --term-yellow: #f3f99d;
  --term-pink: #ff6ac1;
  --term-red: #ff5f56;
}

body {
  margin: 0;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  overflow-x: hidden;
  font-family: 'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.55;
  color: var(--ink);
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid currentColor;
  padding: 4px;
}

.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.intro h1 {
  margin: 0;
}

.intro p {
  margin: 4px 0 0;
}

/* ---- projects ------------------------------------------------------------ */

.hint {
  margin: 12px 0 6px;
  color: var(--muted);
}

.hint--inline {
  font-size: 0.9em;
  white-space: nowrap;
}

.project > summary {
  cursor: pointer;
}

.project[open] .hint--inline {
  display: none;
}

.project__shot {
  display: block;
  width: 100%;
  height: auto;
  margin: 12px 0;
}

.project__demo {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 12px auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
}

@media (max-width: 600px) {
  /* On phones the per-card pointer wraps onto its own line; the line above the list is enough. */
  .hint--inline {
    display: none;
  }
}

/* ---- terminal ------------------------------------------------------------ */

/* Light by default to sit on the page; `theme dark` in the terminal switches. */
.terminal {
  --t-bg: #ffffff;
  --t-bar: #f6f8fa;
  --t-border: #d0d7de;
  --t-text: #1f2328;
  --t-dim: #6e7781;
  --t-green: #1a7f37;
  --t-blue: #0969da;
  --t-yellow: #9a6700;
  --t-red: #cf222e;
  --t-pink: #bf3989;
  --t-rainbow-lightness: 40%;
  --t-glow: none;

  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--t-border);
  border-radius: 8px;
  background: var(--t-bg);
  color: var(--t-text);
  font: 13px/1.5 var(--mono);
}

.terminal[data-theme='dark'] {
  --t-bg: #0c0c14;
  --t-bar: #16162a;
  --t-border: #0c0c14;
  --t-text: #e6e6ef;
  --t-dim: #8a8aa0;
  --t-green: #5af78e;
  --t-blue: #57c7ff;
  --t-yellow: #f3f99d;
  --t-red: #ff5f56;
  --t-pink: #ff6ac1;
  --t-rainbow-lightness: 62%;
  --t-glow: 0 0 8px currentColor;
}

.terminal:focus-within {
  box-shadow: 0 0 0 3px rgb(9 105 218 / 0.15);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--t-border);
  background: var(--t-bar);
  color: var(--t-dim);
  font-size: 12px;
}

.terminal__dots {
  display: flex;
  gap: 6px;
}

.terminal__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal__dots i:nth-child(1) { background: #ff5f56; }
.terminal__dots i:nth-child(2) { background: #ffbd2e; }
.terminal__dots i:nth-child(3) { background: #27c93f; }

.terminal__secrets {
  margin-left: auto;
  color: var(--t-yellow);
}

/* All four found: the counter turns gold and pops once. */
.terminal__secrets.is-complete {
  color: #d4a72c;
  font-weight: 800;
  animation: secrets-pop 0.6s ease-out;
}

@keyframes secrets-pop {
  40% { transform: scale(1.25); }
}

/* Starts at two lines (welcome + prompt) and grows with output, then scrolls. */
.terminal__screen {
  max-height: 340px;
  padding: 10px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: text;
}

.terminal__prompt {
  display: flex;
}

/* Only the prompt text needs `pre` (for its trailing space); on the row it would
   turn the markup's indentation into blank lines. */
[data-terminal-prompt] {
  white-space: pre;
}

/* The real input sits invisibly on top; the mirror underneath draws the text and a block cursor. */
.terminal__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.terminal__mirror {
  display: block;
  overflow: hidden;
  white-space: pre;
}

.terminal__input {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
}

.terminal__cursor {
  outline: 1px solid var(--t-text);
  outline-offset: -1px;
}

.terminal.is-focused .terminal__cursor {
  outline: 0;
  background: var(--t-text);
  color: var(--t-bg);
  animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
  50% { background: transparent; color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal.is-focused .terminal__cursor,
  .terminal__secrets.is-complete {
    animation: none;
  }
}

/* Output tones. Views pick a tone; the theme decides the color. */
.t-dim { color: var(--t-dim); }
.t-green { color: var(--t-green); }
.t-blue { color: var(--t-blue); }
.t-yellow { color: var(--t-yellow); }
.t-red { color: var(--t-red); }
.t-pink { color: var(--t-pink); }
.t-inv-green { background: var(--t-green); color: var(--t-bg); }
.t-inv-blue { background: var(--t-blue); color: var(--t-bg); }
.t-bold { font-weight: 800; }

.t-rainbow {
  color: hsl(var(--hue) 90% var(--t-rainbow-lightness));
  text-shadow: var(--t-glow);
}

.term-line,
.term-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* htop and pacman draw aligned columns, so they keep their spacing and scroll sideways. */
.term-block {
  overflow-x: auto;
}

.term-block .term-line {
  white-space: pre;
}

/* Still scrollable (wheel, touch, auto-scroll to the newest line), just no visible bar. */
.terminal__screen,
.term-block {
  scrollbar-width: none;
}

.terminal__screen::-webkit-scrollbar,
.term-block::-webkit-scrollbar {
  display: none;
}

.term-avatar {
  display: block;
  margin: 4px 0;
}

.ff {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 28px;
  margin: 4px 0;
}

.ff-logo-row {
  display: block;
  white-space: pre;
}

.ff-palette {
  display: flex;
}

.ff-palette--first {
  margin-top: 10px;
}

.ff-palette span {
  width: 26px;
  height: 16px;
}

@media (max-width: 600px) {
  .terminal__screen {
    max-height: 300px;
  }

  /* iOS zooms into inputs under 16px. The input is invisible (the mirror draws
     the text), so it can be 16px while the visible prompt stays 13px. */
  .terminal__input {
    font-size: 16px;
  }
}

/* ---- vim ----------------------------------------------------------------- */

.vim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--term-bg);
  color: var(--term-text);
  font: 14px/20px var(--mono);
}

.vim[hidden] {
  display: none;
}

.vim__buffer {
  flex: 1;
  overflow: hidden;
  padding-top: 4px;
}

.vim__row {
  display: flex;
  height: 20px;
  white-space: pre;
}

.vim__row--current {
  background: var(--term-bar);
}

.vim__num {
  flex: none;
  width: 4ch;
  padding-right: 12px;
  text-align: right;
  color: #4a4a63;
}

.vim__row--current .vim__num { color: var(--term-yellow); }
.vim__tilde { color: var(--term-blue); }
.vim__text--heading { color: var(--term-pink); }
.vim__text--quote { color: var(--term-dim); }
.vim__text--item { color: var(--term-yellow); }

.vim__cursor--normal {
  background: var(--term-text);
  color: var(--term-bg);
}

.vim__cursor--command {
  background: #3a3a55;
  color: var(--term-bg);
}

.vim__cursor--insert {
  box-shadow: inset 2px 0 0 var(--term-green);
}

.vim__status {
  display: flex;
  height: 20px;
  white-space: pre;
}

.vim__mode {
  padding: 0 10px;
  font-weight: 800;
  color: var(--term-bg);
  background: var(--term-blue);
}

.vim[data-mode='insert'] .vim__mode { background: var(--term-green); }
.vim[data-mode='command'] .vim__mode { background: var(--term-pink); }

.vim__file {
  flex: 1;
  overflow: hidden;
  padding: 0 10px;
  background: #24243a;
}

.vim__meta {
  padding: 0 10px;
  background: #24243a;
  color: var(--term-dim);
}

.vim__cmdline {
  display: flex;
  justify-content: space-between;
  height: 20px;
  padding: 0 4px;
  white-space: pre;
}

.vim__cmdline > span:first-child {
  overflow: hidden;
}

.vim__cmdline--error {
  color: var(--term-red);
}

.vim__showcmd {
  padding-right: 12px;
  color: var(--term-dim);
}

/* ---- logout and crash screens -------------------------------------------- */

.exit-screen {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  padding: 24px;
  background: #000;
  color: #c8c8c8;
  font: 14px/1.5 var(--mono);
  white-space: pre-wrap;
  cursor: pointer;
}

.exit-screen[hidden],
.crash[hidden] {
  display: none;
}

body.is-crashed {
  overflow: hidden;
  background: #fff;
}

.crash {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  background: #fff;
  color: #5f6368;
  font: 15px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.crash__inner {
  max-width: 600px;
  margin: 12vh auto 40px;
  padding: 0 24px;
}

.crash__dino {
  display: block;
  width: 100%;
  margin-bottom: 28px;
  cursor: pointer;
  touch-action: manipulation;
}

.crash h1 {
  margin: 0 0 14px;
  color: #202124;
  font-size: 24px;
  font-weight: 500;
}

.crash p {
  margin: 0 0 12px;
}

.crash b {
  color: #202124;
}

.crash ul {
  margin: 0 0 16px;
  padding-left: 28px;
}

.crash__code {
  font-size: 12px;
}

.crash .crash__code {
  margin-bottom: 28px;
}

.crash__reload {
  padding: 8px 16px;
  border: 0;
  border-radius: 4px;
  background: #1a73e8;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}