/* 123 Cheese dev tools: a plain terminal. System mono, no glow, scanlines or flicker. */
:root {
  --bg: #0b0b0c;
  --ink: #e8e8ea;
  --dim: #8b8b90;
  --faint: rgba(255, 255, 255, 0.08);
  --yellow: #f7c63d; /* prompt, from the studio's three dots */
  --red: #e8322a;
  --blue: #6f95ff;   /* the studio blue, lifted for contrast on black */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  background: var(--bg); color: var(--ink);
  font: 14px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
}
.term { max-width: 84ch; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 16px max(48px, env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .term { padding-top: 48px; padding-left: 32px; padding-right: 32px; } }

/* Title bar: where you are and the way out */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 28px; border-bottom: 1px solid var(--faint); color: var(--dim); font-size: 12px; }
.bar .dots { display: inline-flex; gap: 6px; margin-right: 10px; vertical-align: -1px; }
.bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.bar a { color: var(--dim); }

/* Prompt lines are the headings */
h1, h2 { margin: 28px 0 8px; font: inherit; font-weight: 600; color: var(--ink); }
h1 { margin-top: 0; }
.ps { color: var(--yellow); user-select: none; }
.ps::after { content: " "; }
p, ul, ol, dl { margin: 0 0 8px; }
ul, ol { padding-left: 3ch; }
li::marker { color: var(--dim); }
.dim { color: var(--dim); }
.out { padding-left: 2ch; }
ul.out, ol.out { padding-left: 4ch; } /* markers line up under the text above */

a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--ink); } }

/* Tool listing, like `ls -l` */
.ls { display: grid; grid-template-columns: max-content 1fr; gap: 4px 3ch; padding-left: 2ch; }
.ls dt a { font-weight: 600; }
@media (max-width: 480px) { .ls { grid-template-columns: 1fr; gap: 0; } .ls dd { margin: 0 0 10px; } }
.ls dd { margin: 0; color: var(--dim); }

/* Commands to copy */
.cmd { position: relative; margin: 8px 0 12px; padding: 12px 64px 12px 14px; border: 1px solid var(--faint); border-radius: 6px; background: rgba(255, 255, 255, 0.03); }
.cmd code { display: block; white-space: pre-wrap; word-break: break-word; font: inherit; }
.cmd code::before { content: "$ "; color: var(--yellow); user-select: none; }
.copy {
  position: absolute; top: 6px; right: 6px; min-width: 52px; min-height: 32px;
  appearance: none; border: 1px solid var(--faint); border-radius: 4px; background: var(--bg);
  color: var(--dim); font: 12px var(--mono); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .copy:hover { color: var(--ink); } }

table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
th, td { text-align: left; vertical-align: top; padding: 6px 2ch 6px 0; border-bottom: 1px solid var(--faint); }
th { color: var(--dim); font-weight: 400; }
.scroll { overflow-x: auto; }

/* Resting prompt with a cursor. A plain blink, nothing more. */
.cursor { display: inline-block; width: 1ch; height: 1.2em; margin-left: 2px; vertical-align: -0.2em; background: var(--ink); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }