@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Victor Mono";
  src: url("fonts/VictorMono-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #161617;
  --text: #ece4da;
  --subtext: #9a948b;
  --accent: #b5433b;
  --cap: .706em;
  --pad: clamp(1.5rem, 9vw, 9rem);
  background: var(--bg);
  font-size: 112.5%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Fira Code", monospace;
  line-height: 1.7;
  isolation: isolate;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

::highlight(search) {
  background-color: var(--accent);
  color: var(--bg);
}

.enso {
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 110vmin;
  aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--accent);
  opacity: 0;
  filter: blur(3px);
  transition: width .4s, opacity .4s, filter .4s;
}

/* The mask sits on the pseudo-element, not on .enso, because filter runs before mask and blur would only soften a rectangle. */
.enso::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  mask: url("enso.webp") center / contain no-repeat;
}

[data-mode=shell] .enso {
  width: 70vmin;
  opacity: .25;
  filter: none;
}

main {
  max-width: 72ch;
  padding: clamp(2.5rem, 12vh, 8rem) var(--pad) 5rem;
}

h1 {
  position: relative;
  margin: 0 0 1.8rem;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.mark {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  transition: color .6s;
}

.mark:focus-visible {
  outline: none;
}

.mark::before {
  content: "";
  display: inline-block;
  width: .53em;
  height: .95em;
  margin-right: .55ch;
  vertical-align: -.15em;
  background-color: currentColor;
  mask: url("chevron.png") center / contain no-repeat;
  transition: translate .2s, scale .2s;
}

.mark:hover::before,
.mark:focus-visible::before {
  translate: .2ch 0;
}

.mark:active::before {
  scale: .85;
}

.cursor,
[data-mode=command] .status::after {
  content: "";
  display: inline-block;
  width: .5ch;
  height: 1.05em;
  vertical-align: -.2em;
  background-color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
  transition: background-color .6s;
}

body:not([data-mode=shell]) .cursor {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: var(--cursor-x, auto);
  width: var(--cursor-w, .5ch);
  translate: 0 -50%;
}

.name {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  margin-right: .3ch;
  outline: none;
  transition: grid-template-columns .5s ease-in, margin-right .5s ease-in;
}

[data-mode=shell] .name {
  grid-template-columns: minmax(0, 0fr);
  margin-right: 0;
}

.name:empty,
[data-mode=insert] .name {
  display: inline;
}

.input:not(:empty) {
  margin-right: .3ch;
}

[data-mode=insert] .cursor,
main:has(a:focus-visible) .cursor {
  visibility: hidden;
}

@keyframes blink {
  50% { opacity: 0; }
}

main > p {
  max-width: 46ch;
  margin: 0 0 1rem;
  font-size: 1.1rem;
  transition: color .3s, opacity .3s, visibility .3s;
}

section {
  transition: opacity .3s, visibility .3s;
}

.hint {
  color: var(--subtext);
  font: italic .95rem "Victor Mono", "Fira Code", monospace;
}

section + .hint {
  margin-top: 2.6rem;
}

.error {
  color: var(--subtext);
}

.error:empty {
  display: none;
}

h2 {
  margin: 2.6rem 0 .8rem;
  color: var(--subtext);
  font: italic 1rem "Victor Mono", "Fira Code", monospace;
}

h2::before {
  content: "# ";
}

ul {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.1rem;
}

li {
  --hover-delay: 0s;
  position: relative;
}

li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: .5em;
  height: .9em;
  margin-top: -.45em;
  background-color: var(--accent);
  mask: url("chevron.png") center / contain no-repeat;
  scale: 0;
  transform-origin: left center;
  transition:
    scale .25s var(--hover-delay),
    background-color .6s calc(var(--i) * 120ms);
}

a {
  position: relative;
  display: inline-block;
  padding-left: 1.35em;
  color: var(--text);
  text-decoration: none;
  outline: none;
  transition: color .25s;
}

a::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: .55em;
  height: .55em;
  margin-top: -.3em;
  background-color: var(--accent);
  transition:
    scale .2s var(--hover-delay),
    background-color .6s calc(var(--i) * 120ms);
}

a::after {
  content: "";
  position: absolute;
  left: 1.35em;
  right: 0;
  bottom: -.1em;
  height: .4em;
  background-color: var(--accent);
  mask: url("stroke.png") 0 0 / 100% 100%;
  scale: 0 1;
  transform-origin: left;
  transition:
    scale .4s cubic-bezier(.2, .8, .2, 1),
    background-color .6s calc(var(--i) * 120ms);
}

a span {
  color: var(--subtext);
  transition: color .25s;
}

a:hover,
a:focus-visible {
  color: var(--accent);
}

a:hover span,
a:focus-visible span {
  color: color-mix(in oklab, var(--accent) 30%, var(--subtext));
}

a:hover::before,
a:focus-visible::before {
  scale: 0;
}

li:has(a:hover, a:focus-visible)::before {
  scale: 1;
}

a:hover::after,
a:focus-visible::after {
  scale: 1 1;
}

li:active::before {
  scale: .8;
}

a:active::after {
  scale: 1 2;
}

main:has(a:hover, a:focus-visible) a:not(:hover, :focus-visible) {
  color: var(--subtext);
}

body:has(.mark:hover, .mark:focus-visible) li {
  --hover-delay: calc(var(--i) * 70ms);
}

body:has(.mark:hover, .mark:focus-visible) a::before {
  scale: 0;
}

body:has(.mark:hover, .mark:focus-visible) li::before {
  scale: 1;
}

.status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: .4rem var(--pad) 1rem;
  background-color: inherit;
  color: var(--text);
  white-space: pre;
  transition: opacity .3s, visibility .3s;
}

.status::before {
  content: attr(data-cmd);
  position: absolute;
  right: var(--pad);
}

:is([data-mode=normal], [data-mode=insert]) .status {
  color: var(--subtext);
}

[data-mode=shell] :is(main > :not(h1, .error), .status) {
  opacity: 0;
  visibility: hidden;
}

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