/* Integration only: the blog's original retro.css and character assets are unchanged.
   These rules style the added tools and restored Astro information. */
.tool-card { display:block; }
.tool-card:hover .lab-caption h3 { text-decoration:underline; text-underline-offset:4px; }
.tool-preview { height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; overflow:clip; color:var(--color-ink); }
.tool-preview>span { font:11px var(--font-body); }
.union-art { background:var(--color-accent); }
.union-board { display:grid; grid-template-columns:repeat(5,26px); grid-template-rows:repeat(5,26px); gap:4px; transform:rotate(-8deg); }
.union-board i { background:var(--color-surface); border:1.5px solid var(--color-ink); border-radius:3px; box-shadow:2px 2px 0 var(--color-ink); }
/* Keep the page's bold color treatment, with one color per job family. */
.union-board i[data-piece$="_warrior"] { background:var(--color-pink); }
.union-board i[data-piece$="_bowman"] { background:#8ee6a8; }
.union-board i[data-piece$="_magician"] { background:#8ac7f5; }
.union-board i[data-piece$="_thief"] { background:#c49bfa; }
.union-board i[data-piece$="_pirate"] { background:#cfced4; }
.scheduler-art { background:var(--color-paper-strong); }
.scheduler-art svg { width:155px; height:155px; transform:rotate(7deg); }
.planner-page { fill:var(--color-surface); stroke:var(--color-ink); stroke-width:4; }
.planner-binding { fill:none; stroke:var(--color-ink); stroke-width:5; stroke-linecap:round; }
.planner-check { fill:none; stroke:var(--color-ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.planner-lines { fill:none; stroke:var(--color-ink-soft); stroke-width:4; stroke-linecap:round; }
.planner-box { fill:var(--color-pink); stroke:var(--color-ink); stroke-width:2; }
.midnight-art { background: var(--color-pink); gap: 20px; }
.midnight-map { display: block; width: 160px; height: 160px; max-width: calc(100% - 32px); object-fit: contain; transform: rotate(-7deg); }
.tmi-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; align-items:start; }
.tmi-window { background:var(--color-surface); border:2px solid var(--color-ink); box-shadow:6px 6px 0 var(--color-ink); }
.tmi-facts { padding:8px 28px; }
.bot-fact { padding:24px 0; }
.bot-fact+.bot-fact { border-top:1px solid var(--color-rule); }
.bot-fact h3 { font-size:19px; letter-spacing:-.6px; margin-bottom:12px; }
.bot-fact p { font-size:13px; line-height:1.9; color:var(--color-ink-soft); }
.bot-fact code { font-family:var(--font-body); background:var(--color-paper-strong); color:var(--color-ink); padding:2px 4px; }
.bot-fact del { display:block; font-size:11px; margin-top:4px; }
.tmi-links { padding:20px 28px; border-top:2px solid var(--color-ink); display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.tmi-links a { white-space:nowrap; }
.bot-tmi .companion-window { width:100%; margin:0; }
@media(max-width:760px) {
 .tool-preview { height:240px; }
 .tool-card .lab-caption { display:block; }
 .tool-card .lab-caption>span { display:block; margin-top:8px; line-height:1.7; }
 .tmi-layout { grid-template-columns:minmax(0,1fr); gap:40px; }
 .tmi-facts { padding:4px 20px; }
 .bot-fact h3 { font-size:17px; }
 .tmi-links { padding:20px; }
 .tmi-links .action-key { font-size:11px; }
 .bot-tmi .companion-window { margin:auto; }
}

/* Hand-authored character curves drawn to match the supplied ddddfff.png reference. */
.hero-character {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 16px;
  width: clamp(220px, 23vw, 310px);
  aspect-ratio: 4 / 3;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
@media (min-width: 761px) and (max-width: 1050px) {
  .hero-character { width: 175px; }
}
@media (max-width: 760px) {
  .hero-character { width: 200px; bottom: 10px; }
}
@media (max-width: 560px) {
  .hero-character { width: 168px; bottom: 10px; }
  .face-hero .note-work { bottom: 195px; }
  .face-hero .note-blog { bottom: 180px; }
}

/* Preserve the bot's multi-line responses and keep links usable in narrow chats. */
.chat-feed .chat { flex-shrink: 0; white-space: pre-line; overflow-wrap: anywhere; }
.chat-feed .chat a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.chat-response-label { display: block; margin-top: 8px; font-size: 10px; color: var(--color-ink-soft); }

.demo-top .mini-face {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
}
.demo-top .mini-face svg { display: block; width: 30px; height: 30px; overflow: visible; fill: var(--color-ink); }
.demo-top .mini-face path { fill: none; stroke: var(--color-ink); stroke-width: 34; stroke-linecap: round; stroke-linejoin: round; }

.bot-tmi .snow-heading { display: none; }

/* Six project entries, with the same previews as the tool cards. */
.work-display { grid-template-columns: 180px minmax(0, 1fr) 290px; }
.work-sidebar .project-key { gap: 9px; }
.tool-project-demo {
  display: block;
  width: 100%;
  max-width: 340px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 2px solid var(--color-ink);
  box-shadow: 8px 8px 0 var(--color-ink);
  transform: rotate(-2deg);
}
.tool-project-demo:hover { transform: rotate(0); }
.tool-project-demo .tool-preview { height: 300px; }
.guild-art { background: var(--color-paper-strong); }
@media (max-width: 1050px) and (min-width: 761px) {
  .work-display { grid-template-columns: 160px minmax(0, 1fr) 240px; }
}
@media (max-width: 760px) {
  .work-display { grid-template-columns: minmax(0, 1fr); }
  .work-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .work-sidebar .project-key { min-width: 0; white-space: normal; align-items: center; }
  .work-sidebar .project-key span { flex: none; }
  .work-sidebar .project-key b { margin-left: auto; }
  .tool-project-demo .tool-preview { height: 260px; }
}