:root {
  --bg: #050812;
  --bg-deep: #03060d;
  --panel: rgba(5, 9, 18, .72);
  --panel-strong: rgba(5, 9, 18, .88);
  --panel-soft: rgba(11, 14, 25, .68);
  --line: rgba(146, 158, 199, .16);
  --line-strong: rgba(181, 142, 255, .30);
  --text: #d7d2cc;
  --text-strong: #f0ece5;
  --muted: #8f8b90;
  --muted-2: #6d7080;
  --accent: #b58eff;
  --accent-bright: #d2b7ff;
  --green: #92d879;
  --shadow: 0 24px 70px rgba(0,0,0,.30);
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: var(--bg-deep);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background:
    radial-gradient(circle at 86% 18%, rgba(78, 56, 132, .12), transparent 32rem),
    radial-gradient(circle at 12% 56%, rgba(34, 44, 87, .13), transparent 30rem),
    linear-gradient(180deg, #040711 0%, #060914 45%, #04070e 100%);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; }

::selection {
  background: rgba(181, 142, 255, .28);
  color: #fff;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: .34;
  background-image:
    repeating-linear-gradient(100deg, transparent 0 71px, rgba(112, 132, 191, .10) 72px, transparent 73px 132px),
    repeating-linear-gradient(100deg, transparent 0 191px, rgba(181, 142, 255, .08) 192px, transparent 193px 262px);
  background-size: 310px 560px, 470px 760px;
  animation: rain-drift 12s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 94%, transparent);
}

.rain::after {
  content: "";
  position: absolute;
  inset: -20% 0;
  background-image: repeating-linear-gradient(104deg, transparent 0 96px, rgba(157, 172, 214, .08) 97px, transparent 98px 171px);
  background-size: 380px 690px;
  animation: rain-drift-slow 18s linear infinite;
}

@keyframes rain-drift {
  to { background-position: -75px 560px, 44px 760px; }
}

@keyframes rain-drift-slow {
  to { background-position: 60px 690px; }
}

/* Top OS-style panel ----------------------------------------------------- */
.top-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 52px;
  border-bottom: 1px solid rgba(150, 158, 191, .12);
  background: linear-gradient(180deg, rgba(3, 6, 13, .88), rgba(4, 7, 14, .68));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px rgba(255,255,255,.015) inset;
}

.top-panel__utility {
  position: absolute;
  left: clamp(16px, 3vw, 34px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 22px;
  transform: translateY(-50%);
  white-space: nowrap;
}

.home-button,
.help-button,
.top-nav__link {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home-button {
  padding: 4px 1px;
  color: var(--accent-bright);
  font-size: 1.05rem;
}

.panel-identity {
  color: #e5e0d8;
  font-size: .94rem;
  letter-spacing: -.01em;
}

.top-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translate(-50%, -50%);
}

.top-nav__link {
  position: relative;
  padding: 10px 3px 11px 15px;
  color: #a8a4a2;
  font-size: .92rem;
  transition: color 120ms ease;
}

.top-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.top-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 8px rgba(181,142,255,.35);
  transition: width 140ms ease;
}

.top-nav__link:hover,
.top-nav__link:focus-visible,
.top-nav__link.is-active { color: var(--text-strong); }

.top-nav__link.is-active::before { content: "> "; }
.top-nav__link.is-active::after { width: 42px; }

.help-button {
  position: absolute;
  top: 50%;
  right: clamp(16px, 3vw, 34px);
  transform: translateY(-50%);
  padding: 6px 0;
  color: #b0abb2;
  font-size: .91rem;
}

.help-button span { color: var(--accent); }

.home-button:hover,
.home-button:focus-visible,
.help-button:hover,
.help-button:focus-visible { color: var(--accent-bright); }

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 1px solid rgba(181,142,255,.72);
  outline-offset: 3px;
}

/* Main shell ------------------------------------------------------------ */
.site-main {
  width: min(1340px, calc(100% - 56px));
  margin: 0 auto;
  padding: 92px 0 34px;
}

.terminal-window {
  overflow: hidden;
  border: 1px solid rgba(149, 160, 196, .20);
  border-radius: 17px;
  background: rgba(4, 8, 17, .58);
  box-shadow: var(--shadow), 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.terminal-tabs {
  position: relative;
  height: 51px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 20, .52);
}

.terminal-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  min-width: 230px;
  padding: 0 17px;
  border-right: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, rgba(16, 18, 29, .76), rgba(10, 13, 22, .68));
  color: #e9e5df;
  font-size: .91rem;
  box-shadow: 0 1px rgba(255,255,255,.025) inset;
}

.terminal-tab__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent-bright);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.terminal-tab__close {
  margin-left: auto;
  color: #737681;
  font-size: 1rem;
}

.terminal-tabs__dots {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-54%);
  color: var(--accent);
  letter-spacing: 3px;
  font-size: 1rem;
}

.terminal-stage {
  min-height: 490px;
  position: relative;
}

.pane {
  min-height: 490px;
  animation: pane-in 150ms ease both;
}

@keyframes pane-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

.pane-inner {
  min-height: 490px;
  padding: 38px 46px;
}

/* Whoami --------------------------------------------------------------- */
.pane--whoami {
  display: grid;
  grid-template-columns: minmax(0, 42%) 1px minmax(0, 58%);
}

.whoami-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 36px 40px 28px 42px;
  background: linear-gradient(90deg, rgba(3,7,15,.82), rgba(3,7,15,.66));
}

.whoami-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.whoami-id strong {
  color: var(--text-strong);
  font-size: 1.08rem;
  letter-spacing: .01em;
}

.whoami-id span {
  color: #8f8992;
  font-size: .86rem;
}

.identity-rule {
  width: min(320px, 82%);
  height: 1px;
  margin: 13px 0 20px;
  background: linear-gradient(90deg, rgba(181,142,255,.32), rgba(139,151,191,.16) 70%, transparent);
}

.whoami-prose {
  max-width: 490px;
  color: #c8c2bd;
  font-size: .93rem;
  line-height: 1.72;
}

.whoami-prose p { margin: 0 0 18px; }
.whoami-prose p:last-child { margin-bottom: 0; }

.social-links {
  display: flex;
  gap: 22px;
  margin-top: auto;
  padding-top: 27px;
}

.social-links a {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #aaa6a1;
  text-decoration: none;
  transition: color 120ms ease, transform 120ms ease;
}

.social-links svg { width: 20px; height: 20px; }

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--accent-bright);
  transform: translateY(-1px);
}

.social-links a::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: -31px;
  z-index: 4;
  width: max-content;
  max-width: 280px;
  padding: 3px 7px;
  border: 1px solid rgba(181,142,255,.12);
  border-radius: 5px;
  background: rgba(5,8,16,.92);
  color: #8f8997;
  font-size: .69rem;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 100ms ease, transform 100ms ease;
}

.social-links a:hover::after,
.social-links a:focus-visible::after { opacity: 1; transform: none; }

