:root {
  --bg: #0d1117; --chrome: #161b22; --line: #30363d; --text: #d7dde4; --muted: #8b949e;
  --green: #7ee787; --blue: #79c0ff; --cyan: #56d4dd; --yellow: #e3b341; --magenta: #d2a8ff; --red: #ff7b72;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #010409; color: var(--text); font: 15px/1.5 var(--mono); }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.window { display: flex; flex-direction: column; height: 100%; max-width: 1100px; margin: 0 auto; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.titlebar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--chrome); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.dots { display: flex; gap: 6px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; } .dots i:nth-child(3) { background: #28c840; }
.title { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exit { color: var(--muted); text-decoration: none; white-space: nowrap; }
.exit:hover { color: var(--text); text-decoration: underline; }

.screen { flex: 1; overflow-y: auto; padding: 14px 16px 24px; cursor: text; }
.out > div { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.5em; }
.line { display: flex; gap: 1ch; }
.prompt { white-space: nowrap; }
#cmd { flex: 1; min-width: 0; background: transparent; border: 0; padding: 0; color: var(--text); font: inherit; caret-color: var(--green); outline: none; }

/* prompt parts */
.u { color: var(--green); font-weight: 700; } .d { color: var(--blue); font-weight: 700; }

/* output styles */
.muted { color: var(--muted); } .err { color: var(--red); } .ok { color: var(--green); }
.dir { color: var(--blue); font-weight: 700; } .file { color: var(--text); }
.h { color: var(--yellow); font-weight: 700; } .mk { color: var(--muted); }
.b { font-weight: 700; color: #fff; } .code { color: var(--cyan); }
.hit { background: #6e5600; color: #fff; border-radius: 2px; }
.k { color: var(--blue); } .s { color: var(--green); } .n { color: var(--yellow); } .l { color: var(--magenta); }
.hang { padding-left: var(--hang, 2ch); text-indent: calc(-1 * var(--hang, 2ch)); }
.ls { display: flex; flex-wrap: wrap; gap: 0 3ch; }
.cols { display: grid; grid-template-columns: max-content 1fr; gap: 0 3ch; align-items: start; }
.run { all: unset; cursor: pointer; border-radius: 2px; }
.run:hover, .run:focus-visible { text-decoration: underline; outline: none; }
.banner { color: var(--green); font-weight: 700; }

.keys { display: none; gap: 6px; padding: 8px 12px; background: var(--chrome); border-top: 1px solid var(--line); overflow-x: auto; }
.keys button { flex: none; font: inherit; font-size: .85rem; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
@media (max-width: 700px), (pointer: coarse) {
  body { font-size: 13px; }
  .keys { display: flex; }
  .screen { padding: 10px 12px 16px; }
  .title { text-align: left; }
  .exit .long { display: none; }
}
@media (max-width: 1100px) { .window { border: 0; } }
.indent { padding-left: 7ch; }
.out > div.art { white-space: pre; overflow: hidden; }
.bun { color: #d29922; } .olive { color: #8a9a3a; } .pimento { color: #f85149; } .pick { color: #c8a165; } .frill { color: #d2a8ff; } .lettuce { color: #3fb950; } .tomato { color: #f85149; } .cheese { color: #f2cc60; } .meat { color: #b0673a; }