@font-face {
  font-family: "Magi Terminal";
  src: url("/assets/jetbrains-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Magi Terminal";
  src: url("/assets/jetbrains-mono-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* The reference's text, colors, and terminal chrome at a readable type size.
   Body rows follow the font, not the screenshot's 3922px-wide canvas.
   Only the decorative 96-column logo scales to its available width. */
.tui-viewport {
  container-type: inline-size;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.tui-screen {
  --tui-bg: #11111b;
  --tui-text: #a6adc8;
  --tui-accent: #cba6f7;
  --tui-cyan: #74c7ec;
  --tui-border: #585b70;
  --tui-column: .6em;
  --tui-row: 1.4em;
  --tui-stroke: 1px;
  background: var(--tui-bg);
  border-radius: inherit;
  color: var(--tui-text);
  font-family: "Magi Terminal", Menlo, Consolas, monospace;
  font-size: calc(clamp(1rem, 1.22cqw, 1.125rem) - 1pt);
  line-height: 1.4;
  font-variant-ligatures: none;
}

.tui-screen p, .tui-screen pre { margin: 0; }
.tui-screen pre {
  padding: 0;
  font: inherit;
  letter-spacing: 0;
  white-space: pre;
  overflow-wrap: normal;
}
.tui-screen b { font-weight: 700; }
.tui-accent { color: var(--tui-accent); }
.tui-cyan { color: var(--tui-cyan); }
.tui-green { color: #a6e3a1; }
.tui-yellow { color: #f9e2af; }
.tui-dim { color: #7f849c; }

.tui-workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 4ch;
}
.tui-main { display: flex; flex-direction: column; min-width: 0; }
.tui-session {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5em 1em;
  padding: var(--tui-row) 1.5ch 0;
}
.tui-welcome {
  container-type: inline-size;
  width: calc(100% - 4ch);
  margin: auto;
  padding-block: calc(2 * var(--tui-row));
}
.tui-screen .tui-logo {
  /* Seamless blocks: fill the row, then restore the 17:37 cell proportions.
     The full 96-column artwork occupies the welcome column's width. */
  font-size: 2.267157cqw;
  line-height: 1;
  letter-spacing: 0;
  width: max-content;
  transform: scaleX(0.765766);
  transform-origin: top left;
  color: var(--tui-accent);
  background: repeating-linear-gradient(90deg,
    #cdd6f4 0 1ch,
    #cba6f7 1ch 2ch,
    #cbaef7 2ch 3ch,
    #ccb6f6 3ch 4ch,
    #ccbef6 4ch 5ch,
    #ccc6f5 5ch 6ch,
    #cdcef5 6ch 7ch);
  background-size: 7ch 100%;
  background-repeat: repeat-x;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Match the TUI's (phase + column) % 7, advancing one column every 83ms.
   Move only the color bands; the Unicode artwork and layout stay fixed. */
@keyframes tui-logo-shimmer {
  from { background-position: 0 0; }
  to { background-position: -7ch 0; }
}

.tui-shimmer-control { display: none; }

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .tui-screen .tui-logo { animation: tui-logo-shimmer 581ms steps(7, end) infinite; }
  .terminal-figure:has(.tui-shimmer-toggle:checked) .tui-logo { animation-play-state: paused; }
  .tui-shimmer-control { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; cursor: pointer; }
  .tui-shimmer-toggle { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
}
.tui-screen .tui-tagline {
  margin-top: var(--tui-row);
  color: var(--tui-accent);
  text-align: center;
}
.tui-screen .tui-rabbit { width: 6ch; margin: var(--tui-row) auto 0; }
.tui-shortcuts { margin-top: var(--tui-row); }
.tui-shortcuts p { white-space: pre-wrap; overflow-wrap: anywhere; }
.tui-help-title { color: var(--tui-accent); font-weight: 700; }
.tui-screen .tui-commands-title { margin-top: var(--tui-row); }
.tui-command { color: var(--tui-cyan); font-weight: 700; }
.tui-screen .tui-invitation { margin-top: var(--tui-row); text-align: center; }

.tui-sidebar {
  display: grid;
  grid-template-rows: 44fr 56fr;
  gap: var(--tui-row);
  padding-block: var(--tui-row);
  min-width: 0;
}
.tui-panel {
  position: relative;
  min-width: 0;
  border: var(--tui-stroke) solid var(--tui-border);
  padding: 0 3ch var(--tui-row) 1.5ch;
}
.tui-panel-title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: -.7em 0 0;
  padding-right: .5ch;
  background: var(--tui-bg);
  color: #7f849c;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0;
}
.tui-file-key { font-weight: 400; }
.tui-file-key > span { display: inline-block; white-space: nowrap; }
.tui-panel > p { overflow-wrap: anywhere; }
.tui-scrollbar {
  position: absolute;
  top: calc(var(--tui-row) / 2);
  bottom: calc(var(--tui-row) / 2);
  right: 1ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1ch;
  color: #7f849c;
}
.tui-scrollbar i { width: var(--tui-stroke); flex: 1; background: var(--tui-accent); }
.tui-tabs { color: #7f849c; }
.tui-tab {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(10 * var(--tui-row));
  margin-bottom: var(--tui-row);
  padding-top: var(--tui-row);
}
.tui-tab-label { width: 1ch; word-break: break-all; text-align: center; }
.tui-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 calc(-1 * var(--tui-row) / 2);
  height: var(--tui-stroke);
  background: #313244;
}
.tui-tab:last-child { height: calc(6 * var(--tui-row)); padding: 0; }
.tui-tab:last-child::after { display: none; }
.tui-tab-active {
  padding: 0;
  border-left: .3em solid var(--tui-cyan);
  background: #313244;
  color: var(--tui-cyan);
  font-weight: 700;
}

.tui-prompt {
  position: relative;
  margin: calc(var(--tui-row) / 2) .25ch;
}
.tui-prompt::before {
  content: "";
  position: absolute;
  /* Join at the text rows' midlines, without vertical border overhangs. */
  inset: calc(var(--tui-row) / 2) 0;
  border: var(--tui-stroke) solid var(--tui-accent);
  border-radius: 4px;
  pointer-events: none;
}
.tui-prompt-top, .tui-prompt-bottom {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35em 1ch;
  padding-inline: 1.25ch;
  overflow-wrap: anywhere;
}
.tui-prompt-top > :not(.tui-rule), .tui-prompt-bottom > :not(.tui-rule) {
  min-width: 0;
  max-width: 100%;
  padding-inline: .25ch;
  background: var(--tui-bg);
}
.tui-rule { flex: 1; min-width: 1ch; }
.tui-cursor {
  display: block;
  margin: .25em 1.25ch;
  width: 2px;
  height: var(--tui-row);
  background: #94e2d5;
}

/* Keep all panels and copy, but reflow before larger text becomes cramped. */
@container (max-width: 68rem) {
  .tui-workspace { grid-template-columns: minmax(0, 1fr) 4ch; }
  .tui-main { grid-column: 1; grid-row: 1; }
  .tui-tabs { grid-column: 2; grid-row: 1 / 3; }
  .tui-sidebar { grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; padding: var(--tui-row) 1ch; }
  .tui-panel { min-height: 10em; }
  .tui-welcome { max-width: 76ch; }
  .tui-prompt::before { inset: 0; }
  .tui-prompt-top, .tui-prompt-bottom { padding-block: .5em; }
  .tui-prompt .tui-rule { display: none; }
  .tui-prompt-top, .tui-prompt-bottom { justify-content: space-between; }
}

@container (max-width: 40rem) {
  .tui-workspace { display: flex; flex-direction: column; }
  .tui-screen { line-height: 1.5; --tui-row: 1.5em; }
  .tui-session { padding-inline: 1ch; }
  .tui-welcome { width: calc(100% - 2ch); padding-block: var(--tui-row); }
  .tui-shortcuts p:not(.tui-help-title) { margin-top: .5em; }
  .tui-command { display: block; }
  .tui-shortcuts p { white-space: normal; }
  .tui-tabs { display: flex; flex-wrap: wrap; order: 1; margin-top: var(--tui-row); }
  .tui-tab, .tui-tab:last-child { flex: 1 1 auto; height: auto; min-height: 3em; margin: 0; padding: .5em; }
  .tui-tab-label { width: auto; word-break: normal; }
  .tui-tab::after { display: none; }
  .tui-tab-active { border-left: 0; border-bottom: 3px solid var(--tui-cyan); }
  .tui-sidebar { order: 2; grid-template-columns: minmax(0, 1fr); }
  .tui-panel { min-height: 8em; }
  .tui-file-key { display: block; }
  .tui-prompt-top > b { flex-basis: 100%; }
}

@media (forced-colors: active) {
  .tui-screen .tui-logo { background: none; -webkit-text-fill-color: currentColor; }
  .tui-panel, .tui-prompt::before, .tui-tab-active { border-color: CanvasText; }
  .tui-scrollbar i, .tui-cursor { background: CanvasText; }
}