/* portfolio.css — terminal portfolio styles */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=VT323&display=swap');

:root {
  --bg: #000000;
  --bg-soft: #050a07;
  --fg: #00cc66;
  --fg-bright: #6effa8;
  --fg-dim: #1f6b40;
  --fg-faint: #0e3a23;
  --accent: #00cc66;
  --warn: #ffcc66;
  --err: #ff5e5e;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #000; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

#root { min-height: 100vh; }

/* ── screen container ──────────────────────────────────────────────────── */
.screen {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
}

.content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 36px 80px;
}

/* ── CRT mode (default) ────────────────────────────────────────────────── */
.mode-crt {
  background:
    radial-gradient(ellipse 90% 60% at 50% 50%, #021509 0%, #000 75%),
    #000;
  color: var(--fg);
}
.mode-crt .content {
  text-shadow: 0 0 1px var(--accent), 0 0 6px var(--accent-faint);
}

/* phosphor glow */
.mode-crt.glow .content,
.mode-crt.glow .topbar,
.mode-crt.glow .footer {
  filter: drop-shadow(0 0 0.5px var(--accent-faint));
}
.mode-crt.glow .accent,
.mode-crt.glow .banner,
.mode-crt.glow .banner-small {
  text-shadow: 0 0 2px var(--accent), 0 0 8px var(--accent-dim), 0 0 16px var(--accent-faint);
}

/* scanlines */
.scanlines::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
}
.scanlines::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1001;
  background: linear-gradient(rgba(0,255,120,0.02), rgba(0,255,120,0.02));
  animation: scan-flicker 6s steps(60) infinite;
}
@keyframes scan-flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.85; }
  98%           { opacity: 1; }
  99%           { opacity: 0.92; }
}

/* vignette overlay (CRT corners) */
.mode-crt .vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.85) 100%);
}
.vignette { display: none; }
.mode-crt .vignette { display: block; }

