/* ==========================================================================
   ABYZOR ARTIST LAB — /artist-lab/
   Built on the ABYZOR design system (az-*). Only the page's own pieces live
   here; type, buttons, steps and the shell come from abyzor-system.css.
   ========================================================================== */

.artist-lab-page {
  --az-accent: #8EC0FF;
  --az-accent-soft: rgba(142, 192, 255, 0.13);
  --al-danger: #FF8A8A;
}

.artist-lab-main {
  position: relative;
  overflow: hidden;
}

.artist-lab-atmosphere {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100vh, 980px);
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 22% 20%, rgba(142, 192, 255, 0.11), transparent 62%),
    radial-gradient(ellipse 45% 45% at 85% 40%, rgba(255, 255, 255, 0.03), transparent 60%);
}

.artist-lab-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
}

.artist-lab-main > :not(.artist-lab-atmosphere) { position: relative; z-index: 1; }

.al-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--az-accent);
  box-shadow: 0 0 10px var(--az-accent);
}

/* --- Hero --------------------------------------------------------------- */

.al-hero {
  /* The shell header grows by the notch (safe-area) on phones, so the top
     spacing must grow with it or the header covers the first line. */
  padding-top: max(clamp(120px, 16vh, 168px), calc(var(--az-shell-header, 80px) + env(safe-area-inset-top, 0px) + 40px));
  padding-bottom: clamp(64px, 9vh, 104px);
}

.al-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

@media (max-width: 960px) {
  .al-hero-grid { grid-template-columns: 1fr; }
}

.al-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.al-hero-title { margin: 0; display: flex; flex-direction: column; gap: 6px; }

.al-hero-brand {
  font-family: var(--az-display);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.32em;
  color: var(--az-fg-3);
}

.al-hero-name {
  font-family: var(--az-display);
  font-weight: 800;
  font-size: clamp(3rem, 8.4vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--az-fg);
}

.al-hero-hook {
  margin: 0;
  font-family: var(--az-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
  color: var(--az-accent);
}

.al-hero-lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: var(--az-fg-2);
}

.al-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 560px) {
  .al-hero-ctas { width: 100%; }
  .al-hero-ctas .az-btn { width: 100%; }
}

/* --- Sections ----------------------------------------------------------- */

.al-section {
  padding-block: clamp(64px, 9vh, 112px);
  border-top: 1px solid var(--az-line);
}

.al-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 64ch;
  margin-bottom: clamp(28px, 4vw, 48px);
}


/* --- Form layout -------------------------------------------------------- */

.al-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 960px) {
  .al-form-layout { grid-template-columns: 1fr; }
}

.al-form-aside {
  position: sticky;
  top: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

@media (max-width: 960px) {
  .al-form-aside { position: static; }
}

.al-form-intro { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--az-fg-2); max-width: 40ch; }

.al-reqs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-reqs li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
  color: var(--az-fg);
}

.al-reqs li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--az-accent);
  border-bottom: 2px solid var(--az-accent);
  transform: rotate(-45deg);
}

.al-aside-note {
  margin: 0;
  font-family: var(--az-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--az-fg-4);
}

.al-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.al-block {
  margin: 0;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  background: var(--az-raise);
  min-width: 0;
}

.al-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 22px;
  font-family: var(--az-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--az-fg);
  float: left;
  width: 100%;
}

.al-block-title + * { clear: both; }

.al-block-title span {
  font-family: var(--az-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--az-accent);
}

.al-form-stack { display: flex; flex-direction: column; gap: 20px; }

.al-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.al-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .al-field-row { grid-template-columns: 1fr; gap: 20px; }
}

.al-field label,
.al-field-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--az-fg);
}

.al-req,
.al-opt {
  font-family: var(--az-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.al-req { color: var(--az-accent); }
.al-opt { color: var(--az-fg-4); }

.al-input,
.al-textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--az-line-2);
  border-radius: var(--az-r-sm);
  background: rgba(0, 0, 0, 0.4);
  color: var(--az-fg);
  font-family: var(--az-body);
  font-size: 0.94rem;
  transition: border-color var(--az-t-fast), background var(--az-t-fast), box-shadow var(--az-t-fast);
}

.al-textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

.al-input::placeholder,
.al-textarea::placeholder { color: var(--az-fg-4); }

.al-input:focus,
.al-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--az-accent) 60%, transparent);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 3px var(--az-accent-soft);
}

.al-input.is-invalid,
.al-textarea.is-invalid { border-color: var(--al-danger); }

.al-helper { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--az-fg-4); }

.al-field-error {
  display: none;
  margin: 0;
  font-size: 0.8rem;
  color: var(--al-danger);
}

.al-field-error.is-visible { display: block; }

/* Repeatable link rows */
.al-link-list { display: flex; flex-direction: column; gap: 10px; }

.al-link-row { display: flex; gap: 8px; align-items: center; }
.al-link-row .al-input { flex: 1; }

.al-link-remove {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--az-line-2);
  border-radius: var(--az-r-sm);
  background: transparent;
  color: var(--az-fg-3);
  cursor: pointer;
  transition: color var(--az-t-fast), border-color var(--az-t-fast);
}

