/* 05 Glass card, single accent edge */
.glass { position: relative; padding: var(--sp-6); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-base-2) 55%, transparent);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent); overflow: hidden; }
.glass::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  background: var(--c-accent); border-radius: 0 3px 3px 0; box-shadow: 0 0 24px var(--c-accent-glow); }

/* 09 Split-flap counter */
.flap { display: inline-flex; gap: 4px; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2rem, 6vw, 3.5rem); }
.flap i { font-style: normal; position: relative; width: 1.1ch; padding: .12em .18em; text-align: center; line-height: 1;
  background: linear-gradient(var(--c-base-2) 50%, color-mix(in srgb, var(--c-base-2) 80%, #000) 50%);
  border-radius: var(--r-sm); color: var(--c-text); box-shadow: inset 0 -1px 0 rgba(255,255,255,.04); }
.flap i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--c-base-1); }
.flap i.flip { animation: aq-flip var(--dur-slow) var(--ease-in-out); }
.flap i.hi { color: var(--c-accent); }
@keyframes aq-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }

/* 13 Blueprint grid / dot-matrix backdrop (pattern on ::before so content isn't masked) */
.blueprint { position: relative; isolation: isolate; background-color: var(--c-base-1); }
.blueprint::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c-text) 18%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--c-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c-text) 5%, transparent) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 40%, transparent 85%); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .wave i { animation: none; transform: scaleY(calc(.3 + var(--i) * .07)); }
  .live i::after { animation: none; }
  .magnetic, .magnetic span { transform: none !important; }
}