/* ── Minimal mode ──────────────────────────────────────────────────────── */
.mode-minimal {
  background: #0a0d0b;
  color: #c9d4cc;
}
.mode-minimal .content { text-shadow: none; }
.mode-minimal .accent { color: var(--accent); }
.mode-minimal .dim { color: #5b6a60; }
.mode-minimal .banner,
.mode-minimal .banner-small { color: var(--accent); text-shadow: none; }
.mode-minimal .prompt-user { color: var(--accent); }
.mode-minimal .prompt-cwd { color: #8aa499; }
.mode-minimal .prompt-cmd { color: #e0ebe4; }
.mode-minimal .stat-dot { background: var(--accent); }
.mode-minimal .ps-row:hover,
.mode-minimal .contact-row:hover { background: rgba(0,204,102,0.06); }

/* ── Matrix mode ───────────────────────────────────────────────────────── */
.mode-matrix {
  background: #000;
  color: #5cff9b;
}
.mode-matrix .content {
  text-shadow: 0 0 4px var(--accent), 0 0 10px rgba(0,255,128,0.45);
  font-weight: 500;
}
.mode-matrix .accent { color: #b8ffd1; }
.mode-matrix .banner,
.mode-matrix .banner-small {
  text-shadow: 0 0 3px var(--accent), 0 0 12px var(--accent-dim), 0 0 24px var(--accent-faint);
}
.matrix-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.mode-matrix .matrix-rain { opacity: 0.7; }

/* ── boot (inline at top of terminal) ──────────────────────────────────── */
.boot-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0 40px;
  margin-top: 0;
  transition: margin-top 1100ms cubic-bezier(0.65, 0, 0.35, 1);
}
.boot-wrap.boot-exit {
  margin-top: -100vh;
}
.boot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
}
.boot-lines { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.boot-line {
  font-size: 13px;
  color: var(--fg);
  opacity: 0;
  animation: fadeIn 0.18s ease forwards;
}
.boot-line.dim { color: var(--fg-dim); }
.boot-line.accent { color: var(--fg-bright); font-weight: 500; }
.banner-boot {
  margin: 18px 0 0;
  align-self: flex-start;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.banner {
  margin: 28px 0 0;
  font-size: 12px;
  line-height: 1.05;
  color: var(--fg-bright);
  white-space: pre;
  font-weight: 700;
  letter-spacing: 0;
  animation: fadeIn 0.4s ease forwards;
  overflow-x: auto;
}

/* ── topbar / banner-small ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 28px;
  border-bottom: 1px dashed var(--fg-faint);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.banner-small {
  margin: 0;
  font-size: 9px;
  line-height: 1.05;
  color: var(--fg-bright);
  white-space: pre;
  font-weight: 700;
}
.topbar-meta {
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── prompts ───────────────────────────────────────────────────────────── */
.prompt-block { margin: 28px 0 32px; }
.prompt-line {
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.prompt-user  { color: var(--accent); font-weight: 500; }
.prompt-sep   { color: var(--fg-dim); }
.prompt-cwd   { color: var(--fg-bright); }
.prompt-cmd   { color: var(--fg); }
.prompt-comment { color: var(--fg-dim); font-style: italic; margin-left: 8px; }
.prompt-output { padding: 14px 0 0; }

/* ── shared utilities ──────────────────────────────────────────────────── */
.dim     { color: var(--fg-dim); }
.accent  { color: var(--fg-bright); }
.bracket { color: var(--fg-dim); }

/* status dot */
.stat-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.stat-idle .stat-dot { background: var(--fg-dim); box-shadow: none; animation: none; }

/* ── whoami ────────────────────────────────────────────────────────────── */
.whoami { display: flex; flex-direction: column; gap: 14px; }
.whoami-head { font-size: 14px; }
.whoami-head .accent { font-size: 18px; font-weight: 700; padding: 0 4px; }
.whoami-groups { margin-top: 4px; }
.bio {
  margin: 0;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.7;
}
.domains {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 4px;
  border-left: 1px dashed var(--fg-faint);
  padding-left: 14px;
}
.domain {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.domain-dot { color: var(--fg-bright); }
.domain-name { color: var(--fg); font-weight: 500; min-width: 130px; }
.domain-sub { color: var(--fg-dim); }

/* ── ps table (projects) ───────────────────────────────────────────────── */
.ps-table {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  border: 1px dashed var(--fg-faint);
  border-radius: 2px;
  overflow: hidden;
  /* Prevent scroll anchoring: the dynamic centering spacer in scroll-mode
     resizes the table on every frame; without this, browsers try to "keep
     content in view" and push scrollY forward, causing runaway feedback. */
  overflow-anchor: none;
}
html, body { overflow-anchor: none; }
.ps-row {
  display: grid;
  grid-template-columns: 60px 56px minmax(180px, 1.4fr) 1fr 0.8fr 1.4fr;
  gap: 12px;
  padding: 8px 14px;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px dashed var(--fg-faint);
  transition: background 0.1s ease;
}
.ps-row:last-child { border-bottom: 0; }
.ps-row:hover { background: rgba(0, 204, 102, 0.05); }
.ps-head {
  background: rgba(0, 204, 102, 0.04);
  cursor: default;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.ps-head:hover { background: rgba(0, 204, 102, 0.04); }
.ps-pid  { color: var(--fg-bright); font-weight: 500; font-variant-numeric: tabular-nums; }
.ps-stat { color: var(--accent); display: flex; align-items: center; }
.ps-name { color: var(--fg); font-weight: 500; }
.ps-tag, .ps-lang, .ps-meta { font-size: 12px; }

.ps-item.open .ps-row { background: rgba(0, 204, 102, 0.08); }

/* Scroll-mode: identical layout to click-mode, just auto-opens rows as
   they pass a trigger line in the viewport. No pinning, no transforms —
   the page scrolls naturally. */
.ps-table-scroll .ps-row { cursor: pointer; }

/* Animated wrapper: collapses to 0 height with grid-rows trick.
   Always mounted so heavy children (canvases, slideshows) don't remount. */
.ps-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 0.8, 0.32, 1),
              opacity 0.22s ease;
}
.ps-detail-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
}
.ps-detail-inner {
  overflow: hidden;
  min-height: 0;
}
.ps-detail {
  padding: 16px 18px 18px 74px;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px dashed var(--fg-faint);
  border-top: 1px dashed var(--fg-faint);
  font-size: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.ps-detail-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* ── project media ──────────────────────────────────────────────────── */
.proj-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  height: 100%;
}
.proj-media-cmd { font-size: 12px; }
.proj-image-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--fg-faint);
  border-radius: 4px;
  padding: 6px;
  background: rgba(0,0,0,0.35);
}
.proj-image {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  filter: contrast(1.05) saturate(0.95);
}
.proj-image-caption { padding: 2px 4px 4px; font-size: 12px; }

/* slideshow */
.proj-slideshow-frame {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
}
.proj-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  filter: contrast(1.05) saturate(0.95);
  will-change: transform, opacity;
}
.proj-slide-queued {
  transform: translateX(100%);
  opacity: 0;
  transition-duration: 0ms !important;
}
.proj-slide-in {
  transform: translateX(0);
  opacity: 1;
}
.proj-slide-out {
  transform: translateX(-100%);
  opacity: 0;
}

/* dsp visualizer */
.dsp-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--fg-faint);
  border-radius: 4px;
  padding: 8px;
  background: rgba(0,0,0,0.5);
  flex: 1 1 auto;
  min-height: 0;
}
.dsp-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-height: 0;
}
.dsp-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.dsp-label {
  color: var(--fg);
  font-weight: 600;
}
.dsp-sub { font-size: 11px; }
.dsp-canvas {
  width: 100%;
  min-height: 64px;
  flex: 1 1 0;
  display: block;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(0,0,0,0.0)),
    rgba(0,0,0,0.35);
  border-radius: 2px;
  border: 1px solid var(--fg-faint);
}