.al-link-remove:hover { color: var(--al-danger); border-color: var(--al-danger); }

.al-btn-ghost {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--az-line-3);
  border-radius: 100px;
  background: transparent;
  color: var(--az-accent);
  font-family: var(--az-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--az-t-fast), border-color var(--az-t-fast);
}

.al-btn-ghost::before { content: '+'; font-size: 1rem; line-height: 1; }
.al-btn-ghost:hover { background: var(--az-accent-soft); border-color: var(--az-accent); }

/* Checkboxes */
.al-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .al-tools-grid { grid-template-columns: 1fr; }
}

.al-tool-option,
.al-consent {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.al-field .al-tool-option {
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--az-line-2);
  border-radius: var(--az-r-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--az-fg-2);
  transition: border-color var(--az-t-fast), background var(--az-t-fast), color var(--az-t-fast);
}

.al-tool-option:hover { border-color: var(--az-line-3); }

.al-tool-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--az-accent) 55%, transparent);
  background: var(--az-accent-soft);
  color: var(--az-fg);
}

.al-tool-option input,
.al-consent input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  top: 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--az-line-3);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background var(--az-t-fast), border-color var(--az-t-fast);
}

.al-tool-option input:checked,
.al-consent input:checked {
  border-color: var(--az-accent);
  background: var(--az-accent);
}

.al-tool-option input:checked::after,
.al-consent input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #08080A;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.al-tool-option input:focus-visible,
.al-consent input:focus-visible {
  outline: 2px solid var(--az-accent);
  outline-offset: 2px;
}

.al-consent-list { display: flex; flex-direction: column; gap: 16px; }

.al-consent {
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--az-fg-2);
}

.al-consent input { margin-top: 3px; }
.al-consent .al-req,
.al-consent .al-opt { margin-left: 6px; white-space: nowrap; }

#al-consent-error { margin-top: 12px; }

/* Honeypot */
.al-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit */
.al-submit-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 8px;
}

.al-submit { min-width: 240px; }
.al-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }

@media (max-width: 560px) {
  .al-submit { width: 100%; }
}

.al-form-error {
  display: none;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--al-danger) 45%, transparent);
  border-radius: var(--az-r-sm);
  background: rgba(255, 138, 138, 0.08);
  font-size: 0.85rem;
  color: var(--al-danger);
}

.al-form-error.is-visible { display: block; }

.al-fine-print { margin: 0; font-size: 0.8rem; color: var(--az-fg-4); }
.al-fine-print a { color: var(--az-accent); text-decoration: underline; text-underline-offset: 3px; }

/* --- Success ------------------------------------------------------------ */

.al-success-panel { display: none; }

.al-success-panel.is-visible {
  display: block;
  padding-block: clamp(140px, 20vh, 200px) clamp(80px, 12vh, 140px);
}

.al-success-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.al-success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--az-accent) 45%, transparent);
  border-radius: 50%;
  background: var(--az-accent-soft);
  color: var(--az-accent);
  font-size: 1.2rem;
}

.al-success-panel h2 {
  margin: 0;
  font-family: var(--az-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.al-success-panel p { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.65; color: var(--az-fg-2); }

.al-form-section[hidden],
.al-about-section[hidden],
.al-hero[hidden],
.al-tagline-bar[hidden] { display: none; }

/* --- Tagline ------------------------------------------------------------ */

.al-tagline-bar {
  padding-block: 44px;
  border-top: 1px solid var(--az-line);
  text-align: center;
}

.al-tagline-bar p {
  margin: 0;
  font-family: var(--az-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--az-fg-4);
}

/* ==========================================================================
   PERSONALITY — REC card, icons, "what we love", flow, perks, progress
   ========================================================================== */

.al-accent { color: var(--az-accent); }

.al-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--az-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--az-fg-3);
}

.al-hero-tags li { display: inline-flex; align-items: center; gap: 8px; }
.al-hero-tags i { color: var(--az-accent); }

/* --- REC card ------------------------------------------------------------ */

.al-rec {
  position: relative;
  padding: 16px;
  border: 1px solid var(--az-line-2);
  border-radius: var(--az-r-lg);
  background: linear-gradient(180deg, #101218 0%, #08090C 100%);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 80px rgba(142, 192, 255, 0.06);
  transform: rotate(1.2deg);
}

.al-rec-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: var(--az-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--az-fg-2);
}

.al-rec-live { display: inline-flex; align-items: center; gap: 8px; color: #FF6B6B; font-weight: 700; }

.al-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF4D4D;
  box-shadow: 0 0 12px #FF4D4D;
  animation: al-blink 1.2s steps(2, jump-none) infinite;
}

@keyframes al-blink { 50% { opacity: 0.25; } }

.al-rec-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--az-line);
  border-radius: 12px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 11.1%),
    #07080B;
}

.al-rec-roll i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 8%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--az-accent), #B9D6FF);
  box-shadow: 0 0 14px rgba(142, 192, 255, 0.45);
}

.al-rec-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  animation: al-play 6s linear infinite;
}

@keyframes al-play { from { left: 0; } to { left: 100%; } }

