/* final — DV-1 (IBM Plex: papel, carvão e âmbar) com o detalhe num painel central que nasce do card. */
:root {
  /* paleta ANSI do terminal (a barra do fastfetch) */
  --a0: #44483f;
  --a1: #f0b35e;
  --a2: #c6d982;
  --a3: #8db9c0;
  --a4: #91c49c;
  --a5: #e69a7e;
  --a6: #bdc3b6;
  --a7: #f1f0e8;

  --bg: #f3f1e9;
  --surface: #fffdf7;
  --surface-2: #e4e6d9;
  --ink: #242920;
  --ink-2: #565e50;
  --line: #242920;
  --line-soft: #c4c8bb;
  --accent: #85500a;       /* texto de destaque */
  --shadow: #c8cdbb;       /* segunda tinta (só decoração) */
  --mark: #c6d982;         /* marca-texto */
  --mark-y: .02em;
  --mark-h: .24em;
  --pin: #c6d982;         /* ponto sobre a linha invertida */
  --hit: #85500a;
  --focus: #242920;
  --img-bg: #191d18;
  --term-bg: #191d18;
  --term-fg: #f1f0e8;
  --term-mute: #bdc3b6;
  --term-line: #44483f;
  --backdrop: rgb(17 21 15 / .62);

  --display: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  --gut: clamp(16px, 4vw, 64px);
  --max: 1280px;
  --ease-spring: cubic-bezier(.3, 1.5, .5, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #191d18;
  --surface: #232820;
  --surface-2: #30382b;
  --ink: #f1f0e8;
  --ink-2: #bdc3b6;
  --line: #8e9983;
  --line-soft: #44483f;
  --accent: #f0b35e;
  --shadow: #526046;
  --mark: #c6d982;
  --mark-y: -.1em;
  --mark-h: .1em;
  --pin: #85500a;
  --hit: #c6d982;
  --focus: #c6d982;
  --img-bg: #11150f;
  --term-bg: #11150f;
  --term-line: #44483f;
  --backdrop: rgb(8 12 7 / .76);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html.panel-open { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--display);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a, button { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 14px; font: 600 14px/1 var(--mono); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.label { margin: 0 0 8px; font: 600 13px/1.2 var(--mono); color: var(--ink-2); }

/* ---------- topo ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.top.is-scrolled { border-bottom-color: var(--line-soft); }
.top-in { display: flex; align-items: center; gap: 8px 20px; min-height: 60px; }
.prompt { font: 400 14px/1 var(--mono); text-decoration: none; white-space: nowrap; margin-right: auto; padding: 6px 0; }
.p-user { color: var(--accent); font-weight: 700; }
.p-path { color: var(--ink-2); }
.cursor { display: inline-block; width: .6em; height: 1.1em; margin-left: .3em; vertical-align: -.2em; background: var(--ink); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.top nav { display: flex; gap: 2px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 600 14px/1 var(--mono); text-decoration: none; border-bottom: 2px solid transparent; }
.top nav a:hover { border-bottom-color: var(--shadow); }
.theme {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px 0 6px;
  border: 0; background: none;
  font: 600 13px/1 var(--mono); color: var(--ink);
}
.theme-track { position: relative; width: 40px; height: 22px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); }
.theme-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform .3s var(--ease-spring), background-color .2s; }
.theme[aria-pressed="true"] .theme-knob { transform: translateX(18px); background: var(--a2); }
.theme:hover .theme-track { box-shadow: 2px 2px 0 var(--shadow); }

/* ---------- primeira tela ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: end;
  padding-top: clamp(16px, 4vh, 48px);
  padding-bottom: clamp(32px, 5vh, 56px);
  min-height: min(calc(100svh - 60px), 620px);
  align-content: center;
}
.name {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3.4rem, 8.8vw, 8.4rem);
  line-height: .94;
  letter-spacing: -.065em;
  text-shadow: .025em .03em 0 var(--shadow);
}
.name > span { display: block; width: fit-content; white-space: nowrap; }
.name .l2 { font-style: normal; font-weight: 400; letter-spacing: -.065em; padding: .02em 0 .03em .2em; text-shadow: none; color: var(--accent); }
.name .l3 { position: relative; z-index: 0; }
.name .l3::after {
  content: ""; position: absolute; z-index: -1;
  left: -.04em; right: -.1em; bottom: var(--mark-y); height: var(--mark-h);
  background: var(--mark); transform: none;
}
.hero-info { display: grid; gap: 20px; max-width: 520px; padding-bottom: .4rem; }
.role { margin: 0; font: 600 15px/1.45 var(--mono); color: var(--ink); }
.role-place { color: var(--ink-2); font-weight: 400; }
.short { margin: 0; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.22; font-weight: 500; letter-spacing: -.02em; max-width: 26ch; }
/* "+N outras": mesmo tamanho dos chips, contorno tracejado (é ação, não item); fica sólido no hover */
.os-btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 3px 10px;
  border: 2px dashed var(--ink-2); border-radius: 5px;
  background: transparent; color: var(--ink);
  font: 600 13.5px/1.2 var(--mono);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.os-btn:hover { border-style: solid; border-color: var(--line); background: var(--surface); box-shadow: 3px 3px 0 var(--shadow); }
@media (pointer: coarse) { .os-btn { min-height: 44px; } }
.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stack-chip {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 3px 10px;
  border: 2px solid var(--line); border-radius: 5px;
  background: var(--surface); color: var(--ink);
  font: 600 13.5px/1.2 var(--mono);
  user-select: none; touch-action: manipulation;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
button.stack-chip:hover { box-shadow: 3px 3px 0 var(--shadow); }
.stack-chip.is-drag { z-index: 5; background: var(--ink); color: var(--bg); box-shadow: 4px 4px 0 var(--mark); }
@media (hover: hover) and (pointer: fine) { button.stack-chip { cursor: grab; } button.stack-chip.is-drag { cursor: grabbing; } }
.links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font: 700 14px/1 var(--mono); text-decoration: none;
  transition: transform .2s var(--ease-spring), box-shadow .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.btn-main { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- seções ---------- */
.sec { padding-block: clamp(48px, 7vw, 104px) 0; }
.hero + .sec { padding-top: clamp(16px, 3vw, 40px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.sec-t {
  font-family: var(--mono);
  margin: 0 0 clamp(20px, 3vw, 36px);
  font-size: clamp(2.25rem, 5.8vw, 4.8rem);
  font-weight: 700; line-height: .9; letter-spacing: -.06em;
  text-shadow: .04em .045em 0 var(--shadow);
  display: flex; align-items: center; gap: .35em;
}
.sec-head .sec-t { margin-bottom: 0; }
.sec-sub { margin: 0 0 6px; max-width: 46ch; font: 400 14px/1.6 var(--mono); color: var(--ink-2); }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sub-t { font-family: var(--mono); margin: clamp(40px, 5vw, 64px) 0 18px; font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); display: flex; align-items: center; gap: 16px; }
.sub-t::after { content: ""; flex: 1; height: 1.5px; background: var(--line-soft); }
.sec-head + .sub-t { margin-top: 0; }

/* ---------- Sobre: fastfetch + texto ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
@media (min-width: 1000px) {
  .about { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(36px, 4vw, 64px); align-items: start; }
}
.about-text { max-width: 54ch; padding-top: 4px; }
.about-text p { margin: 0 0 .9em; font-size: clamp(1.06rem, 1.25vw, 1.18rem); line-height: 1.55; }
.about-lead { font-weight: 500; }
.about-more { overflow: visible; }
.more {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 12px; margin-top: .1em;
  border: 2px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font: 700 13.5px/1 var(--mono);
  transition: transform .2s var(--ease-spring), box-shadow .2s;
}
.more:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--shadow); }
.more-i { display: inline-block; transition: transform .35s var(--ease-spring); }
.more[aria-expanded="true"] .more-i { transform: rotate(180deg); }
.about-text .about-note { margin: 14px 0 0; font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); }
.term {
  max-width: 820px;
  background: var(--term-bg); color: var(--term-fg);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 10px 10px 0 var(--shadow);
  font: 400 14.5px/1.6 var(--mono);
}
:root[data-theme="dark"] .term { border-color: var(--a0); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--term-line); font-size: 12.5px; color: var(--term-mute); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--a1); }
.term-bar i:nth-child(2) { background: var(--a2); }
.term-bar i:nth-child(3) { background: var(--a3); }
.term-bar span { margin-left: 8px; }
.term-body { padding: clamp(16px, 3vw, 28px); }
.term-cmd { margin: 0 0 18px; }
.t-host { color: var(--a1); font-weight: 700; }
.ff { display: grid; grid-template-columns: clamp(96px, 15vw, 168px) minmax(0, 1fr); gap: clamp(18px, 4vw, 40px); align-items: start; }
.avatar { aspect-ratio: 1; border-radius: 4px; overflow: hidden; }
.avatar svg { width: 100%; height: 100%; image-rendering: pixelated; }
.ff-info { min-width: 0; }
.ff-host { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--term-line); color: var(--a1); font-weight: 700; }
.ff-host span { color: var(--term-fg); }
.ff-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 18px; }
.ff-list dt { color: var(--a2); font-weight: 600; }
.ff-list dd { margin: 0; overflow-wrap: anywhere; }
.ansi { display: flex; margin-top: 18px; max-width: 360px; }
.ansi i { flex: 1; height: 18px; transition: transform .25s var(--ease-spring); }
.ansi i:nth-child(1) { background: var(--a0); }
.ansi i:nth-child(2) { background: var(--a1); }
.ansi i:nth-child(3) { background: var(--a2); }
.ansi i:nth-child(4) { background: var(--a3); }
.ansi i:nth-child(5) { background: var(--a4); }
.ansi i:nth-child(6) { background: var(--a5); }
.ansi i:nth-child(7) { background: var(--a6); }
.ansi i:nth-child(8) { background: var(--a7); }
.ansi:hover i:nth-child(odd) { transform: translateY(-3px); }
.ansi:hover i:nth-child(even) { transform: translateY(2px); }

/* ---------- imagens placeholder (SVG inline) ---------- */
.ph-bg { fill: var(--img-bg); }
.ph-dot { fill: var(--pc); }
.ph-num { fill: none; stroke: var(--pc2); stroke-width: 3; font-family: var(--display); font-weight: 700; }
.ph-grid { stroke: var(--term-line); stroke-width: 1; }
[data-p="1"] { --pc: var(--a1); --pc2: var(--a2); }
[data-p="2"] { --pc: var(--a2); --pc2: var(--a3); }
[data-p="3"] { --pc: var(--a3); --pc2: var(--a1); }
[data-p="4"] { --pc: var(--a4); --pc2: var(--a1); }
[data-p="5"] { --pc: var(--a5); --pc2: var(--a2); }
[data-p="6"] { --pc: var(--a6); --pc2: var(--a4); }

/* ---------- destaques ---------- */
.featured { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.card {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--line);
  transition: transform .25s var(--ease-spring), box-shadow .2s, border-color .2s;
}
.card:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 var(--line); }
.card-fig { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid var(--line); border-radius: 6px 6px 0 0; }
.card-fig svg { width: 100%; height: 100%; transition: transform .45s var(--ease-spring), filter .25s, opacity .25s; }
.card:hover .card-fig svg { transform: scale(1.035); }
.card-b { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-t { font-family: var(--mono); margin: 0; font-size: clamp(1.65rem, 2.4vw, 2.25rem); font-weight: 700; line-height: .95; letter-spacing: -.055em; }
.open { all: unset; cursor: pointer; }
.open::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.open:focus-visible { outline: none; }
.card:has(.open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
.year { font: 600 13px/1 var(--mono); color: var(--ink-2); }
.card-sum { margin: 0; line-height: 1.4; }
.tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 9px;
  border: 1.5px solid var(--line); border-radius: 999px;
  font: 600 12.5px/1.2 var(--mono); color: var(--ink);
  transition: background-color .15s, color .15s;
}
.tag[data-kind="tool"] { border-radius: 4px; }
.card-more { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--mono); color: var(--accent); }
.card-more span { transition: transform .2s; }
.card:hover .card-more span { transform: translateX(4px); }

/* realce vindo do quadro */
.is-hit .tag.is-on, .row.is-hit .tag.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.card.is-hit { border-color: var(--hit); box-shadow: 6px 6px 0 var(--hit); }
.card.is-dim .card-fig svg { filter: grayscale(1); opacity: .45; }
.card.is-dim { box-shadow: 6px 6px 0 var(--line-soft); }

/* ---------- compactos ---------- */
.compact { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.compact > li { border-bottom: 1.5px solid var(--line-soft); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) 70px minmax(0, 3fr) auto;
  align-items: center; gap: 8px 24px;
  padding: 14px 8px 14px 12px;
  border-left: 4px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.row:hover { background: var(--surface); }
.row-t { font-family: var(--mono); margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.row .tags { margin: 0; }
.row-go { font: 700 13px/1 var(--mono); color: var(--accent); white-space: nowrap; }
.row-go span { display: inline-block; transition: transform .2s; }
.row:hover .row-go span { transform: translateX(4px); }
.row:has(.open:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.row .open::after { border-radius: 0; }
.row.is-hit { border-left-color: var(--hit); background: var(--surface); }

/* ---------- quadro de habilidades ---------- */
.board { padding-top: 8px; }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 32px; }
.board-head .sub-t { flex: 1 1 100%; }
.board-sub { margin: -4px 0 18px; max-width: 70ch; font: 400 13.5px/1.6 var(--mono); color: var(--ink-2); }
.board-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.matrix {
  position: relative;
  container-type: inline-size;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 10px 10px 8px;
  font-family: var(--mono);
}
/* ferramentas e conceitos lado a lado quando o quadro tem largura (desktop) */
.m-body { display: grid; gap: 14px 32px; align-items: start; }
@container (min-width: 620px) { .m-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.m-head, .m-row { display: grid; grid-template-columns: minmax(112px, 1fr) minmax(120px, 216px) 24px; align-items: center; gap: 8px; }
.m-head { margin-bottom: 2px; padding: 2px 8px 6px; border-bottom: 1.5px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.m-cols, .m-dots { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); }
.m-col { justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 22px; border-radius: 4px; color: var(--ink-2); transition: background-color .15s, color .15s; }
.m-col.is-on { background: var(--ink); color: var(--bg); }
.m-n { text-align: center; }
.m-group-t { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.m-row {
  width: 100%; min-height: 28px; padding: 1px 8px;
  border: 0; border-radius: 4px; background: transparent; text-align: left;
  font: 600 13px/1.2 var(--mono); color: var(--ink);
  transition: background-color .12s;
}
.m-row:hover, .m-row.is-on { background: var(--surface-2); }
.m-row[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.m-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-dots { height: 16px; align-items: center; position: relative; }
.m-dot { grid-row: 1; justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: var(--line-soft); position: relative; z-index: 1; }
.m-dot.on { width: 11px; height: 11px; background: var(--ink); transition: transform .3s var(--ease-spring), background-color .15s; }
.m-line { grid-row: 1; align-self: center; height: 3px; margin-inline: calc(100% / 12); border-radius: 2px; background: var(--ink); transition: opacity .15s; }
.m-row.is-on .m-dot.on { background: var(--accent); transform: scale(1.2); }
.m-row[aria-pressed="true"] .m-dot.on { background: var(--pin); }
.m-row[aria-pressed="true"] .m-dot:not(.on) { background: var(--ink-2); }
.m-row[aria-pressed="true"] .m-line { background: var(--bg); }
.m-row.has-rope .m-line { opacity: 0; }
.m-count { text-align: center; font-weight: 700; }
.m-rope { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.m-rope path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-rope .r-under { stroke: var(--shadow); stroke-width: 4; }
.m-rope .r-main { stroke: var(--ink); stroke-width: 2.5; }
.matrix.rope-on-pinned .m-rope .r-main { stroke: var(--pin); }

.side { position: sticky; top: 76px; display: grid; gap: 14px; }
.side-head { min-height: 76px; border-left: 4px solid var(--line-soft); padding: 2px 0 2px 16px; transition: border-color .15s; }
.board-grid:has(.pl-item.is-hit) .side-head { border-left-color: var(--hit); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-btn {
  position: relative; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  padding: 7px 12px 7px 14px; text-align: left;
  border: 1.5px solid var(--line-soft); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  transition: background-color .18s, border-color .18s, opacity .18s, transform .3s var(--ease-spring), box-shadow .2s;
}
.pl-btn::before { content: ""; position: absolute; left: -1.5px; top: -1.5px; bottom: -1.5px; width: 5px; border-radius: 6px 0 0 6px; background: var(--pc); opacity: 0; transition: opacity .18s; }
.pl-btn:hover { border-color: var(--line); }
.pl-t { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.pl-short { display: none; }
.pl-note { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.4; }
.pl-note:empty { display: none; }
.pl-item.is-hit .pl-btn { border-color: var(--hit); box-shadow: 4px 4px 0 var(--hit); transform: translate(-2px, -2px); }
.pl-item.is-hit .pl-btn::before { opacity: 1; }
.pl-item.is-hit .pl-t { color: var(--accent); }
.pl-item.is-dim .pl-btn { background: transparent; border-style: dashed; color: var(--ink-2); }
.pl-item.is-dim .pl-btn:hover { color: var(--ink); }
.readout {
  border-left: 4px solid var(--line-soft);
  padding: 4px 0 4px 18px;
}
.readout.is-on { border-left-color: var(--hit); }
.ro-hint { margin: 0; font: 400 13.5px/1.6 var(--mono); color: var(--ink-2); max-width: 40ch; }
.ro-kind { margin: 0; font: 600 12.5px/1.2 var(--mono); color: var(--ink-2); }
.ro-t { font-family: var(--mono); margin: 4px 0 2px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.ro-count { margin: 0 0 14px; font: 400 13.5px/1.4 var(--mono); color: var(--ink-2); }
.ro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ro-item { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1.5px solid var(--line-soft); border-radius: 6px; }
.ro-item a { font: 800 14px/1.3 var(--mono); color: var(--accent); justify-self: start; }
.ro-item p { margin: 0; font-size: 15px; line-height: 1.4; }

/* ---------- contato ---------- */
.contact { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.contact li { border-bottom: 1.5px solid var(--line-soft); }
.c-link, .c-static {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline; gap: 6px 28px;
  padding: 18px 4px; text-decoration: none;
}
.c-name { font-family: var(--mono); font-size: clamp(2rem, 5.4vw, 4rem); font-weight: 700; letter-spacing: -.055em; line-height: 1; transition: color .15s; }
.c-val { font: 400 14px/1.4 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.c-arrow { font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1; transition: transform .25s var(--ease-spring); }
.c-link:hover .c-name, .c-link:focus-visible .c-name { color: var(--accent); }
.c-link:hover .c-arrow, .c-link:focus-visible .c-arrow { transform: translate(5px, -5px); }
.c-static .c-name { color: var(--ink-2); }

/* ---------- rodapé ---------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: clamp(56px, 8vw, 104px) 32px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.foot p { margin: 0; }
.foot a { color: var(--ink); }
.nojs { font-family: var(--mono); }

/* ---------- painel de detalhe: central, largura de leitura ---------- */
.panel {
  position: fixed; inset: 0; margin: auto;
  width: min(840px, calc(100% - 48px)); max-width: none;
  height: fit-content; max-height: calc(100dvh - 48px);
  padding: 0;
  border: 2px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  box-shadow: 10px 10px 0 var(--shadow);
  overflow-y: auto; overscroll-behavior: contain;
}
.panel::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.panel-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px clamp(12px, 3vw, 24px); background: var(--surface); border-bottom: 1.5px solid var(--line-soft); }
.panel-nav { display: flex; align-items: center; gap: 4px; }
.pn-btn, .panel-close {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--line-soft); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font: 600 13.5px/1 var(--mono);
  transition: border-color .15s, box-shadow .15s;
}
.pn-btn:hover, .panel-close:hover { border-color: var(--line); box-shadow: 3px 3px 0 var(--shadow); }
.panel-close { border-width: 2px; border-color: var(--line); font-weight: 700; }
.panel-kicker { margin: 0; min-width: 7ch; text-align: center; font: 400 13px/1.3 var(--mono); color: var(--ink-2); }
.panel-body { container-type: inline-size; display: grid; gap: 22px; padding: clamp(18px, 3.5vw, 32px); }
.panel-fig { margin: 0; }
/* 16:9, o formato de um print de tela; em telas baixas a altura para em 50vh para o título aparecer sem rolar */
.panel-img { aspect-ratio: 16 / 9; max-height: 50vh; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; }
.panel-img img { width: 100%; height: 100%; object-fit: cover; }
.panel-img svg { width: 100%; height: 100%; }
.panel-fig figcaption { margin-top: 6px; font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.panel-t { font-family: var(--mono); margin: 0; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; letter-spacing: -.06em; line-height: .9; text-shadow: .04em .045em 0 var(--shadow); }
/* o foco vai ao título só para o leitor de tela anunciar o projeto; ele não é clicável, então não ganha contorno */
.panel-t:focus, .panel-t:focus-visible { outline: none; }
.panel-what { margin: -6px 0 0; max-width: 58ch; font-size: 1.2rem; line-height: 1.45; }
.pd-cols { display: grid; gap: 22px; }
.pd-t { margin: 0 0 8px; font: 600 13px/1.3 var(--mono); color: var(--ink-2); }
.pd p { margin: 0; line-height: 1.5; }
.did { margin: 0; padding-left: 1.15em; display: grid; gap: 6px; line-height: 1.45; }
.did li::marker { color: var(--ink-2); }
.sk-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1.5px solid var(--line); }
.sk { padding: 12px 0; border-bottom: 1.5px solid var(--line-soft); display: grid; gap: 3px; align-content: start; }
.sk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sk-name { margin: 0; font: 700 15px/1.3 var(--mono); }
.sk-kind { font: 400 12px/1 var(--mono); color: var(--ink-2); padding: 3px 7px; border: 1.5px solid var(--line-soft); border-radius: 999px; }
.sk-kind[data-kind="tool"] { border-radius: 4px; }
.sk-note { margin: 0; line-height: 1.45; }
.sk-also { margin: 0; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.sk-also a { color: var(--accent); font-weight: 700; }
@container (min-width: 620px) {
  .pd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .sk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.panel-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-na { border-style: dashed; border-color: var(--line-soft); background: transparent; color: var(--ink-2); cursor: default; }
.btn-na:hover { transform: none; box-shadow: none; }
.btn-na-t { font-weight: 400; }
.panel-keys { margin: -6px 0 0; font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); }

/* ---------- painel "Outras Stacks": mesmo painel central, mais estreito ---------- */
@media (min-width: 720px) { .panel.os-panel { width: min(680px, calc(100% - 48px)); } }
.os-panel .panel-bar { justify-content: flex-end; }
.os-intro { margin: -6px 0 0; max-width: 58ch; font-size: 1.05rem; line-height: 1.5; }
.os-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px 32px; align-items: start; }
.os-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--line); }
.os-item { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1.5px solid var(--line-soft); }
.os-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.os-where { margin: 0; line-height: 1.4; }

/* morph card ↔ painel (View Transitions): a caixa cresce sem esticar o texto; a imagem viaja à parte */
::view-transition-group(proj), ::view-transition-group(proj-fig) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(proj), ::view-transition-new(proj) { height: 100%; object-fit: none; object-position: left top; overflow: clip; animation-duration: .3s; }
::view-transition-new(proj) { animation-delay: .06s; }
::view-transition-old(proj-fig), ::view-transition-new(proj-fig) { height: 100%; object-fit: cover; animation-duration: .42s; }
:root.is-morph::view-transition-new(root) { animation: morph-fade .36s ease both; }
@keyframes morph-fade { from { opacity: 0; } }

/* troca de tema: a página nova abre em círculo a partir do botão (via JS) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .featured { grid-template-columns: minmax(0, 1fr); }
  .card { flex-direction: row; }
  .card-fig { flex: 0 0 44%; aspect-ratio: auto; min-height: 240px; border-bottom: 0; border-right: 2px solid var(--line); border-radius: 6px 0 0 6px; }
}
/* celular: a lista vira uma barra fixa no rodapé da tela enquanto o quadro está visível */
@media (max-width: 820px) {
  html { scroll-padding-bottom: 150px; }
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .matrix { max-width: 640px; width: 100%; }
  .side {
    position: sticky; top: auto; bottom: 0; z-index: 10;
    gap: 6px; margin-top: 16px; padding: 8px 0 calc(10px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 2px solid var(--line);
  }
  .side-head { min-height: 0; border: 0; padding: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .side-head .ro-hint { font-size: 12.5px; line-height: 1.4; }
  .side-head .ro-kind { display: none; }
  .side-head .ro-t { margin: 0; font-size: 1.15rem; }
  .side-head .ro-count { margin: 0; font-size: 12.5px; }
  .plist { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; }
  .pl-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 5px 2px; text-align: center; }
  .pl-btn::before { left: -1.5px; right: -1.5px; top: auto; bottom: -1.5px; width: auto; height: 4px; border-radius: 0 0 6px 6px; }
  .pl-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pl-short { display: inline; }
  .pl-t { font-size: 1.05rem; }
  .pl-year { font-size: 11px; }
  .pl-note { display: none; }
  .pl-item.is-hit .pl-btn { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: 3px 3px 0 var(--hit); }
  .pl-item.is-hit .pl-t { color: var(--bg); }
  .pl-item.is-hit .pl-year { color: var(--bg); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; padding-top: 28px; padding-bottom: 40px; }
  .hero-info { gap: 16px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row .year { grid-column: 2; grid-row: 1; justify-self: end; }
  .row .tags { grid-column: 1 / -1; }
  .row-go { display: none; }
}
@media (max-width: 719px) {
  .card { flex-direction: column; }
  .card-fig { flex: none; aspect-ratio: 16 / 9; min-height: 0; border-right: 0; border-bottom: 2px solid var(--line); border-radius: 6px 6px 0 0; }
  .panel { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .panel-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .pn-btn { padding: 0; }
  .pn-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .readout { margin: 6px 0 10px; padding-left: 12px; min-height: 0; }
  .ro-t { font-size: 1.8rem; }
}
@media (max-width: 600px) {
  .prompt .p-path, .prompt .cursor { display: none; }
  .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top nav a { padding: 0 7px; font-size: 13px; }
  .top-in { gap: 4px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .prompt { display: none; }
  .top nav { margin-right: auto; margin-left: -7px; }
  .name { font-size: clamp(3rem, 17.5vw, 4.6rem); }
  .hero { padding-top: 18px; padding-bottom: 32px; }
  .hero-info { gap: 14px; }
  .role { font-size: 13.5px; }
  .role-sep { display: none; }
  .role-place { display: block; }
  .short { font-size: 1.12rem; }
  .stack-chip { min-height: 30px; padding: 2px 8px; font-size: 12.5px; }
  .btn { min-height: 42px; padding: 0 11px; font-size: 13px; }
  .links { gap: 8px; }
  .term { box-shadow: 6px 6px 0 var(--shadow); margin-right: 6px; }
  .ff { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .avatar { width: 88px; }
  .ff-list { gap: 2px 12px; font-size: 13.5px; }
  .card { box-shadow: 4px 4px 0 var(--line); margin-right: 4px; }
  .card.is-hit { box-shadow: 4px 4px 0 var(--hit); }
  .matrix { padding: 12px 6px 10px; }
  .m-head, .m-row { grid-template-columns: minmax(0, 1fr) 138px 22px; gap: 6px; padding-inline: 6px; font-size: 12.5px; }
  .m-col { min-width: 22px; }
  .c-link, .c-static { grid-template-columns: minmax(0, 1fr) auto; }
  .c-val { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .btn:hover { transform: none; }
  .card:hover .card-fig svg, .ansi:hover i, .c-link:hover .c-arrow, .c-link:focus-visible .c-arrow { transform: none; }
  .card:hover .card-more span, .row:hover .row-go span { transform: none; }
}