/* project thumbnails (small inline pair) */
.ps-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.ps-thumbs-single {
  grid-template-columns: minmax(0, 60%);
  justify-content: center;
}
.ps-thumbs-full {
  grid-template-columns: 1fr;
  justify-content: stretch;
}
.ps-thumb-natural img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.ps-thumb {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ps-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--fg-faint);
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
  filter: contrast(1.05) saturate(0.95);
  display: block;
}
.ps-thumb figcaption {
  font-size: 11px;
  padding-left: 2px;
}

/* IMU axis legend chips (inline in dsp-sub) */
.imu-key {
  display: inline-block;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 2px;
  margin-right: 2px;
}
.imu-x { color: #f87171; }
.imu-y { color: #34d399; }
.imu-z { color: #60a5fa; }
.proj-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.proj-thumb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--fg-faint);
  background: #021509;
  border-radius: 2px;
  overflow: hidden;
}
.proj-thumb svg {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 200 / 130;
}
.proj-thumb-label {
  font-size: 10px;
  padding: 4px 6px;
  border-top: 1px dashed var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-thumb-loop {
  grid-column: 1 / -1;
  border-color: var(--fg-dim);
  box-shadow: 0 0 0 1px var(--fg-faint), 0 0 12px rgba(0,204,102,0.15);
}
.proj-thumb-loop-tag {
  margin-left: auto;
  color: var(--fg-bright);
  font-size: 9px;
  letter-spacing: 0.08em;
  animation: pulse 1.4s ease-in-out infinite;
}

@media (max-width: 760px) {
  .ps-detail {
    grid-template-columns: 1fr;
    padding-left: 18px;
    gap: 14px;
  }
  .proj-thumb-loop { grid-column: 1 / -1; }
}
.ps-detail-cmd { font-size: 12px; }
.ps-desc {
  margin: 0;
  max-width: 80ch;
  line-height: 1.6;
}
.ps-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg);
  max-width: 80ch;
}
.ps-details-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
  align-items: baseline;
}
.ps-details-bullet { font-size: 11px; line-height: 1.4; }
.ps-stack { font-size: 12px; }
.chip {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  background: rgba(0,204,102,0.08);
  border: 1px solid var(--fg-faint);
  border-radius: 2px;
  color: var(--fg);
  font-size: 11px;
}
.ps-actions { font-size: 12px; }
.link {
  color: var(--fg-bright);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-dim);
  cursor: pointer;
}
.link:hover { color: #fff; border-bottom-color: var(--fg-bright); }

/* ── top grid (whoami + contact side-by-side) ──────────────────────────── */
.top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
}
.top-grid-left, .top-grid-right { min-width: 0; }
.top-grid.top-grid-solo { grid-template-columns: 1fr; }
.top-grid-left .prompt-block:first-child,
.top-grid-right .prompt-block:first-child { margin-top: 0; }

@media (max-width: 880px) {
  .top-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px 28px;
  font-size: 13px;
  line-height: 1.55;
}
.skill-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 4 per row: subtract 3 column gaps (28px each = 84px) split across 4 cols */
  flex: 0 0 calc((100% - 3 * 28px) / 4);
  max-width: calc((100% - 3 * 28px) / 4);
}
.skill-head {
  font-family: var(--mono);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skill-folder {
  color: var(--accent);
  font-weight: 500;
}
.skill-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.skill-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--fg);
}
.skill-bullet {
  color: var(--fg-faint);
  font-family: var(--mono);
  font-size: 12px;
}
.skill-name { word-break: break-word; }

@media (max-width: 760px) {
  .skills-grid {
    gap: 14px 18px;
  }
  .skill-col {
    flex: 0 0 calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }
}

