body.theme-glitch-art {
  background:
    linear-gradient(90deg, transparent 0 76%, color-mix(in srgb, #2b69d1, transparent 92%) 76% 78%, transparent 78%),
    linear-gradient(0deg, transparent 0 61%, color-mix(in srgb, var(--accent), transparent 93%) 61% 63%, transparent 63%),
    var(--bg);
}

.theme-glitch-art .topbar {
  border-bottom: 1px solid var(--line);
  box-shadow: 4px 2px 0 color-mix(in srgb, #2b69d1, transparent 48%), -3px 4px 0 color-mix(in srgb, var(--accent), transparent 50%);
  background: color-mix(in srgb, var(--bg), transparent 3%);
}

.theme-glitch-art .brand {
  font-family: var(--mono);
  font-weight: 760;
}

.theme-glitch-art .brand::before {
  content: "";
  width: 24px;
  height: 18px;
  background:
    linear-gradient(0deg, transparent 0 4px, var(--accent) 4px 8px, transparent 8px 11px, #2b69d1 11px 15px, transparent 15px);
  transform: skewX(-12deg);
}

.theme-glitch-art .hero {
  min-height: min(800px, 90vh);
}

.theme-glitch-art .hero::before,
.theme-glitch-art .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.theme-glitch-art .hero::before {
  inset: 13% 0 14% 44%;
  border: 1px solid var(--line);
  background:
    linear-gradient(0deg, transparent 0 15%, color-mix(in srgb, var(--accent), transparent 22%) 15% 19%, transparent 19% 45%, color-mix(in srgb, #2b69d1, transparent 20%) 45% 49%, transparent 49% 77%, var(--line) 77% 78%, transparent 78%),
    repeating-linear-gradient(90deg, transparent 0 33px, color-mix(in srgb, var(--line), transparent 86%) 33px 34px);
  opacity: .52;
  box-shadow: 9px 0 0 color-mix(in srgb, var(--accent), transparent 42%), -7px 0 0 color-mix(in srgb, #2b69d1, transparent 44%);
}

.theme-glitch-art .hero::after {
  right: 8%;
  top: 23%;
  width: clamp(90px, 16vw, 170px);
  height: clamp(150px, 28vw, 300px);
  background:
    linear-gradient(90deg, var(--accent) 0 18%, transparent 18% 38%, #2b69d1 38% 55%, transparent 55% 70%, var(--fg) 70% 72%, transparent 72%);
  clip-path: polygon(0 0, 100% 0, 100% 13%, 16% 13%, 16% 28%, 88% 28%, 88% 36%, 0 36%, 0 61%, 74% 61%, 74% 70%, 24% 70%, 24% 86%, 100% 86%, 100% 100%, 0 100%);
  opacity: .58;
}

.theme-glitch-art h1 {
  max-width: 800px;
  font-weight: 790;
  line-height: .91;
  text-shadow: 3px 0 0 color-mix(in srgb, var(--accent), transparent 48%), -2px 0 0 color-mix(in srgb, #2b69d1, transparent 50%);
}

.theme-glitch-art h2 {
  text-shadow: 2px 0 0 color-mix(in srgb, var(--accent), transparent 62%), -2px 0 0 color-mix(in srgb, #2b69d1, transparent 64%);
}

.theme-glitch-art .kicker,
.theme-glitch-art .section-index,
.theme-glitch-art .stack,
.theme-glitch-art .generated-desc-meta,
.theme-glitch-art .time-label {
  font-family: var(--mono);
}

.theme-glitch-art .kicker::before { content: "// "; color: #2b69d1; }

.theme-glitch-art .section {
  border-top: 0;
  background:
    linear-gradient(90deg, var(--line) 0 28%, transparent 28% 30%, var(--accent) 30% 48%, transparent 48% 51%, #2b69d1 51% 64%, transparent 64%) left top / 100% 3px no-repeat;
}

.theme-glitch-art .section-head {
  grid-template-columns: minmax(94px, .2fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 68px);
}

.theme-glitch-art .section-index {
  align-self: start;
  color: var(--fg);
  padding-left: 9px;
  border-left: 3px solid var(--accent);
  box-shadow: -6px 0 0 #2b69d1;
}

.theme-glitch-art :is(.card, .hero-card, .principle, .timeline-item) {
  border: 0;
  outline: 1px solid var(--line);
  box-shadow: 6px 4px 0 color-mix(in srgb, #2b69d1, transparent 72%), -4px -2px 0 color-mix(in srgb, var(--accent), transparent 76%);
  background: var(--card);
}

.theme-glitch-art :is(.card, .hero-card, .principle, .timeline-item)::before {
  content: "";
  position: absolute;
  top: 23%;
  left: -5px;
  width: calc(100% + 10px);
  height: 4px;
  background: linear-gradient(90deg, #2b69d1 0 14%, transparent 14% 68%, var(--accent) 68% 91%, transparent 91%);
  opacity: .46;
  pointer-events: none;
}

.theme-glitch-art .cards .card:nth-child(even)::before {
  top: 71%;
  transform: translateX(3px);
}

.theme-glitch-art .tag,
.theme-glitch-art .skill-pill,
.theme-glitch-art .reveal-stat {
  border-radius: 0;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent), transparent 55%), -2px -1px 0 color-mix(in srgb, #2b69d1, transparent 58%);
}

.theme-glitch-art .contact-panel,
.theme-glitch-art .reveal {
  border-radius: 0;
  outline: 1px solid var(--line);
  box-shadow: 9px 7px 0 color-mix(in srgb, #2b69d1, transparent 58%), -7px -5px 0 color-mix(in srgb, var(--accent), transparent 62%);
  background: var(--card-strong);
}

.theme-glitch-art .reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, transparent 0 17%, color-mix(in srgb, #2b69d1, transparent 76%) 17% 20%, transparent 20% 73%, color-mix(in srgb, var(--accent), transparent 78%) 73% 76%, transparent 76%);
  transform: translateX(5px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-glitch-art .hero::before { animation: glitch-local-slice 9s steps(1, end) infinite; }
}

@keyframes glitch-local-slice {
  0%, 91%, 94%, 100% { transform: translate(0); }
  92% { transform: translate(7px, -2px); }
  93% { transform: translate(-4px, 2px); }
}

@media (max-width: 720px) {
  .theme-glitch-art .hero { min-height: auto; }
  .theme-glitch-art .hero::before,
  .theme-glitch-art .hero::after { opacity: .14; }
  .theme-glitch-art .section-head { grid-template-columns: 1fr; }
  .theme-glitch-art .section-index { width: fit-content; }
  .theme-glitch-art h1 { text-shadow: 2px 0 0 color-mix(in srgb, var(--accent), transparent 62%), -1px 0 0 color-mix(in srgb, #2b69d1, transparent 62%); }
}

.theme-glitch-art .regenerating {
  background:
    linear-gradient(0deg, transparent 0 18%, color-mix(in srgb, var(--accent), transparent 52%) 18% 21%, transparent 21% 67%, color-mix(in srgb, #2b69d1, transparent 58%) 67% 71%, transparent 71%),
    linear-gradient(90deg, transparent 0 76%, color-mix(in srgb, #2b69d1, transparent 84%) 76% 79%, transparent 79%),
    var(--bg);
  color: var(--fg);
}

.theme-glitch-art .regen-box {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
  box-shadow: 9px 6px 0 color-mix(in srgb, #2b69d1, transparent 42%), -7px -5px 0 color-mix(in srgb, var(--accent), transparent 45%);
  font-family: var(--mono);
}

.theme-glitch-art .regen-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 24% -7px auto;
  height: 6px;
  background: linear-gradient(90deg, #2b69d1 0 17%, transparent 17% 64%, var(--accent) 64% 91%, transparent 91%);
  opacity: .56;
}

.theme-glitch-art .regen-box::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto -5px 22%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0 34%, transparent 34% 71%, #2b69d1 71% 100%);
  opacity: .46;
}

.theme-glitch-art .regen-line.active {
  text-shadow: 2px 0 0 color-mix(in srgb, var(--accent), transparent 35%), -2px 0 0 color-mix(in srgb, #2b69d1, transparent 38%);
}

.theme-glitch-art .regen-line::before { border-radius: 0; }
.theme-glitch-art .regen-line.active::before { background: var(--accent); box-shadow: 3px 0 0 #2b69d1; }

@media (prefers-reduced-motion: no-preference) {
  .theme-glitch-art .regenerating.active .regen-box::before {
    animation: glitch-regen-slice .72s steps(2, end) both;
  }
}

@keyframes glitch-regen-slice {
  0%, 39%, 62%, 100% { transform: translateX(0); }
  40% { transform: translateX(8px); }
  61% { transform: translateX(-5px); }
}