@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* velo's 8 built-in themes, the same values as theme.go */
:root,
[data-theme="tokyo-night"] {
  --bg: #1a1b26; --line: #292e42; --sel: #283457; --fg: #c0caf5; --dim: #565f89;
  --acc: #7aa2f7; --cyan: #7dcfff; --mag: #bb9af7; --yel: #e0af68; --grn: #9ece6a; --red: #f7768e;
}
[data-theme="catppuccin"] {
  --bg: #1e1e2e; --line: #313244; --sel: #45475a; --fg: #cdd6f4; --dim: #6c7086;
  --acc: #89b4fa; --cyan: #89dceb; --mag: #cba6f7; --yel: #f9e2af; --grn: #a6e3a1; --red: #f38ba8;
}
[data-theme="gruvbox"] {
  --bg: #282828; --line: #3c3836; --sel: #504945; --fg: #ebdbb2; --dim: #928374;
  --acc: #fe8019; --cyan: #8ec07c; --mag: #d3869b; --yel: #fabd2f; --grn: #b8bb26; --red: #fb4934;
}
[data-theme="nord"] {
  --bg: #2e3440; --line: #3b4252; --sel: #434c5e; --fg: #d8dee9; --dim: #6d7a96;
  --acc: #88c0d0; --cyan: #8fbcbb; --mag: #b48ead; --yel: #ebcb8b; --grn: #a3be8c; --red: #bf616a;
}
[data-theme="everforest"] {
  --bg: #2d353b; --line: #3d484d; --sel: #475258; --fg: #d3c6aa; --dim: #859289;
  --acc: #a7c080; --cyan: #83c092; --mag: #d699b6; --yel: #dbbc7f; --grn: #a7c080; --red: #e67e80;
}
[data-theme="kanagawa"] {
  --bg: #1f1f28; --line: #2a2a37; --sel: #2d4f67; --fg: #dcd7ba; --dim: #727169;
  --acc: #7e9cd8; --cyan: #7fb4ca; --mag: #957fb8; --yel: #e6c384; --grn: #98bb6c; --red: #e46876;
}
[data-theme="rose-pine"] {
  --bg: #191724; --line: #26233a; --sel: #403d52; --fg: #e0def4; --dim: #6e6a86;
  --acc: #ebbcba; --cyan: #9ccfd8; --mag: #c4a7e7; --yel: #f6c177; --grn: #9ccfd8; --red: #eb6f92;
}
[data-theme="matte-black"] {
  --bg: #121212; --line: #262626; --sel: #333333; --fg: #bebebe; --dim: #6b6b6b;
  --acc: #e0a64e; --cyan: #e8e8e8; --mag: #e0a64e; --yel: #d9b77e; --grn: #a8c08a; --red: #d06a6a;
}

:root {
  /* text that must stay readable uses --muted, not velo's low-contrast --dim */
  --muted: color-mix(in srgb, var(--fg) 66%, var(--dim));
  --ghost: color-mix(in srgb, var(--dim) 50%, var(--bg));
  --outside: color-mix(in srgb, var(--bg) 82%, #000);
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --pad: clamp(16px, 3vw, 36px);
  --gap: clamp(56px, 6.5vw, 88px);
  color-scheme: dark;
  scrollbar-color: var(--line) var(--outside);
}

* { box-sizing: border-box; }

html { background: var(--outside); }

body {
  margin: 0;
  background: var(--outside);
  color: var(--fg);
  font: 400 15px/1.65 var(--mono);
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
  caret-color: var(--acc);
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s cubic-bezier(.16, 1, .3, 1), color .5s cubic-bezier(.16, 1, .3, 1);
}

::selection { background: var(--sel); color: var(--fg); }

a {
  color: var(--acc);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--acc) 40%, transparent);
  text-underline-offset: .25em;
}
a:hover { color: var(--cyan); text-decoration-color: currentColor; }

:focus-visible {
  outline: 1px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}

