@font-face {
  font-family:'VT323';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/vt323-latin-400-normal.woff2') format('woff2');
}

:root {
  font-family:var(--site-font, 'VT323', monospace);
  color:#b1ca96;
  background:#080d08;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  font-weight:400;
  font-size:calc(23px * var(--font-scale, 1));
  line-height:1.25;
  color-scheme:dark;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px dashed var(--bright,#b0df82);
  outline-offset:5px;
}

::selection {
  background:#b0df82;
  color:#080d08;
}

p,h1,h2,h3,dl,dd {
  margin:0;
}

h1,h2,h3 {
  font:inherit;
}

button {
  cursor:pointer;
}

kbd {
  font:inherit;
}

[hidden] {
  display:none!important;
}

#app {
  --bg:#080d08;
  --text:#b1ca96;
  --bright:#b0df82;
  --muted:#8a9c77;
  --line:#415334;
  --selection:#b0df82;
  --selection-text:#10170b;
  --bar:#b0df82;
  --bar-text:#10170b;
  background:var(--bg);
  color:var(--text);
  min-height:100svh;
}

#app[data-palette=ansi] {
  --text:#d0d8d0;
  --bright:#7fe34b;
  --muted:#9eafa3;
  --line:#3e5349;
  --selection:#73cfce;
  --selection-text:#081110;
  --bar:#71ce35;
  --bar-text:#081110;
}

.terminal {
  max-width:1440px;
  min-height:100svh;
  margin:auto;
  padding:24px 40px 12px;
  display:flex;
  flex-direction:column;
}

.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:24px;
}

.wordmark {
  font-size:calc(42px * var(--font-scale, 1));
  line-height:1;
  color:var(--bright);
  letter-spacing:-1px;
}

.wordmark span {
  margin-left:4px;
}

.hostname {
  color:var(--muted);
}

.wide-break {
  display:none;
}

.intro {
  padding-bottom:20px;
}

.intro h1 {
  font-size:calc(28px * var(--font-scale, 1));
  line-height:1.13;
  max-width:850px;
  letter-spacing:.15px;
}

.monitor-summary {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:20px;
}

.muted {
  color:var(--muted);
}

.highlight {
  color:var(--bright);
}

.top-nav {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 26px;
  border-top:1px solid var(--line);
  padding:12px 0;
  color:var(--muted);
}

.top-nav a {
  display:flex;
  gap:8px;
  align-items:center;
}

.top-nav kbd::before {
  content:'[';
}

.top-nav kbd::after {
  content:']';
}

.top-nav a[aria-current=page] {
  color:var(--bright);
}

.nav-tail {
  margin-left:auto;
  color:var(--muted);
}

main {
  flex:1;
  min-width:0;
  outline-offset:5px;
}

.section-bar {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  background:var(--bar);
  color:var(--bar-text);
  padding:3px 10px;
  min-height:32px;
}

.section-bar h2 {
  font-size:calc(25px * var(--font-scale, 1));
}

.section-bar h2:focus {
  outline:0;
}

.section-bar span {
  font-size:calc(21px * var(--font-scale, 1));
}

.processes {
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  table-layout:fixed;
}

.processes th {
  font-weight:400;
  color:var(--muted);
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:4px 10px 9px;
}

.processes th:first-child {
  width:88px;
  text-align:right;
}

.processes th.user-column {
  width:140px;
}

.processes th.state-column {
  width:156px;
}

.processes td {
  padding:0 10px;
  height:40px;
}

