/* ─── ZENLESS ZONE ZERO ───────────────────────────────── */
html[data-theme="zzz"] body::before {
  background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px) 0 0 / 7px 7px;
  -webkit-mask: linear-gradient(180deg, #000, transparent 55%);
          mask: linear-gradient(180deg, #000, transparent 55%);
}
html[data-theme="zzz"] body::after {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 6px; z-index: 10;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #0b0b0c 12px 24px);
}
html[data-theme="zzz"] .hero h1, html[data-theme="zzz"] h3 { text-transform: uppercase; }
html[data-theme="zzz"] .photo { border: 3px solid var(--accent); box-shadow: 6px 6px 0 #ff6a1a; }
/* Built from the Shop / Drill card menus: charcoal rounded cards on a carbon backdrop, the selected
   card gets a thick lime outline, dark pill buttons, the active tab is a lime pill */
html[data-theme="zzz"] { --card: #1a1a1c; --card-line: #2c2c30; }
html[data-theme="zzz"] body {
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px) var(--bg);
}
html[data-theme="zzz"] h2 small {                                    /* active-tab pill */
  background: var(--accent); color: var(--accent-ink); padding: 1px 12px; border-radius: 999px;
  font: 700 .74rem/1.6 var(--body); text-transform: uppercase; letter-spacing: .04em;
}
html[data-theme="zzz"] .row, html[data-theme="zzz"] .timeline {
  background: var(--card); border: 0; border-radius: 18px; padding: 22px 24px; margin-bottom: 12px;
  box-shadow: inset 0 0 0 2px var(--card-line); transition: opacity .2s ease, box-shadow .15s;
}
html[data-theme="zzz"] .row:last-child { border: 0; }
html[data-theme="zzz"] .row:is(:hover, :focus-within) { box-shadow: inset 0 0 0 3px var(--accent); }
html[data-theme="zzz"] .shot { border: 0; border-radius: 18px; outline: 2px solid var(--card-line); outline-offset: -2px; }   /* outline paints over the screenshot */
html[data-theme="zzz"] .shot:hover { outline: 3px solid var(--accent); outline-offset: -3px; }
html[data-theme="zzz"] .pix, html[data-theme="zzz"] .thumb { border-radius: 10px; }

/* buttons: dark pill, heavy caps, ring icon; lime on hover */
html[data-theme="zzz"] a.arrow {
  display: inline-flex; align-items: center; gap: .45em; padding: .15em 1em .15em .55em;
  border-radius: 999px; background: #2a2a2e; color: var(--text); text-decoration: none;
  font: 700 .78em/1.7 var(--body); text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 0 0 1.5px #000; transition: background .15s, color .15s;
}
html[data-theme="zzz"] a.arrow::before { content: ''; width: .7em; height: .7em; border: 2px solid currentColor; border-radius: 50%; }
html[data-theme="zzz"] a.arrow::after { content: none; }
html[data-theme="zzz"] a.arrow:hover { background: var(--accent); color: var(--accent-ink); }
html[data-theme="zzz"] .theme summary { background: var(--card); border-color: var(--card-line); display: flex; align-items: center; gap: 8px; }
html[data-theme="zzz"] .theme summary::before {                       /* the red back button from the top bar */
  content: ''; width: 1.6em; height: 1.1em; border-radius: 999px; background: #e5322d;
}
html[data-theme="zzz"] .switch { background: var(--card); border-color: var(--card-line); border-radius: 16px; }
html[data-theme="zzz"] .switch button { border-color: transparent; }