:root {
  color-scheme: dark;

  --ctp-rosewater: #f2d5cf;
  --ctp-flamingo:  #eebebe;
  --ctp-pink:      #f4b8e8;
  --ctp-mauve:     #ca9ee6;
  --ctp-red:       #e78284;
  --ctp-maroon:    #ea999c;
  --ctp-peach:     #ef9f76;
  --ctp-yellow:    #e5c890;
  --ctp-green:     #a6d189;
  --ctp-teal:      #81c8be;
  --ctp-sky:       #99d1db;
  --ctp-sapphire:  #85c1dc;
  --ctp-blue:      #8caaee;
  --ctp-lavender:  #babbf1;
  --ctp-text:      #c6d0f5;
  --ctp-subtext1:  #b5bfe2;
  --ctp-subtext0:  #a5adce;
  --ctp-overlay2:  #949cbb;
  --ctp-overlay1:  #838ba7;
  --ctp-overlay0:  #737994;
  --ctp-surface2:  #626880;
  --ctp-surface1:  #51576d;
  --ctp-surface0:  #414559;
  --ctp-base:      #303446;
  --ctp-mantle:    #292c3c;
  --ctp-crust:     #232634;

  --bg:      var(--ctp-base);
  --fg:      var(--ctp-text);

  --dim:     var(--ctp-overlay2);
  --muted:   var(--ctp-subtext0);
  --cursor:  var(--ctp-rosewater);

  --p-arrow:  var(--ctp-green);
  --p-error:  var(--ctp-red);
  --p-user:   var(--ctp-pink);
  --p-dir:    var(--ctp-blue);

  --font-mono:
    'JetBrains Mono', 'JetBrainsMono Nerd Font', 'Fira Code', 'FiraCode Nerd Font',
    'Cascadia Code', 'Cascadia Mono', 'SF Mono', ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace;
}

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

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 0.85rem + 0.45vw, 1.125rem);
  line-height: 1.6;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ctp-surface2);
  color: var(--ctp-text);
}

a {
  color: var(--ctp-sapphire);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ctp-sapphire) 40%, transparent);
}

a:hover,
a:focus-visible {
  color: var(--ctp-sky);
  border-bottom-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--ctp-lavender);
  outline-offset: 2px;
}

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

.term {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(0.875rem, 0.5rem + 2.2vw, 2.5rem);
  cursor: text;
}

.screen {
  margin: 0;
}

.row {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.row + .row {
  margin-top: 0;
}

.row.gap {
  height: 0.85em;
}

.p-arrow  { color: var(--p-arrow); }
.p-arrow.err { color: var(--p-error); }
.p-user   { color: var(--p-user); }
.p-dir    { color: var(--p-dir); }
.p-time   { color: var(--ctp-mauve); }
.p-host   { color: var(--ctp-sky); }

.p-cmd { color: var(--fg); }

.o-dim     { color: var(--dim); }
.o-muted   { color: var(--muted); }
.o-err     { color: var(--ctp-red); }
.o-warn    { color: var(--ctp-yellow); }
.o-key     { color: var(--ctp-teal); }
.o-title   { color: var(--ctp-blue); }
.o-canada  { color: var(--ctp-red); }

.o-name {
  display: inline-block;
  margin: 0.1em 0 0.05em;
  color: var(--fg);
  font-size: clamp(1.25rem, 0.95rem + 1.25vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

code,
kbd {
  font: inherit;
  color: var(--ctp-peach);
}

kbd {
  color: var(--ctp-lavender);
}

.line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
}

.field {
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
  min-width: 2ch;
}

.prompt {
  white-space: pre-wrap;
}

.mirror {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.cmd {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: max(16px, 1em);
  opacity: 0;
}

.cmd:focus {
  outline: none;
}

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

.line.idle .cursor {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--cursor);
  animation: none;
}

@keyframes blink {
  0%, 50% {
    background: var(--cursor);
    color: var(--bg);
  }
  50.01%, 100% {
    background: transparent;
    color: inherit;
  }
}

.hint {
  margin: 1.6em 0 0;
  color: var(--dim);
  font-size: 0.9em;
}

.row.cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
}

.col {
  flex: 0 0 auto;
  min-width: 16ch;
}

.nojs {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 5vw, 2rem);
}

.nojs h2 {
  margin: 0;
  color: var(--ctp-pink);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
}

.nojs-title {
  margin: 0.15em 0 0;
  color: var(--ctp-blue);
}

.nojs-loc {
  margin: 0.15em 0 2em;
  color: var(--ctp-red);
}

.nojs-links {
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
}

.nojs-links li + li {
  margin-top: 0.4em;
}

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

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .term,
  .hint {
    display: none;
  }

  .sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }
}