:root {
  color-scheme: dark;
  --bg: #030603;
  --green: #33ff66;
  --dim: #1a8f3c;
  --faint: #0d5a26;
  --amber: #ffb000;
  --line: rgba(51, 255, 102, .16);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #000;
  color: var(--green);
  font: 15px/1.65 "JetBrains Mono", "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
}

#terminal {
  position: relative;
  isolation: isolate;
  width: min(920px, 100%);
  height: min(92dvh, 820px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--faint);
  border-radius: 10px;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(51, 255, 102, .07), inset 0 0 120px rgba(0, 0, 0, .6);
}
#terminal::before, #terminal::after {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  content: "";
}
#terminal::before {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#terminal::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .35) 100%); }

#titlebar, #log, #inputbar { position: relative; z-index: 1; }
#titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--faint);
  color: var(--dim);
  font-size: 13px;
  user-select: none;
}
.window-dots { display: flex; flex: 0 0 auto; gap: 6px; }
.window-dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.window-dots i:first-child { background: #3a2b12; }

#log {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 8px;
  scrollbar-color: var(--faint) transparent;
  scrollbar-width: thin;
}
#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--faint); }
.line { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.amber { color: var(--amber); }
.prompt { flex: 0 0 auto; color: var(--green); }
.cursor { display: inline-block; width: 9px; height: 1.1em; vertical-align: -2px; background: var(--green); animation: blink 1s steps(1) infinite; }
.banner { margin: 6px 0 2px; color: var(--green); text-shadow: 0 0 10px rgba(51, 255, 102, .6); }
.banner pre, .art pre { max-width: 100%; overflow: auto; font: inherit; line-height: 1.3; }
.art { margin: 14px 0; color: var(--green); text-shadow: 0 0 8px rgba(51, 255, 102, .45); }
.art pre { font-size: 13px; }
.row {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.row:hover, .row:focus-visible { outline: none; background: rgba(51, 255, 102, .08); }
.row .idx { flex: 0 0 30px; color: var(--faint); }
.row .fn { flex: 1 1 auto; min-width: 0; color: var(--green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { flex: 0 1 auto; max-width: 45%; margin-left: auto; overflow: hidden; color: var(--dim); font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.hint { padding: 6px; color: var(--faint); font-size: 13px; }
.hint b { color: var(--dim); font-weight: normal; }
.content-output { margin: 8px 0 14px; overflow-wrap: anywhere; }
.content-output h1, .content-output h2, .content-output h3 { color: var(--green); font-size: 1em; }
.content-output p { margin: 0 0 10px; }
.content-output pre, .content-output code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-output blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--faint); color: var(--dim); }
.content-output a { color: var(--green); text-decoration-color: var(--dim); text-underline-offset: 3px; }
.content-output img { max-width: 100%; height: auto; border: 1px solid var(--faint); }
.post-title { color: var(--green); font-size: 17px; text-shadow: 0 0 8px rgba(51, 255, 102, .35); }
.moment-inline-body { color: var(--green); }
.inline-image { display: block; max-width: 100%; max-height: 55vh; margin: 8px 0; border: 1px solid var(--faint); object-fit: contain; }
.faint a { color: var(--dim); text-decoration-color: var(--faint); text-underline-offset: 3px; }

#inputbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--faint);
  background: rgba(3, 6, 3, .96);
}
#command {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--green);
  font: inherit;
  caret-color: var(--green);
}
#command::placeholder { color: var(--faint); opacity: 1; }

#moment-notice {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 5px 16px;
  border-top: 1px solid rgba(51, 255, 102, .12);
  background: rgba(3, 6, 3, .96);
  color: var(--green);
  font-size: 12px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
#moment-notice[hidden] { display: none; }
#skip-boot {
  position: absolute;
  right: 14px;
  bottom: 66px;
  z-index: 25;
  padding: 5px 12px;
  border: 1px solid var(--faint);
  border-radius: 20px;
  background: rgba(3, 6, 3, .95);
  color: var(--dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#skip-boot:hover, #skip-boot:focus-visible { outline: none; border-color: var(--dim); color: var(--green); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes flick { 0%, 100% { opacity: 1; } 97.5% { opacity: .96; } 98% { opacity: 1; } }
#terminal { animation: flick 7s infinite; }

@media (max-width: 640px) {
  body { padding: 0; font-size: 14px; }
  #terminal { width: 100%; height: 100dvh; border-right: 0; border-left: 0; border-radius: 0; }
  #log { padding: 12px 12px 8px; }
  .banner pre { font-size: 10px; }
  .row { gap: 7px; padding: 5px 2px; }
  .row .idx { flex-basis: 24px; }
  .row .meta { max-width: 39%; font-size: 11px; }
  #command { font-size: 16px; }
  #moment-notice { padding-right: 12px; padding-left: 12px; }
}

@media (max-width: 380px) {
  .row .meta { max-width: 35%; }
  #inputbar { gap: 6px; padding-right: 10px; padding-left: 10px; }
}

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