:root {
  color-scheme: dark;
  --ground: #22232d;
  --panel: #282a36;
  --panel2: #2f313f;
  --term: #1e1f29;
  --line: #3b3d4d;
  --ink: #f8f8f2;
  --dim: #9fa3b5;
  --faint: #6272a4;
  --ca: #bd93f9;
  --client: #ff79c6;
  --server: #8be9fd;
  --accent: #ff79c6;
  --ok: #50fa7b;
  --danger: #ff5555;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--ground); color: var(--ink); font-family: var(--sans); }
body { padding: 18px clamp(16px, 2.5vw, 40px) 16px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- compact header ---- */
.top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.top h1 { font-size: 17px; font-weight: 600; font-family: var(--mono); }
.top h1 .dollar { color: var(--accent); }
.top .intro { color: var(--faint); font-size: 12.5px; }
.tabs { display: flex; gap: 6px; margin-left: auto; }
.tab {
  font: 12px/1 var(--mono); color: var(--dim);
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 13px; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ground); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.tab:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.langs { display: flex; gap: 4px; }
.lang {
  font: 10.5px/1 var(--mono); color: var(--faint);
  background: none; border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 9px; cursor: pointer;
}
.lang:hover { color: var(--ink); }
.lang.on { color: var(--ink); border-color: var(--dim); }

/* ---- terminals fill the page ---- */
.terms { display: flex; gap: 14px; flex: 1; margin-top: 14px; min-height: 340px; }
.termwin {
  flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .25s, box-shadow .25s;
}
.termwin.active-ca { border-color: var(--ca); box-shadow: 0 0 18px -8px var(--ca); }
.termwin.active-client { border-color: var(--client); box-shadow: 0 0 18px -8px var(--client); }
.termwin.active-server { border-color: var(--server); box-shadow: 0 0 18px -8px var(--server); }
.termbar {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: var(--panel2); border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}
.termbar .lamp { width: 8px; height: 8px; border-radius: 50%; }
.lamp.who-ca { background: var(--ca); }
.lamp.who-client { background: var(--client); }
.lamp.who-server { background: var(--server); }
.termbar .host { font: 11.5px var(--mono); }
.host.who-ca { color: var(--ca); }
.host.who-client { color: var(--client); }
.host.who-server { color: var(--server); }
.termbar .sub { font: 10px var(--mono); color: var(--faint); }
.fsbtn {
  margin-left: auto; font: 10.5px var(--mono); color: var(--dim);
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
  padding: 4px 9px; cursor: pointer;
}
.fsbtn:hover { color: var(--ink); border-color: var(--dim); }
.fsbtn .cnt { color: var(--ok); }
.termbody {
  background: var(--term); padding: 12px 14px; flex: 1; min-height: 0;
  font: 13px/1.95 var(--mono); overflow: auto; cursor: pointer;
  border-radius: 0 0 6px 6px;
}
.tline { white-space: pre-wrap; word-break: break-all; }
.tline .prompt { font-weight: 700; }
.prompt.who-ca { color: var(--ca); }
.prompt.who-client { color: var(--client); }
.prompt.who-server { color: var(--server); }
.tline.out { color: var(--dim); }
.tline.ok { color: var(--ok); }
.cursor {
  display: inline-block; width: 7px; height: 15px; background: var(--ink);
  vertical-align: -2px; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* ---- speech bubble: the walking commentary ---- */
.bubble {
  position: fixed; z-index: 40; cursor: grab; touch-action: none;
  max-width: min(86vw, 380px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 14px 12px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.9);
  animation: bubin .3s ease;
}
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }
@keyframes bubin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bubble.who-ca { border-color: var(--ca); }
.bubble.who-client { border-color: var(--client); }
.bubble.who-server { border-color: var(--server); }
.bubble .btitle { font: 700 11px var(--mono); letter-spacing: .06em; margin-bottom: 6px; }
.bubble.who-ca .btitle { color: var(--ca); }
.bubble.who-client .btitle { color: var(--client); }
.bubble.who-server .btitle { color: var(--server); }
.bubble .bnote {
  font: 11px/1.7 var(--mono); color: var(--dim); white-space: pre-wrap; word-break: break-all;
  background: var(--term); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 9px; margin-bottom: 8px;
}
.bubble .btext { font-size: 13px; line-height: 1.7; color: var(--ink); }

/* ---- fs mini popup ---- */
.fspop {
  position: fixed; z-index: 41; cursor: grab; touch-action: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 14px 10px 10px; max-width: min(88vw, 340px);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.9);
  font: 11.5px/1.8 var(--mono);
  animation: bubin .25s ease;
}
.fspop .fshead { display: flex; align-items: center; gap: 10px; padding: 0 2px 3px; }
.fshead .ftitle { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.fsminbtn {
  margin-left: auto; font: 11px var(--mono); color: var(--dim);
  background: none; border: 1px solid var(--line); border-radius: 3px;
  padding: 0 7px; cursor: pointer; line-height: 1.5;
}
.fsminbtn:hover { color: var(--ink); border-color: var(--dim); }
.fspop.min { padding: 5px 10px 6px; }
.fspop.min .fshead { padding-bottom: 0; }
.fspop.min .fsbody { display: none; }
.fspop .dirline { color: var(--faint); padding: 1px 4px; }
.fspop .dirline:not(:first-child) { margin-top: 5px; }
.fline {
  position: relative; padding: 1px 4px; border-radius: 3px; color: var(--ink);
  display: flex; align-items: center; gap: 6px; cursor: default;
}
.fline .branch { color: var(--faint); white-space: pre; }
.fline:hover, .fline:focus-within { background: var(--panel2); }
.fline.new .fname-t { color: var(--ok); }
.fline .tag {
  font-size: 9px; letter-spacing: .05em; border-radius: 3px; padding: 1px 5px;
  border: 1px solid var(--line); color: var(--dim); font-family: var(--sans); white-space: nowrap;
}
.fline .tag.private { color: var(--danger); border-color: #6b3a44; }
.fline .tag.cert { color: var(--ca); border-color: #55486e; }
.fline .tag.auto { color: var(--server); border-color: #3d5a66; }
.fpop {
  display: none; position: absolute; left: 8px; top: calc(100% + 4px); z-index: 12;
  background: var(--term); border: 1px solid var(--line); border-radius: 4px;
  padding: 9px 12px; white-space: pre; font: 10.5px/1.7 var(--mono); color: var(--dim);
  max-width: min(84vw, 440px); overflow-x: auto;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.8);
}
.fline:hover .fpop, .fline:focus-within .fpop { display: block; }

/* ---- bottom bar ---- */
.bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bar button {
  font: 13px var(--mono); color: var(--ink); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 4px; padding: 9px 16px; cursor: pointer;
}
.bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bar button:disabled { opacity: .35; cursor: default; }
.stepname { font: 12.5px var(--mono); color: var(--dim); }
.stepname .ph { color: var(--faint); }
.progress { font: 11.5px var(--mono); color: var(--faint); }
.hint { font: 11px var(--mono); color: var(--faint); margin-left: auto; }

@media (max-width: 760px) {
  .terms { flex-direction: column; }
  .termwin { min-height: 240px; }
  .hint { display: none; }
}