@font-face { font-family: "Fira Code"; src: url("../fonts/fira-code-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../fonts/fira-code-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #0d141b;
  --bar: #121922;
  --line: #2a3440;
  --edge: #3a4555;
  --text: #eceff3;
  --muted: #8f9bab;
  --faint: #7d8897;
  --green: #62ea8e;
  --blue: #5aa9f5;
  --blue-hi: #8cc4fb;
  --sel: #1f3a5c;

  /* one comp pixel at 1536 wide, scaled with the viewport */
  --px: clamp(0.84px, calc(100vw / 1536), 1.2px);
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --arabic: "Figtree", "Noto Naskh Arabic", serif; /* Figtree has no Arabic glyphs; it only fronts the stack */
  --fs-mono: calc(18 * var(--px));
  --gutter: calc(40 * var(--px));
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(24 * var(--px)); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 var(--fs-mono)/1.5 var(--mono);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sel); color: #fff; }
a { color: var(--blue); text-decoration: none; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hi); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
p, dl, dd, ul, h2, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
code { font: inherit; color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dim { color: var(--muted); }

html { scrollbar-color: var(--edge) var(--ground); }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 4px; border: 2px solid var(--ground); }
.scroll::-webkit-scrollbar-track { background: transparent; }

.skip { position: absolute; left: var(--gutter); top: -40px; z-index: 5; background: var(--text); color: var(--ground); padding: 6px 10px; font: 500 14px var(--sans); }
.skip:focus { top: 8px; }
.skip:hover { color: var(--ground); }

/* frame */
.topbar {
  height: calc(62 * var(--px));
  padding: 0 calc(38 * var(--px)) 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: #121821;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.brand { color: var(--text); font-size: calc(24 * var(--px)); font-weight: 400; letter-spacing: -.005em; }
.brand:hover { color: #fff; text-decoration: none; }
.nav { display: flex; gap: calc(38 * var(--px)); font-size: calc(17 * var(--px)); }
.nav a { color: var(--text); padding: 6px 0; }
.nav a:hover { color: var(--blue-hi); text-decoration: none; }

/* terminal */
.tmux {
  margin: calc(30 * var(--px)) var(--gutter) 0;
  border: 1px solid var(--edge);
  border-radius: calc(3 * var(--px));
  background: var(--ground);
  box-shadow: 0 18px 48px -18px rgb(0 0 0 / .55);
}
/* height follows width (the comp ratio), capped by a short window; it never grows with page height */
.panes { display: grid; grid-template-columns: 838fr 619fr; height: clamp(420px, min(calc(676 * var(--px)), calc(100svh - 170px)), 820px); }
.pane { position: relative; min-width: 0; min-height: 0; }
.pane--main { border-right: 1px solid var(--edge); }
.pane::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; pointer-events: none; transition: border-color .25s var(--ease); }
.pane.is-active::after { border-color: var(--green); }
.scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(22 * var(--px)) calc(22 * var(--px)) calc(28 * var(--px)) calc(23 * var(--px)); scrollbar-width: thin; }

.ps1 { color: var(--green); }
.tilde { color: var(--blue); }
.cmd { white-space: pre-wrap; font-weight: 500; }
.block + .block { margin-top: calc(34 * var(--px)); }
.cmd + * { margin-top: calc(24 * var(--px)); }
.out + .kv, .out + .out { margin-top: .75em; }
.pane a:not([data-cmd]), .log a:not([data-cmd]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 55%, transparent); }

.kv { display: grid; grid-template-columns: 15.5ch 1fr; row-gap: calc(5 * var(--px)); }
.kv dt { color: var(--muted); }
.kv--wide { grid-template-columns: 20.2ch 1fr; row-gap: calc(11 * var(--px)); margin-top: calc(26 * var(--px)); }
.kv--gap { row-gap: .55em; }

/* the prompt: a real input under a mirror that draws the block cursor */
.prompt { display: flex; gap: 1.6ch; margin-top: calc(31 * var(--px)); font-weight: 500; }
.line { position: relative; flex: 1; min-width: 0; font-weight: 400; }
.line input {
  position: absolute; inset: 0; width: 100%;
  font: inherit; color: transparent; caret-color: transparent; background: none; border: 0; padding: 0; margin: 0;
}
.line input:focus { outline: none; }
.mirror { white-space: pre; pointer-events: none; }
.cursor { display: inline-block; width: 1ch; height: 1.14em; line-height: 1.14em; vertical-align: -.2em; background: var(--text); color: var(--ground); animation: blink 1.06s steps(1) infinite; }
.line:not(.is-focused) .cursor { background: none; box-shadow: inset 0 0 0 1px var(--text); animation: none; }
.line.is-typing .cursor { animation: none; }
@keyframes blink { 50% { opacity: 0; } }

.cmds { margin-top: calc(18 * var(--px)); line-height: calc(31.5 * var(--px)); }
.cmds li { display: grid; grid-template-columns: 15.5ch 1fr; }
.cmds a { justify-self: start; }
.cmds a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 60%, transparent); }
.chev { color: var(--blue); margin-right: .3ch; }
.desc { color: var(--muted); }

