/* ─────────────────────────────────────────────
   apps.mertsalov.dev — terminal-style landing
   Palette: Gruvbox Material Dark
   ───────────────────────────────────────────── */

:root {
  --bg:        #282828; /* terminal background          */
  --fg:        #d4be98; /* default text (cream)         */
  --teal:      #7daea3; /* path segment                 */
  --olive:     #a9b665; /* branch / keyword             */
  --yellow:    #d8a657; /* command / links              */
  --red:       #ea6962; /* errors (reserved)            */
  --dim:       #928374; /* muted / meta info            */
  --seg-text:  #282828; /* dark text inside colored segs*/
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Hack Nerd Font Mono", "Hack", "Menlo", "DejaVu Sans Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
}

body {
  padding: 24px 28px;
}

.terminal {
  max-width: 820px;
}

.line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* -- Prompt segments -- */
.prompt {
  margin-right: 0.6ch;
}

.user {
  background: var(--olive);
  color: var(--seg-text);
  font-weight: 600;
  padding: 0.1em 0.6ch;
  border-radius: 3px;
}

.path {
  background: var(--teal);
  color: var(--seg-text);
  font-weight: 600;
  padding: 0.1em 0.6ch;
  border-radius: 3px;
  margin-left: 0.5ch;
}

.sigil {
  color: var(--dim);
  margin-left: 0.6ch;
}

.command {
  color: var(--yellow);
}

/* -- Output -- */
.output {
  color: var(--fg);
}

.app-block {
  margin: 0.4em 0 2.2em 0;
}

.app-name {
  color: var(--olive);
  font-weight: 600;
}

.app-desc {
  color: var(--fg);
}

.app-meta {
  color: var(--dim);
}

/* -- Download link -- */
.download {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: none;
}

.download::before {
  content: "download:";
  display: inline-block;
  background: var(--dim);
  color: var(--bg);
  font-weight: 600;
  padding: 0.1em 0.6ch;
  border-radius: 3px;
  margin-right: 0.6ch;
  text-decoration: none;
}

.download:hover,
.download:focus {
  background: var(--yellow);
  color: var(--seg-text);
  text-decoration: none;
  outline: none;
}

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

/* -- Blinking cursor -- */
.cursor {
  color: var(--fg);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}