/* System monospace fonts only: no third-party font requests. */
:root {
  --bg: #0d0b08;
  --term: #15120d;
  --dot: #3a3226;
  --fg: #e8d9b5;
  --prompt: #f2a93b;
  --dim: #8a7c62;
  --hi: #ffcf7a;
  --rule: #5b4e37;
  --err: #e8735a;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--mono);
  font-variant-ligatures: none;
  display: grid;
  place-items: center;
  padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.term {
  width: 100%;
  max-width: 620px;
  background: var(--term);
  border: 1px solid #241f17;
  border-radius: 12px;
  padding: 22px 24px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.bar { display: flex; gap: 7px; margin-bottom: 22px; }
.bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }

p { margin: 0; }
.gap { margin-top: 22px; }
.cmdline { margin-top: 14px; }
.p { color: var(--prompt); }
.dim { color: var(--dim); }

h1 {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--hi);
}

ul { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 6px; }
li { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 8px; }

a, button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
  overflow-wrap: anywhere;
  justify-self: start;
}
a:hover, button:hover { color: var(--hi); border-color: var(--prompt); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--prompt); outline-offset: 3px; border-radius: 2px; }

.cur {
  display: inline-block;
  width: 9px;
  height: 17px;
  background: var(--prompt);
  vertical-align: -3px;
  animation: blink 1.1s steps(1) infinite;
}
.hi { color: var(--hi); }
.err { color: var(--err); }

#out > p.gap:first-child { margin-top: 0; }
pre {
  margin: 4px 0;
  font: inherit;
  white-space: pre;
  overflow-x: auto;
}
pre.noise { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim); }

li.wide { grid-template-columns: 14ch minmax(0, 1fr); }

.line { display: flex; gap: 1ch; align-items: baseline; margin-top: 22px; }
.line label { flex: none; }
.line input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  caret-color: var(--prompt);
}

.hint { margin-top: 10px; font-size: 13px; }
kbd { font: inherit; color: var(--hi); }

#rain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

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

@media (max-width: 420px) {
  body { font-size: 14px; }
  .term { padding: 18px 16px 22px; }
  li, li.wide { grid-template-columns: 1fr; gap: 0; }
}

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