/* generated output */
.log .block.is-new > * { animation: rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
.err { color: #f08c84; }
.note { color: var(--muted); }
.ar-line { font-family: var(--arabic); font-size: 1.22em; line-height: 1.9; direction: rtl; text-align: right; }
.out-list li { padding-left: 2ch; text-indent: -2ch; }
.out-list li::before, .items li::before { content: "– "; color: var(--faint); }

.status {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(44 * var(--px));
  padding: 0 calc(14 * var(--px)) 0 calc(21 * var(--px));
  border-top: 1px solid var(--edge);
  background: var(--bar);
  font-size: calc(14.5 * var(--px));
  color: #c9d1db;
}
.windows { display: flex; align-items: center; gap: calc(18 * var(--px)); color: var(--muted); }
.win { font: inherit; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.win .idx { margin-right: calc(14 * var(--px)); }
.win.is-active { color: #c9d1db; }
.win.is-active .idx { color: var(--green); }
.win:hover { color: var(--text); }
.sep { width: 1px; height: calc(18 * var(--px)); background: var(--edge); }
.clock time { margin-left: calc(14 * var(--px)); font-variant-numeric: tabular-nums; color: #c9d1db; }

/* sections below the shell */
.sect { padding: calc(78 * var(--px)) var(--gutter) 0; }
.sect h2 {
  font: 500 calc(40 * var(--px))/1 var(--sans);
  letter-spacing: -.02em;
  padding-bottom: calc(29 * var(--px));
  border-bottom: 1px solid var(--line);
}
.sect-body { padding-top: calc(72 * var(--px)); }
.now-grid { display: grid; grid-template-columns: minmax(0, 838fr) minmax(0, 619fr); }
.kv--now { grid-template-columns: 13ch minmax(0, 62ch); row-gap: calc(22 * var(--px)); align-content: start; padding-right: calc(40 * var(--px)); }
.kv--side { grid-template-columns: 13ch 1fr; padding-left: calc(23 * var(--px)); }
.items li { padding-left: 2ch; text-indent: -2ch; }
.items--dim li { color: #c3cad4; }

.verse { margin: calc(120 * var(--px)) var(--gutter) 0; padding: calc(56 * var(--px)) 0; border-block: 1px solid var(--line); text-align: center; }
.verse blockquote { font-family: var(--arabic); font-size: calc(34 * var(--px)); line-height: 1.9; color: var(--text); }
.verse blockquote span { display: inline-block; padding: 0 1.2ch; }
.gist { margin-top: calc(22 * var(--px)); color: var(--muted); }
.gist .dim { color: var(--faint); }

.lead { font: 400 calc(22 * var(--px))/1.45 var(--sans); max-width: 40ch; margin-bottom: calc(34 * var(--px)); color: var(--text); text-wrap: balance; }
.kv--contact { grid-template-columns: 13ch 1fr; row-gap: calc(10 * var(--px)); }

.foot {
  display: flex; justify-content: space-between; gap: 2ch; flex-wrap: wrap;
  margin: calc(120 * var(--px)) var(--gutter) 0;
  padding: calc(22 * var(--px)) 0 calc(36 * var(--px));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: calc(15 * var(--px));
}
.ar { font-family: var(--arabic); margin-left: 1ch; font-size: 1.1em; }

/* small laptops and tablets in landscape */
@media (min-width: 901px) and (max-width: 1240px) {
  .kv--wide { grid-template-columns: 16.5ch 1fr; }
  .kv, .cmds li { grid-template-columns: 13ch 1fr; }
}

/* phones and narrow tablets: panes stack, the shell grows with the page */
@media (max-width: 900px) {
  :root { --px: 1px; --fs-mono: 14.5px; --gutter: 16px; }
  .topbar { height: 54px; padding: 0 16px; }
  .brand { font-size: 19px; }
  .nav { gap: 18px; font-size: 15px; }
  .nav a { padding: 12px 0; }
  .tmux { margin-top: 16px; }
  .panes { grid-template-columns: 1fr; height: auto; }
  .pane--main { border-right: 0; border-bottom: 1px solid var(--edge); }
  .pane--main .scroll { max-height: none; overflow: visible; }
  .scroll { padding: 16px 14px 20px; }
  .kv { grid-template-columns: 10.5ch 1fr; }
  .out br { display: none; }
  .kv--wide { grid-template-columns: 1fr; row-gap: 0; }
  .kv--wide dd { margin-bottom: 8px; }
  .cmds { line-height: 1.5; }
  .cmds li { grid-template-columns: 10.5ch 1fr; align-items: baseline; }
  .cmds a { display: inline-block; line-height: 44px; }
  .status { height: auto; min-height: 44px; padding: 0 8px; font-size: 12.5px; gap: 12px; }
  .wname, .session { display: none; }
  .win { padding: 12px 8px; }
  .win .idx { margin-right: 0; }
  .windows { gap: 6px; flex-wrap: wrap; }
  .sect { padding-top: 56px; }
  .sect h2 { font-size: 30px; }
  .sect-body { padding-top: 28px; }
  .now-grid { grid-template-columns: 1fr; row-gap: 22px; }
  .kv--now, .kv--side, .kv--contact { grid-template-columns: 1fr; row-gap: 4px; padding: 0; }
  .kv--now dd, .kv--side dd, .kv--contact dd { margin-bottom: 14px; }
  .verse { margin-top: 72px; padding: 40px 0; }
  .verse blockquote { font-size: 24px; }
  .lead { font-size: 19px; }
  .foot { margin-top: 72px; }
}
@media (max-width: 420px) {
  .nav { gap: 14px; font-size: 14px; }
  .brand { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; }
  .log .block.is-new > * { animation: none; }
  .pane::after { transition: none; }
}