/* the braille field behind the window, drawn on a canvas by app.js */
.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* the foot window, with the Hyprland gradient border */
.window {
  position: relative;
  max-width: 1240px;
  margin: clamp(10px, 3vw, 40px) auto;
  background: var(--bg);
  box-shadow: 0 24px 80px -20px rgb(0 0 0 / .6);
}

/* the 2px frame: a viewport-fixed gradient, masked to a ring around the window */
.window::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  background: linear-gradient(135deg, var(--cyan), var(--mag)) fixed;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.inner { padding: var(--pad); padding-bottom: 0; }

/* header row, as in velo */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}
.badge { display: block; height: 24px; line-height: 0; }
.badge svg { height: 100%; width: auto; }
.badge .b-bg { fill: var(--acc); }
.badge .b-fg { fill: var(--bg); }
.status { color: var(--muted); }
.status b { color: var(--grn); font-weight: 700; }

/* shell vocabulary */
.beat { margin-top: var(--gap); }
.beat.run { margin-top: clamp(36px, 4vw, 48px); }
.beat:first-of-type { margin-top: clamp(32px, 4vw, 52px); }

h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 .hash, .comment .hash { color: var(--dim); }

h2 {
  /* a shell comment that names the beat */
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}

.lede {
  margin: 16px 0 0;
  max-width: 72ch;
  color: var(--muted);
  font-size: clamp(15px, 1.4vw, 18px);
}

.comment { margin: 10px 0 0; color: var(--muted); max-width: 80ch; }

.cmd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 24px;
  font-size: clamp(14px, 1.35vw, 17px);
}
.cmd .prompt { flex: none; white-space: nowrap; }
.prompt .tilde { color: var(--grn); }
.prompt .arrow { color: var(--acc); }
.cmd code {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.cmd.primary code { font-weight: 700; }

.keycap {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border: 0;
  background: var(--sel);
  color: var(--fg);
  font: 700 13px/1.6 var(--mono);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.keycap:hover { background: color-mix(in srgb, var(--sel) 70%, var(--acc)); }
.keycap[data-copied] { background: var(--grn); color: var(--bg); }

pre.out {
  margin: 10px 0 0;
  font: inherit;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
  scrollbar-width: thin;
}
pre.out .dim { color: var(--muted); }
pre.out .ln { display: block; transition: opacity .22s cubic-bezier(.16, 1, .3, 1); }

/* velo panels: 1px rounded border, title set into the top border */
.panel {
  position: relative;
  margin: 0;
  padding: 26px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.panel > .title,
.panel > .tag {
  position: absolute;
  top: -.85em;
  padding: 0 8px;
  background: var(--bg);
  font-size: 13px;
  transition: background-color .5s cubic-bezier(.16, 1, .3, 1);
}
.panel > .title { left: 12px; font-weight: 700; letter-spacing: .12em; }
.panel > .title::before { content: "◆ "; color: var(--acc); }
.panel > .tag { right: 12px; color: var(--muted); }
.panel > .tag.bottom { top: auto; bottom: -.95em; padding: 0 6px; }

/* the recording */
.recording { margin-top: 18px; padding: 0; }
.recording video { border-radius: 5px; }
.recording video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1166;
  background: #000;
}

/* keys: the page answers velo's keys */
.keys-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(0, 2.4fr);
  gap: 28px;
  margin-top: 26px;
  align-items: start;
}
.keylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.keylist button {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 400 14px/1.4 var(--mono);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.keylist button .cap {
  justify-self: start;
  padding: 0 8px;
  background: var(--sel);
  color: var(--fg);
  font-weight: 700;
}
.keylist button:hover { color: var(--fg); background: color-mix(in srgb, var(--sel) 45%, transparent); }
.keylist button[aria-pressed="true"] { background: var(--sel); color: var(--fg); }
.keylist button[aria-pressed="true"] .cap { background: var(--acc); color: var(--bg); }

.screen { padding: 12px; }
.screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1100;
  object-fit: contain;
  background: var(--outside);
  transition: opacity .35s cubic-bezier(.16, 1, .3, 1), filter .35s cubic-bezier(.16, 1, .3, 1);
}
.screen img.swap { opacity: 0; filter: blur(6px); }
.screen figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; min-height: 3.3em; }