.processes .pid {
  text-align:right;
  color:var(--bright);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.project-link {
  display:flex;
  align-items:center;
  min-height:40px;
  color:var(--bright);
  overflow-wrap:anywhere;
}

/* The full-row highlight indicates focus for the selected process. */
.processes .selected .project-link:focus-visible {
  outline:none;
}

.processes .selected td {
  background:var(--selection);
  color:var(--selection-text);
}

.processes .selected a {
  color:var(--selection-text);
}

.mobile-stage {
  display:none;
}

.selection-panel {
  margin-top:24px;
  padding:18px 0 22px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 24px;
}

.selection-label {
  grid-column:1/-1;
  display:flex;
  gap:20px;
  color:var(--muted);
}

.selection-label span:first-child {
  color:var(--bright);
}

.selection-panel h3 {
  font-size:calc(29px * var(--font-scale, 1));
  color:var(--bright);
}

.selection-panel p {
  grid-column:1;
  max-width:65ch;
}

/* All project text contributes to the same grid cell's intrinsic height.
   Only the selected copy is visible/readable. This keeps selection changes
   stable at every viewport and font size without clipping longer summaries. */
.selection-name-stack,
.selection-summary-stack {
  display:grid;
  align-content:start;
}

.selection-name-stack>span,
.selection-summary-stack>span {
  grid-area:1 / 1;
  overflow-wrap:anywhere;
}

.selection-reserve {
  visibility:hidden;
  pointer-events:none;
  user-select:none;
}

.selection-panel>a {
  grid-column:2;
  grid-row:2/4;
  align-self:center;
  color:var(--bright);
  text-decoration:underline;
  text-underline-offset:5px;
}

.key-hint {
  color:var(--muted);
  font-size:calc(21px * var(--font-scale, 1));
}

.key-hint kbd {
  color:var(--text);
}

.key-hint>span {
  padding:0 8px;
}

.section-intro {
  margin:23px 0;
}

.profiles {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.profile {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,1fr);
  grid-template-areas:'bar bar' 'copy portrait';
  border:1px solid var(--line);
  min-width:0;
}

.profile-bar {
  grid-area:bar;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:6px 12px;
  color:var(--bright);
  border-bottom:1px solid var(--line);
  font-size:calc(21px * var(--font-scale, 1));
}

.profile-copy {
  grid-area:copy;
  padding:18px 16px 22px;
}

.profile-copy h3 {
  font-size:calc(31px * var(--font-scale, 1));
  color:var(--bright);
  margin-bottom:18px;
}

.profile-copy p {
  max-width:26ch;
}

.profile-copy dl {
  margin-top:32px;
}

.profile-copy dl>div+div {
  margin-top:18px;
}

.profile-copy dt {
  color:var(--muted);
}

.profile-copy dd {
  color:var(--bright);
}

.portrait {
  grid-area:portrait;
  border-left:1px solid var(--line);
  padding:14px;
  min-height:310px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.portrait-placeholder {
  position:relative;
  min-height:280px;
  width:100%;
  display:grid;
  place-items:center;
  font-size:calc(18px * var(--font-scale, 1));
  color:var(--muted);
  background-image:radial-gradient(var(--line) .65px,transparent .7px);
  background-size:12px 12px;
}

.portrait-placeholder>span:not(.portrait-cross) {
  background:var(--bg);
  padding:12px 2px;
  white-space:nowrap;
}

.portrait-cross {
  position:absolute;
  font-family:monospace;
}

.top-left {
  top:0;
  left:0;
}

.top-right {
  top:0;
  right:0;
}

.bottom-left {
  bottom:0;
  left:0;
}

.bottom-right {
  bottom:0;
  right:0;
}

.pixel-portrait {
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  image-rendering:pixelated;
}

.ascii-portrait {
  margin:0;
  padding:0;
  font:8px/1 monospace;
  white-space:pre;
  color:var(--bright);
}

.shared-note {
  margin:23px 0;
  color:var(--muted);
}

.document {
  max-width:760px;
  padding:24px 0 40px;
  line-height:1.35;
}

.file-path {
  color:var(--muted);
  margin-bottom:30px;
}

.document h3 {
  font-size:calc(31px * var(--font-scale, 1));
  line-height:1.18;
  color:var(--bright);
  margin-bottom:24px;
}

.document p+p {
  margin-top:20px;
}

.text-link {
  display:inline-block;
  margin-top:30px;
  color:var(--bright);
  text-decoration:underline;
  text-underline-offset:5px;
}

.key-map {
  margin:28px 0;
}

.key-map>div {
  display:grid;
  grid-template-columns:210px 1fr;
  gap:22px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}

.key-map dt {
  color:var(--bright);
}

.preferences {
  border:1px solid var(--line);
  margin:28px 0 0;
  padding:16px;
}

.preferences legend {
  padding:0 7px;
  color:var(--bright);
}

.preferences label {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:40px;
}

.preferences .select-label {
  margin-top:12px;
  flex-wrap:wrap;
}

.preferences input {
  accent-color:var(--bright);
  width:19px;
  height:19px;
  flex-shrink:0;
}

.preferences select {
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:0;
  padding:5px 9px;
  max-width:100%;
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 24px;
  padding-top:12px;
  margin-top:8px;
}

.command-bar {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.command-bar a {
  display:flex;
  align-items:center;
  gap:3px;
}

.command-bar kbd {
  color:var(--text);
}

.command-bar a span {
  padding:1px 6px;
  background:var(--bright);
  color:var(--bg);
}

.command-bar a[aria-current=page] span {
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-note {
  font-size:calc(20px * var(--font-scale, 1));
  color:var(--muted);
}

.skip-link {
  position:absolute;
  left:20px;
  top:12px;
  transform:translateY(-200%);
  z-index:2;
  background:#b0df82;
  color:#080d08;
  padding:7px 12px;
}

.skip-link:focus {
  transform:translateY(0);
}

.no-script {
  padding:40px;
}

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

@media(min-width:1600px) {
  .terminal {
    padding-top:50px;
  }
}

@media(max-width:1050px) {
  .profiles {
    grid-template-columns:1fr;
  }
  .profile {
    grid-template-columns:1fr 40%;
  }
  .portrait {
    min-height:260px;
  }
  .portrait-placeholder {
    min-height:230px;
  }
  .profile-copy dl {
    display:flex;
    flex-wrap:wrap;
    gap:18px 40px;
  }
  .profile-copy dl>div+div {
    margin-top:0;
  }
  .profile-copy p {
    max-width:40ch;
  }
  .nav-tail {
    display:none;
  }
}

@media(max-width:700px) {
  .terminal {
    padding:22px 22px 18px;
  }
  .site-header {
    padding-bottom:30px;
  }
  .intro h1 {
    font-size:calc(29px * var(--font-scale, 1));
  }
  .wide-break {
    display:none;
  }
  .user-column {
    display:none;
  }
  .processes th.state-column {
    width:120px;
  }
  .processes th:first-child {
    width:72px;
  }
  .selection-panel {
    margin-top:58px;
  }
  .selection-panel>a {
    grid-column:1;
    grid-row:auto;
    justify-self:start;
    margin-top:12px;
  }
  .key-map>div {
    grid-template-columns:150px 1fr;
    gap:15px;
  }
  .footer-note {
    display:none;
  }
  .profile {
    grid-template-columns:1fr 43%;
  }
}

@media(max-width:480px) {
  :root {
    font-size:calc(21px * var(--font-scale, 1));
  }
  .terminal {
    padding:18px 14px;
  }
  .wordmark {
    font-size:calc(36px * var(--font-scale, 1));
  }
  .hostname {
    font-size:calc(19px * var(--font-scale, 1));
  }
  .site-header {
    gap:8px;
  }
  .intro h1 {
    font-size:calc(28px * var(--font-scale, 1));
  }
  .monitor-summary {
    margin-top:22px;
    gap:9px;
  }
  .top-nav {
    gap:10px 22px;
  }
  .section-bar {
    align-items:flex-start;
    flex-wrap:wrap;
    padding:4px 8px;
  }
  .section-bar h2 {
    font-size:calc(23px * var(--font-scale, 1));
  }
  .section-bar span {
    font-size:calc(19px * var(--font-scale, 1));
  }
  .state-column {
    display:none;
  }
  .processes th:first-child {
    width:68px;
  }
  .processes th,.processes td {
    padding-left:7px;
    padding-right:7px;
  }
  .project-link {
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    padding:7px 0;
    min-height:60px;
  }
  .mobile-stage {
    display:block;
    font-size:calc(18px * var(--font-scale, 1));
    line-height:1.2;
  }
  .selection-panel {
    margin-top:44px;
    grid-template-columns:1fr;
  }
  .key-hint {
    font-size:calc(19px * var(--font-scale, 1));
  }
  .key-hint>span {
    padding:0 3px;
  }
  .profile {
    grid-template-columns:1fr;
    grid-template-areas:'bar' 'portrait' 'copy';
  }
  .portrait {
    border-left:0;
    border-bottom:1px solid var(--line);
    min-height:230px;
  }
  .portrait-placeholder {
    min-height:210px;
  }
  .profile-copy dl {
    gap:25px;
  }
  .key-map>div {
    grid-template-columns:1fr;
    gap:3px;
    padding:12px 0;
  }
  .preferences {
    padding:12px;
  }
  .preferences label {
    align-items:flex-start;
  }
  .preferences input {
    margin-top:4px;
  }
  .command-bar {
    gap:10px;
  }
  .site-footer {
    padding-top:22px;
  }
  .document h3 {
    font-size:calc(28px * var(--font-scale, 1));
  }
}

@media(pointer:coarse) {
  .top-nav a,.command-bar a,.text-link,.monitor-summary>a,#read-project {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .preferences label {
    min-height:44px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
  }
}