@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;
  --black: #05070a;
  --screen: #090c11;
  --bar: #191f28;
  --line: #222b36;
  --blue: #8bd8ff;
  --blue-bright: #c1efff;
  --blue-soft: #65bce8;
  --blue-deep: #397fa5;
  --text: #dce7ef;
  --muted: #7d8b99;
  --faint: #52606d;
  --ok: #9fe5ca;
  --orange: #ff9a41;
  --mono: 'DM Mono', 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(ellipse at 35% 0%, #111923 0%, var(--black) 45%);
  font-family: var(--mono);
}

button, input { font: inherit; }

.page { width: min(820px, calc(100% - 28px)); margin: 24px auto 32px; }
.terminal-window { overflow: hidden; border: 1px solid #171d26; border-radius: 6px 6px 0 0; background: var(--screen); box-shadow: 0 24px 70px rgba(0,0,0,.58); }
.window-bar { height: 35px; display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; padding: 0 13px; background: var(--bar); border-bottom: 1px solid #27313c; }
.window-controls { display: flex; align-items: center; gap: 7px; }
.control { width: 10px; height: 10px; border-radius: 50%; }
.control-close { background: #ff626b; }.control-min { background: #ffc440; }.control-max { background: #35cc74; }
.window-title { color: #8193a5; text-align: center; font-size: 10px; letter-spacing: .025em; }
.bar-spacer { min-width: 30px; }

.terminal-screen { background: var(--screen); }
.output {
  display: flex;
  flex-direction: column;
  min-height: min(76vh, 900px);
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 17px 17px 4px;
  scrollbar-color: #293642 transparent;
  scrollbar-width: thin;
}
.output::-webkit-scrollbar { width: 8px; }
.output::-webkit-scrollbar-thumb { border: 2px solid var(--screen); border-radius: 8px; background: #293642; }
.output-line { color: var(--text); font-size: 12px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt-line:last-child { margin-top: auto; padding-top: 22px; }
.output-line.dim { color: var(--muted); }
.output-line.blue { color: var(--blue-bright); }
.output-line.ok { color: var(--ok); }
.output-line.command-echo { margin-top: 15px; color: var(--blue); }
.output-line.spacer { height: 8px; line-height: 1; }
.output-line.boot { font-weight: 500; }
.boot-ok { color: var(--blue); }
.ascii-logo {
  margin: 18px 0 19px;
  color: var(--blue);
  font-size: clamp(6px, 1.35vw, 11px);
  line-height: 1.18;
  font-weight: 500;
  text-shadow: 0 0 18px rgba(118, 205, 248, .28);
  white-space: pre;
  animation: logo-in .65s ease-out both;
}

.link-group { margin: 16px 0 22px; animation: row-in .32s ease-out both; }
.link-group-title { display: inline-block; margin: 0 0 7px; padding-bottom: 2px; color: var(--blue); border-bottom: 1px solid rgba(139,216,255,.43); font-size: 12px; font-weight: 500; }
.service-row { display: grid; grid-template-columns: 15px 20px minmax(100px, 1fr) minmax(60px, 180px); align-items: center; gap: 5px; max-width: 690px; min-height: 33px; }
.service-caret { width: 16px; height: 21px; padding: 0; color: var(--blue-soft); border: 0; background: transparent; font-size: 12px; text-align: left; cursor: pointer; transition: transform .16s, color .16s; }
.service-row.expanded .service-caret { transform: rotate(90deg); color: var(--blue-bright); }
.service-icon { display: grid; width: 18px; height: 18px; place-items: center; color: var(--blue-bright); background: rgba(114, 193, 231, .12); border: 1px solid rgba(139,216,255,.2); border-radius: 5px; font-size: 11px; }
.service-link { min-width: 0; overflow: hidden; color: #d4dfe7; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.service-link:hover { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.service-name { padding: 0; color: #d4dfe7; border: 0; background: transparent; text-align: left; font-size: 12px; font-weight: 500; cursor: pointer; }
.service-name:hover { color: var(--blue-bright); }
.service-detail { overflow: hidden; color: #758492; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.service-extra { grid-column: 2 / -1; margin: -1px 0 7px; padding: 7px 9px; color: #88a0b1; background: rgba(103, 175, 212, .055); border-left: 1px solid rgba(139,216,255,.23); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.service-extra[hidden] { display: none; }
.service-extra a { color: var(--blue); text-decoration: none; }
.service-extra a:hover { text-decoration: underline; }
.prompt-line { margin: 22px 0 3px; color: #6fdaa9; font-size: 12px; }
.prompt-user { color: #71d8a5; }.prompt-at { color: #8397a9; }.prompt-host { color: var(--blue); }.prompt-path { color: #b0bac4; }.prompt-dollar { color: var(--blue); margin-left: 4px; }
.cursor-block { display: inline-block; width: 8px; height: 15px; margin-left: 2px; background: var(--blue); vertical-align: -3px; animation: blink 1s steps(2, start) infinite; }
.type-cursor { display: inline-block; color: var(--blue-bright); animation: blink .85s steps(2, start) infinite; }
.command-hint { padding: 7px 10px 6px; color: #697988; background: #0a0e14; text-align: center; font-size: 9px; }
kbd { padding: 1px 5px; color: #dce9f2; background: #151b22; border: 1px solid #303b47; border-radius: 3px; font: 9px var(--mono); }
.command-line { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 13px; background: #0d1117; border-top: 1px solid #161e27; }
.input-prompt { color: var(--blue); font-size: 13px; font-weight: 500; }
#command-input { flex: 1; min-width: 0; padding: 6px 0; color: #e0edf5; border: 0; outline: 0; background: transparent; font-size: 11px; }
#command-input::placeholder { color: #68727d; font-style: italic; }
.submit-command { width: 26px; height: 25px; color: var(--blue); border: 1px solid rgba(139,216,255,.22); border-radius: 3px; background: rgba(139,216,255,.055); cursor: pointer; }
.submit-command:hover { background: rgba(139,216,255,.15); }
.page-note { margin: 12px 0; color: #526575; text-align: center; font-size: 9px; }
.page-note span { color: var(--blue-soft); }
.boot-caret { display: inline-block; width: 7px; height: 12px; margin-left: 4px; background: var(--blue); vertical-align: -2px; animation: blink .85s steps(2, start) infinite; }
.service-row:nth-of-type(2) { animation-delay: .03s; }

@keyframes blink { to { visibility: hidden; } }
@keyframes logo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 600px) {
  .page { width: calc(100% - 16px); margin: 10px auto 18px; }
  .window-bar { height: 32px; grid-template-columns: 70px 1fr 35px; padding: 0 10px; }
  .control { width: 9px; height: 9px; }
  .window-title { font-size: 9px; }
  .output { min-height: calc(100vh - 110px); max-height: none; padding: 13px 11px 3px; }
  .output-line { font-size: 11px; }
  .ascii-logo { margin: 16px 0; font-size: clamp(5px, 1.65vw, 8px); }
  .link-group { margin: 13px 0 19px; }
  .link-group-title { font-size: 11px; }
  .service-row { grid-template-columns: 14px 18px minmax(80px, 1fr); min-height: 31px; gap: 4px; }
  .service-icon { width: 16px; height: 16px; font-size: 10px; }
  .service-link, .service-name { font-size: 11px; }
  .service-detail { grid-column: 3; text-align: left; margin-top: -4px; padding-bottom: 5px; font-size: 9px; }
  .service-extra { grid-column: 2 / -1; }
  .command-hint { font-size: 8px; }
  .command-line { min-height: 41px; padding: 0 10px; }
  #command-input { font-size: 10px; }
}