/* ── rullm demo ────────────────────────────────────────────────────────── */
.rullm-demo {
  margin-top: 14px;
  border: 1px solid var(--fg-faint);
  border-radius: 6px;
  background: #050a07;
  font-family: var(--mono);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,204,102,0.04), 0 8px 24px rgba(0,0,0,0.45);
}
.rullm-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0,204,102,0.04);
  border-bottom: 1px dashed var(--fg-faint);
  font-size: 11px;
  color: var(--fg-dim);
}
.rullm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rullm-dot-r { background: #ff5f56; }
.rullm-dot-y { background: #ffbd2e; }
.rullm-dot-g { background: #27c93f; }
.rullm-title { margin-left: 8px; letter-spacing: 0.04em; text-transform: lowercase; }
.rullm-screen {
  padding: 14px 16px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  height: 360px;
  overflow: hidden;
  white-space: pre-wrap;
}
.rullm-line { white-space: pre-wrap; }
.rullm-ps { color: var(--accent); margin-right: 4px; }
.rullm-ps-user { color: var(--fg-bright); }
.rullm-cmd { color: var(--fg-bright); }
.rullm-sys { color: var(--fg-dim); font-size: 12px; }
.rullm-stats { color: var(--accent); opacity: 0.75; font-size: 12px; }
.rullm-prompt { color: var(--fg-bright); }
.rullm-stream { color: var(--fg); }
.rullm-cursor {
  display: inline-block;
  color: var(--accent);
  margin-left: 1px;
  transform: translateY(-1px);
}

/* ── contact ───────────────────────────────────────────────────────────── */
.contact-table {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--fg-faint);
  font-size: 13px;
  max-width: 600px;
}
.contact-row {
  display: grid;
  grid-template-columns: 80px 70px 1fr;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px dashed var(--fg-faint);
  align-items: center;
  color: inherit;
  transition: background 0.1s ease;
}
.contact-row:last-child { border-bottom: 0; }
.contact-head {
  background: rgba(0,204,102,0.04);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
.contact-link {
  cursor: pointer;
}
.contact-link:hover {
  background: rgba(0,204,102,0.08);
}
.contact-link .arrow {
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  display: inline-block;
}
.contact-link:hover .arrow {
  opacity: 1;
  transform: translateX(4px);
}
.c-proto  { color: var(--fg-bright); }
.c-state  { color: var(--accent); display: flex; align-items: center; font-size: 11px; }
.c-handle { color: var(--fg); min-width: 0; display: flex; align-items: center; gap: 4px; }
.c-handle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-handle .arrow { flex: 0 0 auto; }
.contact-foot { padding: 12px 14px; border-top: 1px dashed var(--fg-faint); font-size: 12px; }

/* ── footer ────────────────────────────────────────────────────────────── */
.footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px dashed var(--fg-faint);
}
.footer-meta {
  margin-top: 12px;
  font-size: 11px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── cursor ────────────────────────────────────────────────────────────── */
.cursor {
  display: inline-block;
  color: var(--fg-bright);
  animation: blink 1.05s steps(2) infinite;
  margin-left: 2px;
  text-shadow: 0 0 6px var(--accent);
}
.cursor-block { font-family: var(--mono); }
@keyframes blink { 50% { opacity: 0; } }

/* ── split terminals ───────────────────────────────────────────────────── */
.split-wrap {
  position: relative;
  margin: 0;
}
.split-container {
  width: 100%;
}
.split-pane {
  flex-shrink: 0;
  min-width: 0;
  transition: width 0.05s linear, transform 0.05s linear, padding 0.05s linear, margin 0.05s linear;
}
.split-pane > .prompt-block {
  border-left: 1px dashed var(--fg-faint);
  padding-left: 14px;
}
.split-top > .prompt-block { border-left-color: var(--fg-faint); }
.split-bot > .prompt-block { border-left-color: var(--fg-faint); }
.split-hint {
  position: sticky;
  bottom: 8px;
  text-align: center;
  font-size: 11px;
  pointer-events: none;
  transition: opacity 0.15s linear;
  margin-top: -16px;
  padding: 6px;
}
@media (max-width: 760px) {
  /* Disable split on narrow screens */
  .split-container { flex-direction: column !important; gap: 0 !important; }
  .split-pane { width: 100% !important; transform: none !important; padding: 0 !important; margin: 0 !important; }
  .split-hint { display: none; }
}
@media (max-width: 760px) {
  .content { padding: 20px 16px 60px; }
  .ps-row {
    grid-template-columns: 50px 40px 1fr;
    gap: 8px;
    font-size: 12px;
  }
  .ps-tag, .ps-lang, .ps-meta { display: none; }
  .ps-detail { padding-left: 18px; }
  .contact-row {
    grid-template-columns: 70px 60px 1fr;
    gap: 6px;
    font-size: 12px;
  }
  .topbar { gap: 12px; }
  .banner { font-size: 8px; }
  .banner-small { font-size: 6px; }
  .domain-name { min-width: 110px; }
}