/* Brand colors and original logo artwork supplied by the owner. */
body.syntax, body.pal {
  color: #f2f6fc;
  background-color: #030712;
  --accent: #22d4f3;
  --muted: #a9b8cf;
  --line: #1b2b44;
  --surface: #0b1425;
}
body.syntax {
  background-image: radial-gradient(ellipse at 85% 14%, #21103970, transparent 36%), radial-gradient(ellipse at 0% 0%, #06386960, transparent 30%);
  --brand-end: #a752f4;
}
body.pal {
  background-color: #020a16;
  background-image: radial-gradient(ellipse at 90% 10%, #073d7055, transparent 40%);
  --brand-end: #2384f4;
}
.brand-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 8px;
  flex: none;
}
body .logo { gap: 14px; color: #f2f6fc; }
body .logo:hover { text-decoration: none; color: var(--accent); }
body .hero, body.pal .hero { grid-template-columns: 1.1fr 1fr; gap: 50px; }
body .hero-art.brand-art {
  height: auto;
  width: 100%;
  overflow: hidden;
  background: #02060e;
  border: 1px solid #1c3354;
  border-radius: 16px;
  box-shadow: 0 0 60px #0171e514;
}
.brand-art img { display: block; width: 100%; height: auto; }
body .eyebrow { color: #bdeaff; }
body .dot { box-shadow: 0 0 14px #00d5ff90; }
body .button, body.pal .button {
  background: linear-gradient(110deg, #12d5ef, #4aafff);
  color: #041020;
  border: 1px solid #55e7ff;
  box-shadow: 0 8px 30px #0077dd22;
}
body.syntax .button { background: linear-gradient(110deg, #38ddf5, #a19aff); }
body .button:hover { filter: brightness(1.08); }
body nav a:hover { color: #fff; }
body nav .parent { color: #c9ebff; background: #071529; }
body .brand-strip b, body.pal .brand-strip b,
body .text-link span, body.pal .text-link span,
body .empty-symbol, body.pal .empty-symbol { color: var(--accent); }
body .empty-work { background: linear-gradient(110deg, #0c1829, #080e1a); }
body .status, body.pal .status { color: #82e6ff; background: #071a2d; border-color: #244462; }
body .stage-released { color: #9af2cf; }
body .project-art, body.pal .project-art {
  background: linear-gradient(135deg, #092545, #101a34);
  border-color: #213c5d;
}
body .project-initial, body.pal .project-initial { color: #67deff; }
body .art-1, body.pal .art-1 { background: linear-gradient(135deg, #19234b, #2a1649); }
body .art-1 .project-initial, body.pal .art-1 .project-initial { color: #c1a1fa; }
body .art-2, body.pal .art-2 { background: linear-gradient(135deg, #082c3a, #092b4d); }
body .art-2 .project-initial, body.pal .art-2 .project-initial { color: #76e7ef; }
body .art-3, body.pal .art-3 { background: linear-gradient(135deg, #121c41, #213068); }
body .art-3 .project-initial, body.pal .art-3 .project-initial { color: #88b9ff; }
body footer .brand-logo { width: 48px; height: 48px; }
@media (max-width: 900px) {
  body .hero, body.pal .hero { grid-template-columns: 1.15fr 1fr; gap: 28px; }
  .brand-logo { width: 54px; height: 54px; }
}
@media (max-width: 620px) {
  body .hero, body.pal .hero { display: flex; gap: 30px; }
  .brand-logo { width: 52px; height: 52px; }
  body .hero-art.brand-art { max-width: 420px; margin: 0 auto; border-radius: 12px; }
  body .hero-note { color: #b4c9e3; }
}