.whoami-divider {
  position: relative;
  z-index: 3;
  background: linear-gradient(to bottom, transparent 3%, rgba(181,142,255,.48) 17%, rgba(151,165,203,.34) 50%, rgba(181,142,255,.48) 83%, transparent 97%);
}

.whoami-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(181,142,255,.10), 0 0 13px rgba(181,142,255,.55);
}

.whoami-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #050810;
}

.whoami-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(5,8,16,.46), transparent);
  pointer-events: none;
}

.whoami-visual picture,
.whoami-visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.whoami-visual img {
  object-fit: cover;
  object-position: center 44%;
}

/* Projects ------------------------------------------------------------- */
.path-heading {
  margin: 0 0 26px;
  color: #aaa4aa;
  font-size: .91rem;
}

.ls-list { display: grid; }

.ls-row {
  display: grid;
  grid-template-columns: 24px minmax(110px, 150px) minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: 8px;
  min-height: 45px;
  padding: 10px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #c6c1bd;
  text-align: left;
  text-decoration: none;
  transition: background 110ms ease, color 110ms ease;
}

.ls-row[href],
.ls-row--button { cursor: pointer; }

.ls-row[href]:hover,
.ls-row[href]:focus-visible,
.ls-row--button:hover,
.ls-row--button:focus-visible {
  background: rgba(181,142,255,.045);
  color: var(--text-strong);
}

