.is-seq > li .wpanel {
		transition: opacity 240ms ease;
	}

	
	@media (prefers-reduced-motion: no-preference) {
		:where(.is-seq) > li:not(.is-play, .is-done) :where(*, *::before, *::after) {
			transition: all var(--reset-dur) ease;
		}
	}

	.is-seq.is-rewind > li .wpanel {
		opacity: 0;
	}
@container (width < 700px) {
		.wrap .swipe {
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: min(86%, 340px);
			grid-template-columns: none;
			grid-template-rows: none;
			gap: var(--space-3);
			overflow-x: auto;
			overflow-y: hidden;
			overscroll-behavior-inline: contain;
			scroll-snap-type: inline mandatory;
			scroll-padding-inline: var(--gutter);
			
			margin-inline: calc(var(--gutter) * -1);
			padding-inline: var(--gutter);
			
			padding-block-end: 24px;
			margin-block-end: -24px;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}

			> * {
				grid-column: auto;
				grid-row: auto;
				scroll-snap-align: start;
			}
		}
	}
.art__spot {
		fill: url(#art-spot);
	}

	.art__spark {
		fill: var(--art-paper);
		opacity: 0.9;
	}

	.art__line--faint {
		opacity: 0.6;
	}

	.art__pill-line {
		fill: var(--art-mint-deep);
		opacity: 0.35;
	}

	.art__ink {
		fill: var(--art-ink);
	}

	.art__paper-hole {
		fill: var(--art-paper-shade);
	}

	.art__box {
		fill: var(--art-paper);
		stroke: var(--art-line-strong);
		stroke-width: 1.6;
	}

	.art__shade {
		fill: var(--art-paper-shade);
		stroke: var(--art-paper-edge);
		stroke-width: 1;
	}

	.art__label {
		stroke-width: 1;
	}

	.art__slot {
		fill: var(--art-paper);
		stroke: var(--art-line);
		stroke-width: 1;
	}

	.art__face {
		fill: var(--art-paper);
		stroke: var(--art-line);
		stroke-width: 1.5;
	}

	.art__tick {
		fill: var(--art-line-strong);
	}

	.art__hand {
		fill: none;
		stroke: var(--art-ink);
		stroke-width: 3;
		stroke-linecap: round;
	}

	.art__glass {
		fill: var(--art-glass);
		stroke: var(--art-paper-edge);
		stroke-width: 1.5;
	}

	.art__glass-hi {
		fill: var(--art-paper);
		opacity: 0.85;
	}

	
	.art__chart-area {
		fill: var(--art-sky);
		opacity: 0.45;
	}

	.art__chart-line,
	.art__pen {
		fill: none;
		stroke: var(--art-sky-deep);
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.art__chart-line {
		stroke-width: 3;
	}

	.art__pen {
		stroke-width: 2.2;
	}

	.art__chart-dot {
		fill: var(--art-paper);
		stroke: var(--art-sky-deep);
		stroke-width: 2;
	}

	.art__chart-end {
		stroke: var(--art-paper);
		stroke-width: 2;
	}

	
	.art__lens-bg {
		fill: var(--art-paper);
	}

	.art__lens-tint {
		fill: var(--art-sky);
		opacity: 0.12;
	}

	.art__lens-glare {
		fill: var(--art-paper);
		opacity: 0.55;
	}

	.art__lens-ring {
		fill: none;
		stroke: url(#art-mint);
		stroke-width: 6.5;
	}

	.art__lens-edge {
		fill: none;
		stroke: var(--art-mint-edge);
		stroke-width: 1;
		opacity: 0.6;
	}

	.art__lens-hi {
		fill: none;
		stroke: var(--art-paper);
		stroke-width: 2.4;
		stroke-linecap: round;
		opacity: 0.8;
	}

	.art__handle,
	.art__handle-cast,
	.art__handle-hi {
		fill: none;
		stroke-linecap: round;
	}

	.art__handle {
		stroke: var(--art-mint-deep);
		stroke-width: 10;
	}

	.art__handle-cast {
		stroke: var(--art-shadow);
		stroke-width: 9;
		opacity: 0.1;
	}

	.art__handle-hi {
		stroke: var(--art-paper);
		stroke-width: 2.2;
		opacity: 0.45;
	}

	
	.art__alert,
	.art__liquid,
	.art__charge,
	.art__moon,
	.art__tag-a {
		fill: url(#art-sky);
	}

	.art__alert-depth {
		fill: var(--art-sky-depth);
	}

	.art__alert-soft {
		fill: var(--art-sky-soft);
	}

	.art__today {
		fill: var(--art-sky-soft);
		stroke: var(--art-sky-deep);
		stroke-width: 1.6;
	}

	.art__liquid-top {
		fill: var(--art-sky);
	}

	.art__cal-head,
	.art__tag-b {
		fill: url(#art-mint);
	}

	.art__tag-c {
		fill: var(--art-line-strong);
	}

	.art__sticker {
		fill: url(#art-sky);
		stroke: var(--art-paper);
		stroke-width: 3;
		stroke-linejoin: round;
	}
.consent-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: 7px var(--space-4) 7px 7px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		color: var(--color-text-secondary);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
		cursor: pointer;

		&[hidden] {
			display: none;
		}

		&:hover {
			background: var(--color-surface);
			color: var(--color-text);
		}

		&:has(:focus-visible) {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}
	}

	
.consent-toggle__box {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.4em;
  width: 1.4em;
  height: 1.4em;

  input {
      appearance: none;
      width: 100%;
      height: 100%;
      margin: 0;
      border: 1.5px solid var(--color-border-strong);
      border-radius: 50%;
      background: transparent;
      cursor: inherit;

      &:checked {
          border-color: var(--color-accent);
          background: var(--color-accent);
      }

      &:focus-visible {
          outline: none;
      }
  }

  svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
			fill: none;
     	stroke: var(--color-accent-contrast);
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
			pointer-events: none;
			visibility: hidden;
      /* rest unchanged */
  }

		input:checked + svg {
			visibility: visible;
		}
}
	
	@media (forced-colors: active) {
		.consent-toggle__box svg {
			stroke: CanvasText;
		}
	}

.consent-toggle {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}
.site-footer {
		position: relative;
		margin-block-start: var(--section-gap);
		padding-block-start: clamp(36px, 4vw, 56px);
		border-block-start: 1px solid var(--color-border);
		
		overflow: hidden;
	}

	
	
	.site-footer__grid {
		display: grid;
		gap: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 56px);
		grid-template-columns: 1fr;
		-webkit-hyphens: auto;
		hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
		-webkit-hyphenate-limit-before: 4;
		-webkit-hyphenate-limit-after: 4;
	}

	@media (min-width: 900px) {
		.site-footer__grid {
			grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
		}

		.site-footer__brand {
			grid-column: 1;
			grid-row: 1;
		}

		.site-footer__notes {
			grid-column: 4;
			grid-row: 1;
			align-self: start;
		}
	}

	.site-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	
	.site-footer__parent {
		inline-size: 150px;
		opacity: 0.85;
	}

	
	.site-footer__about {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--space-3) var(--space-3);
		max-inline-size: 38ch;
		font-size: var(--text-sm);
		line-height: var(--lh-normal);
		color: var(--color-text-secondary);

		p {
			margin: 0;
		}
	}

	.site-footer__icon {
		display: grid;
		place-items: center;
		block-size: 1lh;
		inline-size: 26px;
	}

	.site-footer__column {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);

		.eyebrow {
			margin: 0;
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		a {
			color: var(--color-text);
			text-decoration: none;
			transition: color 200ms var(--ease-out);

			&:hover {
				color: var(--color-accent-ink);
			}
		}
	}

	.site-footer__notes {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		align-self: end;
		max-inline-size: 62ch;

		p {
			margin: 0;
			font-size: var(--text-sm);
			line-height: var(--lh-normal);
			color: var(--color-text-muted);
		}
	}

	.site-footer__contact a,
	.site-footer__pending {
		color: var(--color-text-secondary);
	}

	
	.site-footer__legal {
		display: grid;
		gap: var(--space-1);
	}

	.site-footer__toggles {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	
	
	.site-footer__inner {
		position: relative;
		z-index: 1;
	}

	.site-footer__wordmark {
		position: relative;
		z-index: 0;
		
		margin: -0.05em 0 -0.22em;
		padding-inline: var(--gutter);
		font-family: var(--font-display);
		font-size: clamp(5rem, 25vw, 23rem);
		line-height: 0.78;
		letter-spacing: var(--ls-display);
		text-align: center;
		white-space: nowrap;
		
		color: color-mix(in srgb, var(--color-text) 6%, transparent);
		user-select: none;
		
		mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 92%);
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

	
	@container (width < 700px) {
		.site-footer__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-5) var(--space-4);
		}

		.site-footer__brand,
		.site-footer__notes {
			grid-column: 1 / -1;
		}
	}

	
	@media (max-width: 719px) {
		.site-footer__wordmark {
			display: none;
		}

		.site-footer {
			padding-block-end: var(--space-6);
		}
	}