.al-rec-wave {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: center;
  gap: 3px;
  height: 44px;
  margin: 14px 2px 10px;
}

.al-rec-wave i {
  display: block;
  height: 30%;
  border-radius: 2px;
  background: rgba(142, 192, 255, 0.55);
  animation: al-wave 1.4s var(--az-ease-io) infinite alternate;
}

.al-rec-wave i:nth-child(3n) { animation-duration: 0.9s; }
.al-rec-wave i:nth-child(4n+1) { animation-duration: 1.7s; animation-delay: -0.5s; }
.al-rec-wave i:nth-child(5n+2) { animation-duration: 1.1s; animation-delay: -0.9s; }
.al-rec-wave i:nth-child(odd) { animation-delay: -0.3s; }

@keyframes al-wave { from { height: 18%; } to { height: 100%; } }

.al-rec-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--az-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--az-fg-4);
}

.al-rec-meta span:last-child { color: var(--az-accent); }

.al-rec-sticker {
  position: absolute;
  padding: 7px 12px;
  border-radius: 8px;
  font-family: var(--az-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.al-rec-sticker--a { top: -14px; right: 22px; background: var(--az-accent); color: #08080A; transform: rotate(4deg); }
.al-rec-sticker--b { bottom: 54px; left: -18px; background: #F5F5F7; color: #08080A; transform: rotate(-5deg); }

@media (max-width: 960px) {
  .al-rec { max-width: 560px; transform: none; }
}

@media (max-width: 560px) {
  .al-rec-sticker--b { left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-rec-dot, .al-rec-playhead, .al-rec-wave i { animation: none; }
  .al-rec-playhead { left: 38%; }
  .al-rec-wave i { height: 60%; }
  .al-rec-wave i:nth-child(odd) { height: 85%; }
}

/* --- What we love -------------------------------------------------------- */

.al-love-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) { .al-love-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .al-love-grid { grid-template-columns: 1fr; } }

.al-love {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  background: var(--az-raise);
  transition: border-color var(--az-t), transform var(--az-t), background var(--az-t);
}

.al-love:hover {
  border-color: color-mix(in srgb, var(--az-accent) 40%, transparent);
  background: radial-gradient(120% 100% at 0% 0%, var(--az-accent-soft) 0%, transparent 60%), var(--az-raise);
  transform: translateY(-3px);
}

.al-love > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: var(--az-accent-soft);
  color: var(--az-accent);
  font-size: 1.05rem;
}

.al-love h3 { margin: 0; font-family: var(--az-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--az-fg); }
.al-love p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--az-fg-3); }

/* --- Flow ---------------------------------------------------------------- */

.al-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.al-flow::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 28px;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--az-accent), transparent);
  opacity: 0.5;
}

.al-flow li { position: relative; display: flex; flex-direction: column; gap: 8px; }

.al-flow-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--az-accent) 40%, transparent);
  border-radius: 50%;
  background: var(--az-base);
  color: var(--az-accent);
  font-size: 1.1rem;
  box-shadow: 0 0 0 6px var(--az-base);
}

.al-flow-n { font-family: var(--az-mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--az-accent); }
.al-flow h3 { margin: 0; font-family: var(--az-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--az-fg); }
.al-flow p { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--az-fg-3); }

@media (max-width: 860px) {
  .al-flow { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .al-flow::before { display: none; }
}

@media (max-width: 480px) {
  .al-flow { grid-template-columns: 1fr; }
}

.al-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 860px) { .al-perks { grid-template-columns: 1fr; } }

.al-perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--az-line);
  border-left: 2px solid var(--az-accent);
  border-radius: 4px var(--az-r-md) var(--az-r-md) 4px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--az-fg-2);
}

.al-perk i { margin-top: 3px; color: var(--az-accent); }
.al-perk b { color: var(--az-fg); font-weight: 600; }

/* --- Form: icons + live progress ---------------------------------------- */

.al-block-title > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--az-accent-soft);
  color: var(--az-accent);
  font-size: 0.85rem;
}

.al-progress {
  width: 100%;
  max-width: 320px;
  height: 4px;
  border-radius: 4px;
  background: var(--az-line-2);
  overflow: hidden;
}

.al-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--az-accent), #CFE3FF);
  box-shadow: 0 0 12px var(--az-accent);
  transition: width var(--az-t);
}

.al-reqs li { color: var(--az-fg-3); transition: color var(--az-t-fast); }

.al-reqs li::before {
  width: 14px;
  height: 14px;
  left: 0;
  top: 3px;
  border: 1px solid var(--az-line-3);
  border-radius: 50%;
  transform: none;
  transition: background var(--az-t-fast), border-color var(--az-t-fast);
}

.al-reqs li.is-done { color: var(--az-fg); }

.al-reqs li.is-done::before {
  border-color: var(--az-accent);
  background: var(--az-accent);
  box-shadow: 0 0 10px rgba(142, 192, 255, 0.5);
}

.al-reqs li.is-done::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #08080A;
  border-bottom: 2px solid #08080A;
  transform: rotate(-45deg);
}

.al-aside-note.is-ready { color: var(--az-accent); }