/* how velo measures */
.measure {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 28px;
  margin-top: 26px;
  align-items: start;
}
.steps { display: grid; gap: 18px; }
.step-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.step-head .n { color: var(--muted); margin-right: 10px; }
.step-head .name { font-weight: 700; letter-spacing: .06em; }
.step-head .val { color: var(--grn); white-space: nowrap; }
.step .bar {
  height: 2px;
  margin: 6px 0 8px;
  background: var(--c, var(--acc));
  transform-origin: left;
}
.step p { margin: 0; color: var(--muted); font-size: 14px; max-width: 70ch; }

.grades { width: 100%; border-collapse: collapse; font-size: 14px; }
.grades th { text-align: left; font-weight: 400; color: var(--muted); padding: 0 0 8px; }
.grades td { padding: 5px 0; border-top: 1px dashed var(--line); }
.grades td:last-child { text-align: right; }
.grades .g { display: inline-block; min-width: 3.2ch; padding: 0 6px; text-align: center; font-weight: 800; color: var(--bg); }
.grades tr.this td { color: var(--fg); }
.grades tr.this td:first-child::after { content: "  ← this run"; color: var(--yel); }

/* jq output */
.json .k { color: var(--acc); }
.json .s { color: var(--grn); }
.json .n { color: var(--fg); }
.json .p { color: var(--muted); }

/* the session close */
.close { padding-bottom: var(--gap); }
.links { margin-top: 26px; max-width: 640px; }
.links dl { display: grid; grid-template-columns: 9ch 1fr; gap: 6px 14px; margin: 0; }
.links dt { color: var(--muted); }
.links dd { margin: 0; overflow-wrap: anywhere; }
.cursor {
  display: inline-block;
  width: .6em;
  height: 1.15em;
  margin-left: 4px;
  vertical-align: -.2em;
  background: var(--fg);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* the velo footer, sticky at the bottom of the window */
.foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: 13px;
  transition: background-color .5s cubic-bezier(.16, 1, .3, 1);
}
.foot .keys { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot button {
  display: inline-flex;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.foot button .cap { padding: 0 6px; background: var(--sel); color: var(--fg); font-weight: 700; }
.foot button:hover { color: var(--fg); }
.foot-right { display: flex; align-items: center; gap: 16px; }
.foot .theme-name { color: var(--muted); white-space: nowrap; }
.foot .hotkeys { color: var(--muted); white-space: nowrap; }
.foot .hotkeys[aria-pressed="true"] { color: var(--grn); }

/* typing motion. The head script sets html.motion when JavaScript runs and motion is allowed */
.reveal { transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
.motion .reveal:not(.shown) { opacity: 0; transform: translateY(6px); }
.motion .cmd:has(> code[data-type]:not(.typing):not(.typed)) { visibility: hidden; }
.motion pre.out:not(.split) { visibility: hidden; }
.motion pre.out .ln:not(.shown) { opacity: 0; }
.step .bar { transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.motion .reveal:not(.shown) .step .bar { transform: scaleX(0); }
.typing::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.2em;
  background: var(--fg);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .keys-grid, .measure { grid-template-columns: 1fr; }
  .foot .theme-name { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .panel > .tag:not(.bottom) { display: none; }
  pre.out.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  pre.out.wrap .ln { padding-left: 2ch; text-indent: -2ch; }
  .window { margin: 8px; }
  .cmd { display: block; }
  .cmd .prompt { margin-right: 8px; }
  .cmd .keycap { display: inline-flex; margin-left: 8px; vertical-align: 1px; }
  .bar .status { font-size: 12px; }
  .foot .keys button:nth-child(n+5) { display: none; }
  .foot .hotkeys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}