.ls-type { color: #8f8a91; }
.ls-type--link { color: var(--accent-bright); }
.ls-type--dir { color: #d6c276; }
.ls-name { color: #e5dfd8; }
.ls-description { color: #918d8d; }
.ls-destination {
  color: #686b77;
  font-size: .78rem;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 110ms ease, transform 110ms ease;
}
.ls-row:hover .ls-destination,
.ls-row:focus-visible .ls-destination { opacity: 1; transform: none; }

.ls-legend {
  display: flex;
  gap: 30px;
  margin: 28px 8px 0;
  color: #686b76;
  font-size: .75rem;
}

.projects-pane { padding-top: 34px; }

/* Fastfetch ------------------------------------------------------------ */
.fastfetch-pane {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(380px, 1fr);
  gap: 52px;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.fastfetch-art {
  display: flex;
  justify-content: flex-end;
  color: #9f80d9;
  text-shadow: 0 0 12px rgba(181,142,255,.15);
}

.fastfetch-art img {
  display: block;
  width: min(100%, 240px);
  height: auto;
  opacity: .95;
}

.fastfetch-title { color: var(--accent-bright); }
.fastfetch-rule {
  width: 210px;
  height: 1px;
  margin: 5px 0 14px;
  background: linear-gradient(90deg, rgba(181,142,255,.55), transparent);
}
.fastfetch-data dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
}
.fastfetch-data dt { color: #a98ae1; }
.fastfetch-data dd { margin: 0; color: #cac5c1; }
.fastfetch-data .stack-break { grid-column: 1 / -1; height: 7px; }

/* Nano ----------------------------------------------------------------- */
.pane--now { padding: 25px 31px; }
.nano-editor {
  display: flex;
  min-height: 440px;
  height: 100%;
  flex-direction: column;
  border: 1px solid rgba(148,158,193,.13);
  background: rgba(4,7,14,.46);
}
.nano-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 7px 10px;
  background: #b69ae4;
  color: #11131a;
  font-size: .82rem;
}
.nano-titlebar strong { text-align: center; font-weight: 700; }
.nano-titlebar span:last-child { text-align: right; color: rgba(17,19,26,.62); }
.nano-body {
  flex: 1;
  padding: 28px 32px;
  color: #c9c4c0;
  font-size: .91rem;
  line-height: 1.72;
}
.nano-body h3 {
  margin: 0 0 8px;
  color: var(--accent-bright);
  font-size: .91rem;
  font-weight: 500;
}
.nano-body p { margin: 0 0 24px; }
.nano-status {
  padding: 6px 10px;
  text-align: center;
  color: #aaa3ac;
  font-size: .78rem;
}

/* Internal directories ------------------------------------------------- */
.directory-pane { max-width: 900px; }
.back-command {
  margin-top: 30px;
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: #86709f;
  cursor: pointer;
}
.back-command:hover,
.back-command:focus-visible { color: var(--accent-bright); }
.leaf-copy { max-width: 650px; color: #aaa5a0; }

/* Prompt --------------------------------------------------------------- */
.terminal-prompt {
  display: flex;
  align-items: center;
  min-height: 47px;
  padding: 0 20px;
  border-top: 1px solid rgba(147,161,203,.10);
  background: transparent;
  color: #d7d2ce;
}

.prompt-prefix {
  flex: 0 0 auto;
  color: var(--accent-bright);
  white-space: nowrap;
}

.terminal-prompt input {
  min-width: 0;
  flex: 1;
  height: 38px;
  padding: 0 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ece8e1;
  caret-color: transparent;
}

.terminal-prompt input:focus-visible { outline: 0; }

.prompt-cursor {
  width: 8px;
  height: 15px;
  margin-left: -2px;
  background: var(--accent);
  opacity: .82;
  animation: cursor-blink 1.05s steps(1) infinite;
}

.terminal-prompt:focus-within .prompt-cursor { opacity: 1; }

@keyframes cursor-blink { 50% { opacity: .12; } }

.terminal-stage.is-cleared .pane { display: none !important; }
.terminal-stage.is-cleared::after {
  content: "";
  display: block;
  min-height: 490px;
}

/* Lower preview dock --------------------------------------------------- */
.preview-grid {
  display: grid;
  grid-template-columns: 1.35fr .73fr 1.14fr 1fr;
  gap: 16px;
  margin-top: 27px;
}

.preview-card {
  min-width: 0;
  min-height: 214px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(149,160,196,.18);
  border-radius: 12px;
  background: rgba(5,8,16,.59);
  color: #bbb6b3;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(0,0,0,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}

.preview-card:hover,
.preview-card:focus-visible {
  border-color: rgba(181,142,255,.30);
  background: rgba(7,10,19,.70);
  transform: translateY(-1px);
}

.preview-card > header {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  min-height: 37px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(149,160,196,.10);
  color: #e0dcd5;
  font-size: .78rem;
}
.preview-card > header span:first-child,
.preview-card > header span:last-child { color: #a884e9; }
.preview-card > header span:last-child { letter-spacing: 2px; }
.preview-card > header strong { font-weight: 500; }

.preview-card__body {
  min-height: 137px;
  padding: 14px 15px;
  font-size: .68rem;
  line-height: 1.55;
}

.preview-card > footer {
  min-height: 36px;
  padding: 9px 13px;
  border-top: 1px solid rgba(149,160,196,.09);
  color: #aa85e6;
  font-size: .66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-card > footer i {
  display: inline-block;
  width: 6px;
  height: 10px;
  background: #b78ff7;
  vertical-align: -1px;
}

.mini-projects { display: grid; gap: 5px; }
.mini-projects div {
  display: grid;
  grid-template-columns: 14px 68px 1fr;
  gap: 5px;
  min-width: 0;
}
.mini-projects b { color: #cfb674; font-weight: 400; }
.mini-projects strong { color: #d6d0c9; font-weight: 400; }
.mini-projects span { overflow: hidden; color: #858187; white-space: nowrap; text-overflow: ellipsis; }

.stack-map {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #a8a2a5;
}
.stack-map span::first-letter { color: var(--green); }

.mini-fastfetch {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 9px;
  align-items: center;
}
.mini-fastfetch pre {
  margin: 0;
  color: #9b7dd2;
  font: inherit;
  font-size: .67rem;
  line-height: 1.25;
}
.mini-fastfetch dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  margin: 0;
}
.mini-fastfetch dt { color: #9b7ed0; }
.mini-fastfetch dd { margin: 0; color: #8f8b8d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mini-now { color: #918c8f; }
.mini-now .mini-comment { color: #9f84c9; margin-bottom: 5px; }
.mini-now p { margin: 0 0 7px; }

/* Bottom status panel -------------------------------------------------- */
.status-panel {
  position: relative;
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 3vw, 38px);
  border-top: 1px solid rgba(149,160,196,.13);
  background: linear-gradient(180deg, rgba(5,8,15,.60), rgba(3,6,12,.82));
  color: #b89de0;
  font-size: .86rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.status-panel__state {
  color: #77747a;
  letter-spacing: .04em;
}

.moxie-button {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b89de0;
  cursor: pointer;
}

.moxie-button img {
  width: 82px;
  height: 46px;
  object-fit: contain;
  object-position: center;
}

.moxie-button:hover,
.moxie-button:focus-visible { color: var(--accent-bright); }

/* Help ----------------------------------------------------------------- */
.help-dialog {
  width: min(720px, calc(100% - 32px));
  padding: 0;
  border: 1px solid rgba(181,142,255,.26);
  border-radius: 12px;
  background: rgba(5,8,16,.96);
  color: #c8c3c0;
  box-shadow: 0 26px 90px rgba(0,0,0,.58);
}
.help-dialog::backdrop {
  background: rgba(1,3,7,.64);
  backdrop-filter: blur(3px);
}
.help-dialog form > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 15px;
  border-bottom: 1px solid var(--line);
}
.help-dialog form > header strong { color: var(--accent-bright); }
.help-dialog form > header button {
  padding: 3px 6px;
  border: 0;
  background: transparent;
  color: #85818b;
  cursor: pointer;
}
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 24px 28px 18px;
}
.help-grid h2 {
  margin: 0 0 12px;
  color: #a587d4;
  font-size: .8rem;
  font-weight: 500;
}
.help-grid dl { margin: 0; }
.help-grid dl div {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 10px;
  padding: 4px 0;
}
.help-grid dt { color: #d8d2cc; }
.help-grid dd { margin: 0; color: #7f7c81; }
.help-note {
  margin: 0 28px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #74717a;
  font-size: .75rem;
}

.noscript-note {
  position: fixed;
  left: 50%;
  bottom: 58px;
  z-index: 70;
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(181,142,255,.18);
  background: #090b12;
  color: #b6afb3;
  font-size: .75rem;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1120px) {
  .panel-identity { display: none; }
  .top-nav { gap: 17px; }
  .site-main { width: min(100% - 34px, 1040px); }
  .pane--whoami { grid-template-columns: minmax(0, 44%) 1px minmax(0, 56%); }
  .whoami-copy { padding: 32px 30px 26px; }
  .preview-grid { grid-template-columns: 1.2fr .78fr 1fr; }
  .preview-card--now { display: none; }
}

@media (max-width: 840px) {
  body { font-size: 14px; }
  .top-panel { height: 48px; }
  .top-panel__utility { left: 16px; }
  .help-button { right: 16px; font-size: 0; }
  .help-button span { font-size: 1rem; }
  .top-nav { gap: 11px; }
  .top-nav__link { padding-left: 12px; font-size: .82rem; }
  .site-main { width: calc(100% - 24px); padding-top: 72px; }
  .terminal-tabs { height: 46px; }
  .terminal-tab { min-width: 190px; }
  .terminal-stage, .pane { min-height: 0; }
  .pane--whoami {
    grid-template-columns: 1fr;
    grid-template-rows: 245px auto;
  }
  .whoami-divider { display: none; }
  .whoami-visual { grid-row: 1; }
  .whoami-copy { grid-row: 2; min-height: 390px; padding: 28px 28px 24px; }
  .whoami-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 35px;
    background: linear-gradient(transparent, rgba(3,7,15,.80));
  }
  .whoami-visual img { object-position: center 38%; }
  .whoami-prose { max-width: none; }
  .social-links { margin-top: 25px; padding-top: 0; }
  .pane-inner { min-height: 540px; padding: 30px 25px; }
  .ls-row { grid-template-columns: 20px 110px 1fr; }
  .ls-destination { display: none; }
  .fastfetch-pane { grid-template-columns: 150px 1fr; gap: 27px; }
  .fastfetch-art pre { font-size: .78rem; }
  .pane--now { min-height: 540px; padding: 18px; }
  .nano-editor { min-height: 505px; }
  .nano-titlebar { grid-template-columns: auto 1fr auto; gap: 8px; }
  .preview-grid { grid-template-columns: 1fr 1fr; }
  .preview-card--fastfetch { display: none; }
  .status-panel { grid-template-columns: 1fr auto; }
  .status-panel__state { display: none; }
}

@media (max-width: 590px) {
  .top-panel__utility { left: 12px; }
  .home-button { font-size: .98rem; }
  .top-nav { gap: 5px; }
  .top-nav__link { padding: 9px 3px 10px 10px; font-size: .72rem; }
  .top-nav__link.is-active::after { width: 30px; }
  .help-button { right: 11px; }
  .site-main { width: calc(100% - 16px); }
  .terminal-window { border-radius: 12px; }
  .terminal-tab { min-width: 158px; padding: 0 12px; }
  .terminal-tabs__dots { right: 12px; }
  .pane--whoami { grid-template-rows: 218px auto; }
  .whoami-copy { min-height: 420px; padding: 24px 20px 22px; }
  .whoami-prose { font-size: .84rem; line-height: 1.65; }
  .identity-rule { margin-bottom: 17px; }
  .social-links a::after { display: none; }
  .terminal-prompt { padding: 0 11px; font-size: .72rem; }
  .prompt-prefix { font-size: 0; }
  .prompt-prefix::after { content: "~$"; font-size: .78rem; }
  .ls-row { grid-template-columns: 18px 92px 1fr; min-height: 54px; padding: 8px 3px; font-size: .79rem; }
  .ls-legend { flex-direction: column; gap: 4px; }
  .fastfetch-pane { display: block; padding-top: 28px; }
  .fastfetch-art { display: none; }
  .fastfetch-data dl { grid-template-columns: 88px 1fr; gap: 8px; }
  .nano-titlebar span:last-child { display: none; }
  .nano-titlebar { grid-template-columns: auto 1fr; }
  .nano-titlebar strong { text-align: right; }
  .nano-body { padding: 24px 17px; font-size: .82rem; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-card--stack-map { display: none; }
  .preview-card { min-height: 190px; }
  .status-panel { min-height: 54px; padding: 0 14px; }
  .moxie-button img { width: 65px; height: 42px; }
  .moxie-button span { display: none; }
  .help-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .help-grid dl div { grid-template-columns: 145px 1fr; }
  .help-note { margin: 0 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rain,
  .rain::after,
  .prompt-cursor { animation: none; }
  .pane { animation: none; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* JS sizes this input in ch units so the block cursor follows the command. */
.terminal-prompt input {
  flex: 0 1 auto;
  width: 1ch;
  max-width: calc(100% - 220px);
}

.pane[hidden] { display: none !important; }

/* v120: restore the original detailed Fastfetch line art ---------------- */
.fastfetch-pane {
  grid-template-columns: minmax(300px, .9fr) minmax(380px, 1fr);
  gap: 46px;
  max-width: 1040px;
}

.fastfetch-art {
  justify-content: center;
}

.fastfetch-art img {
  width: min(100%, 360px);
  max-height: 390px;
  object-fit: contain;
  opacity: 1;
}

.mini-fastfetch__art {
  width: 94px;
  object-fit: contain;
  opacity: .94;
}


/* v122: layout polish and bottom dock cleanup -------------------------- */
body {
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: calc(100dvh - 52px);
  padding-bottom: 20px;
}

.terminal-window {
  background: rgba(4, 8, 17, .46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.projects-pane {
  min-height: 490px;
  display: flex;
  flex-direction: column;
  padding-top: 34px;
}

.projects-pane .ls-list {
  align-content: start;
}

.ls-legend {
  margin-top: auto;
  padding-top: 22px;
}

.fastfetch-pane {
  grid-template-columns: minmax(220px, .68fr) minmax(380px, 1fr);
  gap: 44px;
  max-width: 880px;
}

.fastfetch-art {
  justify-content: center;
  align-items: center;
}

.fastfetch-art img {
  width: min(100%, 270px);
  max-height: 320px;
  object-fit: contain;
}

.nano-titlebar {
  background: #a995d0;
  color: #171922;
}

.nano-titlebar span:last-child {
  color: rgba(23, 25, 34, .58);
}

.preview-grid {
  margin-top: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.preview-card {
  min-height: 224px;
  display: flex;
  flex-direction: column;
  background: rgba(5,8,16,.48);
}

.preview-card__body {
  flex: 1;
}

.preview-card > footer {
  min-height: 32px;
  display: flex;
  align-items: center;
  color: #797585;
}

.preview-card > footer i {
  display: none;
}

.preview-card--projects > footer::before {
  content: '@ = external link   d = directory';
}

.preview-card--stack-map > footer::before {
  content: 'section overview';
}

.preview-card--fastfetch > footer::before {
  content: 'system snapshot';
}

.preview-card--now > footer::before {
  content: 'current notes';
}

.mini-projects {
  display: grid;
  gap: 8px;
}

.mini-projects div {
  grid-template-columns: 14px 76px 1fr;
  gap: 8px;
}

.mini-fastfetch {
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
}

.mini-fastfetch__art {
  width: 52px;
  justify-self: center;
  margin-top: 2px;
}

.mini-fastfetch dl {
  gap: 4px 8px;
}

.mini-now p {
  margin: 0 0 9px;
}

.status-panel {
  margin-top: 0;
}

.moxie-button {
  gap: 0;
}

.moxie-button img {
  width: 74px;
  height: 42px;
}

@media (max-width: 1120px) {
  .preview-grid {
    grid-template-columns: 1.15fr .9fr 1fr 1fr;
  }
}

@media (max-width: 840px) {
  .site-main {
    min-height: calc(100dvh - 48px);
  }

  .preview-grid {
    margin-top: 18px;
  }

  .preview-card > footer {
    min-height: 30px;
  }
}

@media (max-width: 590px) {
  .preview-card > footer::before {
    content: '';
  }

  .preview-card > footer {
    min-height: 18px;
    padding-top: 0;
    padding-bottom: 0;
  }
}


/* v123: visible rain, prompt fix, true minimized-window dock ------------ */
.rain {
  z-index: 0;
  opacity: .52;
  background-image:
    repeating-linear-gradient(101deg, transparent 0 68px, rgba(128, 149, 211, .16) 69px, transparent 70px 126px),
    repeating-linear-gradient(101deg, transparent 0 176px, rgba(181, 142, 255, .12) 177px, transparent 178px 242px);
}

.rain::after {
  background-image:
    repeating-linear-gradient(104deg, transparent 0 86px, rgba(157, 172, 214, .13) 87px, transparent 88px 154px);
}

.site-main {
  position: relative;
  z-index: 1;
}

.status-panel {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
}

.terminal-prompt {
  gap: 4px;
}

.terminal-prompt input {
  flex: 0 1 auto;
  width: 1ch;
  max-width: calc(100% - 220px);
  padding: 0;
  margin: 0;
}

.prompt-cursor {
  margin-left: 0;
}

.preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-height: 224px;
}

.preview-card[hidden] {
  display: none !important;
}

.preview-card {
  min-height: 224px;
  height: 224px;
}

.preview-card > footer {
  min-height: 32px;
  padding: 7px 13px;
  color: #777482;
  font-size: .65rem;
}

.preview-card > footer::before {
  content: none !important;
}

.mini-whoami {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #918c8f;
}

.mini-whoami strong {
  color: #d8d2cc;
  font-weight: 500;
}

.mini-whoami > span {
  color: #8c8491;
}

.mini-whoami p {
  margin: 9px 0 0;
  color: #858187;
}

.mini-fastfetch {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.mini-fastfetch__art {
  width: 72px;
  max-width: 100%;
  align-self: center;
  justify-self: center;
}

.mini-fastfetch dl {
  min-width: 0;
}

.fastfetch-art img {
  width: min(100%, 290px);
}

@media (max-width: 1120px) {
  .preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .preview-card {
    height: auto;
  }
}

@media (max-width: 590px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .terminal-prompt {
    gap: 6px;
  }

  .terminal-prompt input {
    max-width: calc(100% - 45px);
  }
}


/* v124: restore the v118-style sparse falling rain -------------------- */
.rain-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  opacity: .88;
}

/* Content sits over the rain; translucent terminals let only a trace
   through while the surrounding negative space shows the full effect. */
.site-main {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rain-canvas { opacity: .68; }
}


/* v125: restore v118 rain + dock polish -------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: url("../assets/rain-seamless.svg") repeat;
  background-size: 768px 768px;
  background-position: 0 0;
  opacity: .30;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.62));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.62));
  animation: v118-rain-fall 2.05s linear infinite;
  will-change: background-position;
}

@keyframes v118-rain-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 768px; }
}

.rain-canvas {
  display: none !important;
}

.preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 224px;
}

.preview-card {
  height: 224px;
}

.preview-card--whoami .preview-card__body,
.preview-card--projects .preview-card__body,
.preview-card--stack .preview-card__body,
.preview-card--now .preview-card__body {
  min-height: 0;
}

.preview-card--now .preview-card__body {
  overflow: hidden;
  padding-bottom: 12px;
}

.mini-now {
  display: grid;
  gap: 6px;
}

.mini-now .mini-comment {
  margin: 0;
  line-height: 1.35;
}

.mini-now p {
  margin: 0 0 4px;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.preview-card--stack > header strong {
  text-transform: none;
}

@media (max-width: 840px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .preview-card {
    height: auto;
  }
}

@media (max-width: 590px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}


/* v126: terminal sizing + nano fill + mini stack cleanup -------------- */
:root {
  --primary-terminal-height: 654px;
}

.terminal-stage,
.pane {
  min-height: var(--primary-terminal-height);
  height: var(--primary-terminal-height);
}

.pane--whoami,
.pane--projects,
.pane--stack,
.pane--now {
  height: 100%;
}

.pane-inner,
.projects-pane,
.fastfetch-pane,
.directory-pane {
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
}

.pane--now {
  padding: 0;
}

.nano-editor {
  min-height: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.nano-titlebar,
.nano-body,
.nano-status {
  box-sizing: border-box;
}

.nano-body {
  flex: 1 1 auto;
}

.preview-card--stack .mini-fastfetch {
  grid-template-columns: 1fr;
}

.preview-card--stack .mini-fastfetch__art {
  display: none;
}

.status-panel {
  padding-right: clamp(12px, 1.5vw, 20px);
}

.moxie-button {
  margin-right: -2px;
}

@media (max-width: 1120px) {
  :root {
    --primary-terminal-height: 620px;
  }
}

@media (max-width: 840px) {
  :root {
    --primary-terminal-height: auto;
  }

  .terminal-stage,
  .pane,
  .pane-inner,
  .projects-pane,
  .fastfetch-pane,
  .directory-pane,
  .pane--whoami,
  .pane--projects,
  .pane--stack,
  .pane--now,
  .nano-editor {
    height: auto;
    min-height: 0;
  }

  .pane--now {
    padding: 0;
  }
}


/* v127: footer logo nudge -------------------------------------------- */
.moxie-button {
  margin-right: -8px;
}

@media (max-width: 840px) {
  .moxie-button {
    margin-right: -4px;
  }
}


/* v128: portrait balance + terminal depth + clean mini headers -------- */
@media (min-width: 1121px) {
  .pane--whoami {
    grid-template-columns: minmax(0, 50%) 1px minmax(0, 50%);
  }
}

@media (min-width: 841px) and (max-width: 1120px) {
  .pane--whoami {
    grid-template-columns: minmax(0, 50%) 1px minmax(0, 50%);
  }
}

.terminal-window {
  box-shadow:
    0 26px 72px rgba(0, 0, 0, .38),
    0 8px 24px rgba(0, 0, 0, .22),
    0 0 34px rgba(93, 67, 145, .055),
    0 1px rgba(255,255,255,.02) inset;
}

.preview-card {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .27),
    0 5px 15px rgba(0, 0, 0, .16),
    0 0 22px rgba(93, 67, 145, .04);
}

.preview-card:hover,
.preview-card:focus-visible {
  box-shadow:
    0 20px 46px rgba(0, 0, 0, .30),
    0 6px 17px rgba(0, 0, 0, .18),
    0 0 26px rgba(113, 80, 171, .065);
}

.preview-card > header {
  grid-template-columns: 1fr auto;
  padding-inline: 14px;
}

.preview-card > header strong {
  min-width: 0;
}

.preview-card > header span:last-child {
  justify-self: end;
}


/* v130: scale the whole terminal down; preserve the 50/50 portrait ----- */
@media (min-width: 1121px) {
  :root {
    --primary-terminal-height: 480px;
  }

  .site-main {
    width: min(1180px, calc(100% - 72px));
    padding-top: 118px;
  }

  .pane--whoami {
    grid-template-columns: minmax(0, 50%) 1px minmax(0, 50%);
  }
}

@media (min-width: 841px) and (max-width: 1120px) {
  :root {
    --primary-terminal-height: 470px;
  }

  .site-main {
    width: min(960px, calc(100% - 42px));
    padding-top: 96px;
  }

  .pane--whoami {
    grid-template-columns: minmax(0, 50%) 1px minmax(0, 50%);
  }
}


/* v131: draggable desktop terminals ----------------------------------- */
.draggable-terminal {
  --drag-x: 0px;
  --drag-y: 0px;
  position: relative;
  transform: translate3d(var(--drag-x), var(--drag-y), 0);
  will-change: transform;
}

.terminal-drag-handle {
  cursor: grab;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.terminal-drag-handle:hover {
  background-color: rgba(181, 142, 255, .018);
}

.terminal-drag-handle.is-grabbing {
  cursor: grabbing;
}

.terminal-drag-active,
.terminal-drag-active body {
  user-select: none;
  -webkit-user-select: none;
}

.terminal-window.is-dragging {
  border-color: rgba(181, 142, 255, .28);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .48),
    0 12px 32px rgba(0, 0, 0, .28),
    0 0 40px rgba(119, 83, 184, .08),
    0 1px rgba(255,255,255,.025) inset;
}

.preview-card.is-dragging {
  border-color: rgba(181, 142, 255, .30);
  box-shadow:
    0 25px 56px rgba(0, 0, 0, .38),
    0 8px 22px rgba(0, 0, 0, .24),
    0 0 30px rgba(119, 83, 184, .07);
}

.terminal-window.is-dragging .terminal-tabs,
.preview-card.is-dragging > header {
  background-color: rgba(181, 142, 255, .028);
}

@media (max-width: 840px), (pointer: coarse) {
  .draggable-terminal {
    transform: none !important;
    will-change: auto;
  }

  .terminal-drag-handle {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-drag-handle {
    transition: none;
  }
}


/* v132: stable mini dragging + resizable main terminal ----------------- */
.terminal-window {
  margin-inline: auto;
}

/* The generic preview hover rule used its own translateY(), which replaced
   the drag transform and made a moved mini look like it was snapping home. */
.draggable-terminal.preview-card:hover,
.draggable-terminal.preview-card:focus-visible,
.draggable-terminal.preview-card.is-dragging {
  transform: translate3d(var(--drag-x), var(--drag-y), 0);
}

.terminal-resize-handle {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 8;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(181, 142, 255, .54);
  cursor: nwse-resize;
  touch-action: none;
}

.terminal-resize-handle::before,
.terminal-resize-handle::after,
.terminal-resize-handle span::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.terminal-resize-handle::before { width: 13px; }
.terminal-resize-handle::after { width: 9px; bottom: 7px; }
.terminal-resize-handle span::after { width: 5px; bottom: 11px; }

.terminal-resize-handle:hover,
.terminal-resize-handle:focus-visible,
.terminal-resize-handle.is-grabbing {
  color: var(--accent-bright);
  background: rgba(181,142,255,.035);
}

.terminal-resize-handle.is-grabbing {
  cursor: nwse-resize;
}

.terminal-window.is-resizing {
  border-color: rgba(181, 142, 255, .28);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .48),
    0 12px 32px rgba(0, 0, 0, .28),
    0 0 40px rgba(119, 83, 184, .08),
    0 1px rgba(255,255,255,.025) inset;
}

@media (max-width: 840px), (pointer: coarse) {
  .terminal-resize-handle {
    display: none;
  }
}


/* v133: smoother mini dragging + cleaner resize grip ------------------ */
.preview-card.is-dragging {
  transition: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(5, 8, 16, .94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}

.preview-card.is-dragging > header {
  transition: none !important;
}

.terminal-resize-handle {
  right: 5px;
  bottom: 5px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: rgba(181, 142, 255, .48);
}

.terminal-resize-handle::before,
.terminal-resize-handle::after,
.terminal-resize-handle span::after {
  content: none;
}

.terminal-resize-handle svg {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}

.terminal-resize-handle:hover,
.terminal-resize-handle:focus-visible,
.terminal-resize-handle.is-grabbing {
  background: rgba(181, 142, 255, .045);
}


/* v134: resize-aware main terminal ------------------------------------ */
/* The resizer can make the shell substantially smaller than its authored
   desktop size. These modes progressively tighten the *contents* so the
   layout scales with the window instead of allowing text/prompt collisions. */
.terminal-window.is-resize-compact .terminal-tabs {
  height: 46px;
}

.terminal-window.is-resize-compact .terminal-tab {
  min-width: 195px;
  padding-inline: 14px;
  font-size: .84rem;
}

.terminal-window.is-resize-compact .terminal-tabs__dots {
  right: 15px;
  font-size: .9rem;
}

.terminal-window.is-resize-compact .whoami-copy {
  padding: 28px 30px 22px;
}

.terminal-window.is-resize-compact .whoami-id strong {
  font-size: .98rem;
}

.terminal-window.is-resize-compact .whoami-id span {
  font-size: .78rem;
}

.terminal-window.is-resize-compact .identity-rule {
  margin: 10px 0 14px;
}

.terminal-window.is-resize-compact .whoami-prose {
  font-size: .84rem;
  line-height: 1.58;
}

.terminal-window.is-resize-compact .whoami-prose p {
  margin-bottom: 13px;
}

.terminal-window.is-resize-compact .social-links {
  gap: 18px;
  padding-top: 18px;
}

.terminal-window.is-resize-compact .social-links a,
.terminal-window.is-resize-compact .social-links svg {
  width: 18px;
  height: 18px;
}

.terminal-window.is-resize-compact .pane-inner {
  padding: 30px 34px;
}

.terminal-window.is-resize-compact .projects-pane {
  padding-top: 26px;
}

.terminal-window.is-resize-compact .path-heading {
  margin-bottom: 18px;
  font-size: .84rem;
}

.terminal-window.is-resize-compact .ls-row {
  grid-template-columns: 20px minmax(96px, 125px) minmax(0, 1fr) minmax(0, auto);
  min-height: 39px;
  padding: 7px 6px;
  font-size: .84rem;
}

.terminal-window.is-resize-compact .ls-destination,
.terminal-window.is-resize-compact .ls-legend {
  font-size: .7rem;
}

.terminal-window.is-resize-compact .ls-legend {
  gap: 22px;
  margin-top: 20px;
}

.terminal-window.is-resize-compact .fastfetch-pane {
  grid-template-columns: minmax(160px, .62fr) minmax(300px, 1fr);
  gap: 34px;
  max-width: 780px;
}

.terminal-window.is-resize-compact .fastfetch-art img {
  width: min(100%, 200px);
  max-height: 245px;
}

.terminal-window.is-resize-compact .fastfetch-data {
  font-size: .84rem;
}

.terminal-window.is-resize-compact .fastfetch-data dl {
  gap: 5px 14px;
}

.terminal-window.is-resize-compact .fastfetch-rule {
  width: 185px;
  margin-bottom: 11px;
}

.terminal-window.is-resize-compact .nano-titlebar {
  padding: 6px 9px;
  font-size: .76rem;
}

.terminal-window.is-resize-compact .nano-body {
  padding: 23px 26px;
  font-size: .84rem;
  line-height: 1.58;
}

.terminal-window.is-resize-compact .nano-body h3 {
  margin-bottom: 6px;
  font-size: .84rem;
}

.terminal-window.is-resize-compact .nano-body p {
  margin-bottom: 18px;
}

.terminal-window.is-resize-compact .nano-status {
  padding: 5px 9px;
  font-size: .72rem;
}

.terminal-window.is-resize-compact .terminal-prompt {
  min-height: 42px;
  padding-inline: 14px;
  font-size: .82rem;
}

.terminal-window.is-resize-compact .terminal-prompt input {
  height: 32px;
}

.terminal-window.is-resize-compact .prompt-cursor {
  width: 7px;
  height: 13px;
}

/* Tight mode is the last desktop step before the resizer's minimum size. */
.terminal-window.is-resize-tight .terminal-tabs {
  height: 42px;
}

.terminal-window.is-resize-tight .terminal-tab {
  min-width: 170px;
  gap: 8px;
  padding-inline: 12px;
  font-size: .78rem;
}

.terminal-window.is-resize-tight .terminal-tab__icon {
  width: 14px;
  height: 14px;
}

.terminal-window.is-resize-tight .whoami-copy {
  overflow: auto;
  padding: 20px 22px 16px;
  scrollbar-width: thin;
}

.terminal-window.is-resize-tight .whoami-id strong {
  font-size: .9rem;
}

.terminal-window.is-resize-tight .whoami-id span {
  font-size: .72rem;
}

.terminal-window.is-resize-tight .identity-rule {
  width: min(250px, 82%);
  margin: 8px 0 10px;
}

.terminal-window.is-resize-tight .whoami-prose {
  font-size: .76rem;
  line-height: 1.48;
}

.terminal-window.is-resize-tight .whoami-prose p {
  margin-bottom: 10px;
}

.terminal-window.is-resize-tight .social-links {
  gap: 14px;
  margin-top: 10px;
  padding-top: 0;
}

.terminal-window.is-resize-tight .social-links a,
.terminal-window.is-resize-tight .social-links svg {
  width: 17px;
  height: 17px;
}

.terminal-window.is-resize-tight .whoami-visual img {
  object-position: center 42%;
}

.terminal-window.is-resize-tight .pane-inner {
  overflow: auto;
  padding: 22px 24px;
  scrollbar-width: thin;
}

.terminal-window.is-resize-tight .projects-pane {
  padding-top: 18px;
}

.terminal-window.is-resize-tight .path-heading {
  margin-bottom: 12px;
  font-size: .76rem;
}

.terminal-window.is-resize-tight .ls-row {
  grid-template-columns: 18px minmax(86px, 110px) minmax(0, 1fr);
  min-height: 34px;
  gap: 6px;
  padding: 5px 4px;
  font-size: .76rem;
}

.terminal-window.is-resize-tight .ls-destination {
  display: none;
}

.terminal-window.is-resize-tight .ls-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-window.is-resize-tight .ls-legend {
  gap: 16px;
  margin: 14px 4px 0;
  font-size: .65rem;
}

.terminal-window.is-resize-tight .fastfetch-pane {
  grid-template-columns: minmax(120px, .5fr) minmax(230px, 1fr);
  gap: 22px;
  max-width: 650px;
}

.terminal-window.is-resize-tight .fastfetch-art img {
  width: min(100%, 155px);
  max-height: 195px;
}

.terminal-window.is-resize-tight .fastfetch-data {
  font-size: .75rem;
}

.terminal-window.is-resize-tight .fastfetch-data dl {
  gap: 4px 11px;
}

.terminal-window.is-resize-tight .fastfetch-rule {
  width: 155px;
  margin: 4px 0 9px;
}

.terminal-window.is-resize-tight .nano-titlebar {
  padding: 5px 8px;
  font-size: .7rem;
}

.terminal-window.is-resize-tight .nano-body {
  overflow: auto;
  padding: 17px 20px;
  font-size: .76rem;
  line-height: 1.48;
  scrollbar-width: thin;
}

.terminal-window.is-resize-tight .nano-body h3 {
  margin-bottom: 5px;
  font-size: .76rem;
}

.terminal-window.is-resize-tight .nano-body p {
  margin-bottom: 13px;
}

.terminal-window.is-resize-tight .nano-status {
  padding: 4px 8px;
  font-size: .68rem;
}

.terminal-window.is-resize-tight .back-command {
  margin-top: 18px;
}

.terminal-window.is-resize-tight .terminal-prompt {
  min-height: 38px;
  padding-inline: 11px;
  font-size: .74rem;
}

.terminal-window.is-resize-tight .terminal-prompt input {
  height: 29px;
  max-width: calc(100% - 180px);
}

.terminal-window.is-resize-tight .prompt-cursor {
  width: 6px;
  height: 12px;
}


/* v135: the tab close button finally tells the truth ------------------ */
.terminal-tab__close {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #737681;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.terminal-tab__close:hover,
.terminal-tab__close:focus-visible {
  background: rgba(181, 142, 255, .055);
  color: #c4b1e7;
}

.terminal-window[hidden] {
  display: none !important;
}

/* Once the maximized shell is closed, all four minimized terminals are
   available. On wide desktops they form one tidy row across the dock. */
@media (min-width: 1121px) {
  .site-main.is-terminal-closed .preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 841px) and (max-width: 1120px) {
  .site-main.is-terminal-closed .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v137: real window stacking, snapping, and mini -> tab docking ------- */
.terminal-tab-list {
  display: flex;
  width: 100%;
  height: 100%;
  padding-right: 58px;
  overflow: hidden;
}

.terminal-tab-list .terminal-tab {
  position: relative;
  flex: 1 1 230px;
  min-width: 120px;
  max-width: 230px;
  cursor: default;
  transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.terminal-tab-list .terminal-tab:not(.is-active) {
  background: rgba(8, 11, 20, .48);
  color: #9a969a;
  box-shadow: none;
}

.terminal-tab-list .terminal-tab:not(.is-active) .terminal-tab__icon {
  stroke: #8670ab;
  opacity: .7;
}

.terminal-tab__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.terminal-tab[role="tab"]:focus-visible {
  outline: 1px solid rgba(181,142,255,.58);
  outline-offset: -3px;
}

.terminal-tabs.is-tab-drop-target {
  background: rgba(24, 18, 38, .76);
  box-shadow: inset 0 -2px rgba(181, 142, 255, .62);
}

.terminal-tabs.is-tab-drop-target::after {
  content: "+ tab";
  position: absolute;
  right: 55px;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  padding: 3px 7px;
  border: 1px solid rgba(181,142,255,.26);
  border-radius: 5px;
  background: rgba(8, 10, 18, .78);
  color: #bca4e7;
  font-size: .68rem;
  letter-spacing: .02em;
  pointer-events: none;
}

.draggable-terminal.is-window-focused {
  isolation: isolate;
}

.terminal-window[data-window-mode="maximized"],
.terminal-window[data-window-mode^="snapped-"] {
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.terminal-window[data-window-mode="maximized"] {
  border-color: rgba(181,142,255,.25);
}

.help-window {
  grid-column: 1 / -1;
  padding-top: 4px;
  border-top: 1px solid rgba(149,160,196,.10);
}

.help-window dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}

.terminal-window.is-resize-compact .terminal-tab-list .terminal-tab {
  min-width: 105px;
  padding-inline: 11px;
}

.terminal-window.is-resize-tight .terminal-tab-list .terminal-tab {
  min-width: 88px;
  gap: 6px;
  padding-inline: 9px;
}

.terminal-window.is-resize-tight .terminal-tab__close {
  width: 21px;
  height: 21px;
  font-size: .9rem;
}

@media (max-width: 840px), (pointer: coarse) {
  .terminal-tab-list {
    padding-right: 48px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .terminal-tab-list::-webkit-scrollbar {
    display: none;
  }

  .terminal-tab-list .terminal-tab {
    flex: 0 0 158px;
    min-width: 158px;
  }

  .terminal-tabs.is-tab-drop-target::after {
    display: none;
  }

  .help-window dl {
    grid-template-columns: 1fr;
  }
}

/* Keep the main flex item at its authored width after it has been hidden
   and reopened. Inline resize widths still override this declaration. */
.terminal-window {
  width: 100%;
}


/* v138: snapped/maximized geometry is viewport-managed in drag.js.
   Manual resize keeps its limits; window-manager modes intentionally do not. */


/* v139: snapped/maximized windows float above the authored desktop.
   Removing them from normal flow keeps the mini-terminal dock exactly
   where it was while the managed window overlays it. */
@media (min-width: 841px) and (pointer: fine) {
  .terminal-window[data-window-mode="maximized"],
  .terminal-window[data-window-mode^="snapped-"] {
    position: fixed;
    margin: 0;
  }
}


/* v140: reorderable + detachable terminal tabs ----------------------- */
.terminal-tab-list {
  position: relative;
}

.terminal-tab-list .terminal-tab {
  cursor: grab;
}

.terminal-tab-list .terminal-tab:active {
  cursor: grabbing;
}

.terminal-tab-list .terminal-tab.is-tab-dragging {
  opacity: .22;
}

.tab-drag-active,
.tab-drag-active body {
  user-select: none;
  -webkit-user-select: none;
}

.terminal-tab-drag-ghost {
  position: fixed;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 120px;
  max-width: 230px;
  padding: 0 15px;
  border: 1px solid rgba(181, 142, 255, .34);
  border-radius: 7px 7px 2px 2px;
  background: rgba(12, 14, 25, .96);
  color: #d2ccd0;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .48),
    0 0 26px rgba(119, 83, 184, .08);
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
  will-change: left, top;
}

.terminal-tab-drag-ghost .terminal-tab__icon {
  flex: 0 0 auto;
}

.terminal-tab-drag-ghost .terminal-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.terminal-tab-drag-ghost.is-detaching {
  border-color: rgba(181, 142, 255, .62);
  background: rgba(19, 16, 31, .97);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .52),
    0 0 32px rgba(142, 100, 214, .13);
}

.terminal-tab-list.is-tab-reorder-target::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 7px;
  bottom: 7px;
  left: var(--tab-insert-x, 8px);
  width: 2px;
  border-radius: 999px;
  background: rgba(190, 153, 255, .88);
  box-shadow: 0 0 10px rgba(181, 142, 255, .44);
  pointer-events: none;
}

@media (max-width: 840px), (pointer: coarse) {
  .terminal-tab-list .terminal-tab {
    cursor: default;
  }

  .terminal-tab-drag-ghost,
  .terminal-tab-list.is-tab-reorder-target::after {
    display: none;
  }
}


/* v142: free resize without document reflow --------------------------- */
/* The slot retains the authored terminal footprint. A manually enlarged
   terminal can overlap the desktop below it without moving the mini dock
   or footer farther down the page. */
.terminal-slot {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  z-index: 2;
}

.terminal-slot > .terminal-window {
  width: 100%;
}

.site-main.is-terminal-closed .terminal-slot {
  display: none;
}

@media (max-width: 840px), (pointer: coarse) {
  .terminal-slot {
    height: auto !important;
  }
}


/* v143: calmer vertical composition ---------------------------------- */
/* Desktop becomes a two-row workspace: the authored terminal occupies
   the first row, and the minimized-terminal dock is centered inside all
   remaining space down to the footer. This keeps the dock visually
   balanced across different viewport heights instead of merely pinning it
   toward the bottom of the page. */
@media (min-width: 1121px) and (pointer: fine) {
  .site-main {
    display: grid;
    grid-template-rows: auto minmax(224px, 1fr);
    row-gap: 0;
    padding-top: 134px;
    padding-bottom: 0;
  }

  .terminal-slot {
    grid-row: 1;
  }

  .preview-grid {
    grid-row: 2;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 841px) and (max-width: 1120px) and (pointer: fine) {
  .site-main {
    display: grid;
    grid-template-rows: auto minmax(224px, 1fr);
    row-gap: 0;
    padding-top: 108px;
    padding-bottom: 0;
  }

  .terminal-slot {
    grid-row: 1;
  }

  .preview-grid {
    grid-row: 2;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
  }
}


/* v145: projects legend anchoring + lately label ---------------------- */
/* Compact/tight resize rules used margin shorthands that overrode the
   original auto margin. Keep the legend pinned to the bottom of the
   projects pane at every terminal size. */
.projects-pane > .ls-legend {
  margin-top: auto !important;
  flex: 0 0 auto;
}


/* v147: visually balance footer edge spacing ------------------------- */
/* Keep Moxie exactly where she is; move the left footer label ~8px
   toward the viewport edge on large desktop layouts. */
@media (min-width: 1121px) {
  .status-panel {
    padding-left: 30px;
  }
}


/* v153: real home filesystem ----------------------------------------- */
.leaf-copy {
  white-space: pre-wrap;
  font: inherit;
  line-height: 1.7;
  margin: 0;
}

.ls-row--file {
  cursor: pointer;
}

.ls-row--file:hover,
.ls-row--file:focus-visible {
  background: rgba(181, 142, 255, .045);
}


/* v156: reusable Nano text-file viewer ------------------------------- */
.pane--text-file {
  padding: 0;
}

.pane--text-file .nano-editor {
  min-height: 100%;
  height: 100%;
}

.nano-body--file {
  overflow: auto;
}

.nano-plain-text {
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 840px) {
  .pane--text-file .nano-editor {
    height: auto;
    min-height: 0;
  }
}


/* v159: Vim alternative for real text files -------------------------- */
.text-editor.is-vim .nano-titlebar {
  background: rgba(8, 12, 21, .97);
  color: #bda2ee;
  border-bottom: 1px solid rgba(181, 142, 255, .20);
}

.text-editor.is-vim .nano-titlebar strong {
  color: #d7d1d6;
}

.text-editor.is-vim .nano-titlebar span:last-child {
  color: #76717d;
}

.text-editor.is-vim .nano-status {
  text-align: left;
  padding-left: 12px;
  background: rgba(159, 132, 201, .14);
  color: #c3a8eb;
  border-top: 1px solid rgba(181, 142, 255, .12);
}

.text-editor.is-vim .nano-body h3 {
  color: #c4a5f2;
}


/* v161: more terminal-Vim-like editor treatment ---------------------- */
.text-editor.is-vim .nano-titlebar {
  display: none;
}

.text-editor.is-vim .nano-body {
  position: relative;
  padding: 22px 26px 8px;
  background: rgba(3, 6, 13, .34);
}

.text-editor.is-vim .nano-body::after {
  content:
    "~\A~\A~\A~\A~\A~\A~\A~\A~\A~\A~\A~";
  display: block;
  margin-top: 2px;
  color: rgba(181, 142, 255, .48);
  line-height: 1.72;
  white-space: pre;
  user-select: none;
  pointer-events: none;
}

.text-editor.is-vim .nano-body h3 {
  color: #c4a5f2;
}

.text-editor.is-vim .nano-body p {
  margin-bottom: 20px;
}

.text-editor.is-vim .nano-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 28px;
  padding: 5px 10px;
  text-align: left;
  background: rgba(153, 132, 190, .18);
  color: #d1cad6;
  border-top: 1px solid rgba(181, 142, 255, .16);
  font-size: .78rem;
}

.vim-status__path {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #d8c7f2;
}

.vim-status__details {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
  color: #b6b0b9;
  white-space: nowrap;
}

.vim-status__modified {
  color: #807b84;
}

@media (max-width: 700px) {
  .vim-status__modified {
    display: none;
  }

  .text-editor.is-vim .nano-body {
    padding-inline: 18px;
  }
}


/* v162: keep editor status bars inside the visible terminal ----------- */
/* Flex children default to min-height:auto, so Vim's filler lines could
   make the buffer refuse to shrink and push the status line below the
   visible pane. The body now owns overflow; editor chrome never shrinks. */
.nano-titlebar,
.nano-status {
  flex: 0 0 auto;
}

.nano-body {
  min-height: 0;
}

.text-editor.is-vim .nano-body {
  min-height: 0;
  overflow: auto;
}

.text-editor.is-vim .nano-status {
  flex: 0 0 auto;
}