:root {
  --ink: #2c2729;
  --paper: #fffdf9;
  --wash: #f4ece7;
  --accent: #9e707a;
  --deep: #684953;
  --soft: #ead4d7;
  --sage: #879583;
  --line: rgba(56, 43, 47, 0.16);
  --shadow: 0 24px 70px rgba(58, 42, 48, 0.15);
  --sans: "DM Sans", sans-serif;
  --script: "Allura", cursive;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
}

body[data-demo="digital-invitation"] {
  --wash: #e7e1ee;
  --accent: #8c799e;
  --deep: #4f455d;
  --soft: #d8cde1;
}

body[data-demo="bridal-shower"] {
  --wash: #f5e6e2;
  --accent: #c07f87;
  --deep: #784d56;
  --soft: #edcbc7;
}

body[data-demo="celebration-weekend"] {
  --wash: #f8dfcd;
  --accent: #df725b;
  --deep: #743d34;
  --soft: #f3bda8;
}

body[data-demo="weekend-guide"] {
  --wash: #e5e8f2;
  --accent: #737c9d;
  --deep: #434a67;
  --soft: #ccd1e3;
}

body[data-demo="reception-companion"] {
  --wash: #eee1d5;
  --accent: #a37258;
  --deep: #63483d;
  --soft: #dcc2ae;
}

body[data-demo="qr-guest"] {
  --wash: #e4e9e1;
  --accent: #778573;
  --deep: #485645;
  --soft: #cdd8ca;
}

body[data-demo="memory-wall"] {
  --wash: #f0dfe3;
  --accent: #a86776;
  --deep: #6f4551;
  --soft: #deb9c1;
}

body[data-demo="thank-you"] {
  --wash: #e9e3ee;
  --accent: #857592;
  --deep: #50475c;
  --soft: #d4c9dc;
}

body[data-demo="anniversary"] {
  --wash: #e3e8df;
  --accent: #7e8d78;
  --deep: #4d5d49;
  --soft: #ccd7c8;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.demo-ribbon {
  position: relative;
  z-index: 100;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 48px;
  color: var(--paper);
  background: var(--deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.demo-ribbon a {
  position: absolute;
  left: 18px;
  text-decoration: none;
}

.experience-nav {
  position: relative;
  z-index: 50;
  display: flex;
  width: min(1180px, calc(100% - 40px));
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.experience-brand {
  color: var(--deep);
  font-family: var(--script);
  font-size: 29px;
  text-decoration: none;
}

.experience-nav nav {
  display: flex;
  gap: 24px;
}

.experience-nav nav a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-action {
  padding: 10px 15px;
  border: 1px solid var(--deep);
  border-radius: 999px;
}

.experience-page {
  overflow: hidden;
}

.section-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.experience-hero {
  position: relative;
  display: grid;
  min-height: calc(100vh - 110px);
  place-items: center;
  overflow: hidden;
  padding: 80px 20px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--soft) 80%, transparent), transparent 28rem),
    radial-gradient(circle at 85% 72%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 30rem),
    var(--wash);
  text-align: center;
}

.experience-hero::before,
.experience-hero::after {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--deep) 24%, transparent);
  border-radius: 50%;
  content: "";
}

.experience-hero::before {
  top: -180px;
  right: -110px;
  width: 520px;
  height: 520px;
}

.experience-hero::after {
  bottom: -230px;
  left: -130px;
  width: 600px;
  height: 600px;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

body[data-demo="save-the-date"] .experience-hero {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 230, 210, 0.92), transparent 32rem),
    radial-gradient(circle at 82% 68%, rgba(158, 112, 122, 0.32), transparent 29rem),
    linear-gradient(135deg, #f8eee8, #ead4d7 52%, #f5e7dc);
  background-size: 130% 130%;
  animation: save-date-glow 10s ease-in-out infinite alternate;
}

body[data-demo="save-the-date"] .hero-inner > * {
  opacity: 0;
  transform: translateY(18px);
  animation: save-date-reveal 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

body[data-demo="save-the-date"] .hero-inner > :nth-child(2) { animation-delay: 180ms; }
body[data-demo="save-the-date"] .hero-inner > :nth-child(3) { animation-delay: 360ms; }
body[data-demo="save-the-date"] .hero-inner > :nth-child(4) { animation-delay: 520ms; }
body[data-demo="save-the-date"] .hero-inner > :nth-child(5) { animation-delay: 680ms; }
body[data-demo="save-the-date"] .hero-inner > :nth-child(6) { animation-delay: 820ms; }

.save-date-countdown {
  position: relative;
  z-index: 4;
  width: min(720px, calc(100% - 28px));
  margin: -74px auto 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 24px;
  background: rgba(255,253,249,.82);
  box-shadow: 0 24px 70px rgba(58,42,48,.16);
  backdrop-filter: blur(18px);
  text-align: center;
}

.save-date-countdown > p {
  margin: 0 0 14px;
  color: var(--deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.countdown-grid span {
  display: grid;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--wash) 65%, white);
}

.countdown-grid strong {
  color: var(--deep);
  font-family: var(--script);
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 400;
  line-height: .85;
}

.countdown-grid small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@keyframes save-date-glow {
  to { background-position: 100% 70%; }
}

@keyframes save-date-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.kicker {
  margin: 0 0 18px;
  color: var(--deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-names {
  margin: 0;
  color: var(--deep);
  font-family: var(--script);
  font-size: clamp(74px, 12vw, 150px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.75;
}

.hero-title {
  max-width: 880px;
  margin: 28px auto 0;
  font-size: clamp(45px, 7vw, 86px);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.hero-date {
  margin: 28px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 620px;
  margin: 24px auto 0;
  color: rgba(44, 39, 41, 0.68);
  font-size: 17px;
  line-height: 1.7;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 23px;
  border: 1px solid var(--deep);
  border-radius: 999px;
  color: var(--paper);
  background: var(--deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.button.secondary {
  color: var(--deep);
  background: transparent;
}

.button:hover {
  box-shadow: 0 12px 25px color-mix(in srgb, var(--deep) 24%, transparent);
  transform: translateY(-2px);
}

.content-section {
  padding: 105px 0;
}

.content-section.tint {
  background: color-mix(in srgb, var(--wash) 68%, var(--paper));
}

.section-heading {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 8vw;
  align-items: end;
  margin-bottom: 50px;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 69px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.section-heading p {
  margin: 0;
  color: rgba(44, 39, 41, 0.68);
  line-height: 1.7;
}

.script-line {
  color: var(--accent);
  font-family: var(--script);
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0;
}

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

.detail-card {
  min-height: 190px;
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 249, 0.7);
}

.detail-card span,
.mini-label {
  color: var(--deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.detail-card strong {
  display: block;
  margin: 22px 0 9px;
  font-size: 23px;
  font-weight: 550;
  letter-spacing: -0.04em;
}

.detail-card p {
  margin: 0;
  color: rgba(44, 39, 41, 0.65);
  font-size: 14px;
  line-height: 1.55;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
}

.tab,
.chip {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.tab.active,
.chip.active,
.chip[aria-pressed="true"] {
  border-color: var(--deep);
  color: var(--paper);
  background: var(--deep);
}

.timeline {
  position: relative;
  display: grid;
  gap: 13px;
  padding-left: 28px;
}

.timeline::before {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 7px;
  width: 1px;
  content: "";
  background: var(--accent);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}

.timeline-item::before {
  position: absolute;
  left: -27px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  content: "";
  background: var(--deep);
}

.timeline-item time {
  color: var(--deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline-item strong {
  display: block;
  margin-bottom: 4px;
}

.timeline-item p {
  margin: 0;
  color: rgba(44, 39, 41, 0.62);
  font-size: 13px;
}

.timeline-item em {
  color: var(--deep);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.form-card {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

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

.wide {
  grid-column: 1 / -1;
}

label {
  display: grid;
  gap: 8px;
  color: var(--deep);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

output,
.status {
  display: block;
  min-height: 21px;
  margin-top: 15px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
}

.overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  padding: 20px;
  place-items: center;
  background: color-mix(in srgb, var(--deep) 82%, transparent);
  transition: opacity 450ms ease, visibility 450ms ease;
}

.overlay.dismissed {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.invitation-cover {
  position: relative;
  display: grid;
  width: min(660px, 94vw);
  min-height: 620px;
  padding: 60px 35px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 320px 320px 28px 28px;
  color: var(--paper);
  background:
    radial-gradient(circle at center, transparent 0 150px, rgba(255,255,255,.16) 151px 152px, transparent 153px),
    var(--deep);
  text-align: center;
}

.invitation-cover .hero-names {
  color: var(--paper);
}

.invitation-cover .kicker {
  color: var(--soft);
}

.invitation-cover .button {
  border-color: var(--paper);
  color: var(--deep);
  background: var(--paper);
}

.envelope-wrap {
  position: relative;
  width: min(480px, 90vw);
  min-height: 390px;
  margin: 35px auto 0;
  perspective: 1200px;
}

.envelope {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 270px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--soft) 78%, var(--paper));
  box-shadow: var(--shadow);
}

.envelope::before,
.envelope::after {
  position: absolute;
  inset: 0;
  content: "";
}

.envelope::before {
  z-index: 3;
  background: linear-gradient(32deg, var(--paper) 0 49.5%, transparent 50%), linear-gradient(-32deg, var(--paper) 0 49.5%, transparent 50%);
  clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
}

.envelope::after {
  z-index: 5;
  clip-path: polygon(0 0, 50% 65%, 100% 0);
  background: color-mix(in srgb, var(--accent) 25%, var(--paper));
  transform-origin: top;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), z-index 0s 350ms;
}

.envelope-letter {
  position: absolute;
  z-index: 2;
  right: 35px;
  bottom: 20px;
  left: 35px;
  min-height: 310px;
  padding: 38px 25px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  text-align: center;
  transition: transform 750ms cubic-bezier(.2,.8,.2,1);
}

.envelope-letter h2 {
  margin: 12px 0;
  color: var(--deep);
  font-family: var(--script);
  font-size: 54px;
  font-weight: 400;
}

.envelope-wrap.open .envelope::after {
  z-index: 1;
  transform: rotateX(180deg);
}

.envelope-wrap.open .envelope-letter {
  z-index: 4;
  transform: translateY(-155px);
}

.feature-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.feature-panel {
  min-height: 260px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
}

.feature-panel h3 {
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.feature-panel p {
  color: rgba(44, 39, 41, 0.65);
  line-height: 1.6;
}

.check-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.check-list label {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.check-list input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--deep);
}

.poll-options {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.poll-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--wash);
}

.meter span {
  display: block;
  width: var(--value, 50%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 300ms ease;
}

.seat-card {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 25px;
  align-items: center;
  margin-top: 20px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--wash);
}

.table-number {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid var(--deep);
  border-radius: 50%;
  color: var(--deep);
  font-family: var(--script);
  font-size: 51px;
}

.menu-card,
.note-card {
  min-height: 220px;
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  text-align: center;
}

.menu-card blockquote,
.note-card blockquote {
  margin: 0;
  color: var(--deep);
  font-family: var(--script);
  font-size: clamp(32px, 4vw, 49px);
  line-height: 1.1;
}

.menu-card cite,
.note-card cite {
  display: block;
  margin-top: 22px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.phone-frame {
  width: min(390px, 100%);
  min-height: 680px;
  margin: 0 auto;
  padding: 12px;
  border: 9px solid var(--ink);
  border-radius: 46px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.phone-screen {
  min-height: 638px;
  padding: 28px 21px;
  border-radius: 31px;
  background: var(--wash);
}

.phone-screen .hero-names {
  font-size: 54px;
  text-align: left;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.tool {
  min-height: 110px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}

.tool strong {
  display: block;
  margin-top: 25px;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.memory {
  min-height: 210px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--soft), var(--wash));
}

.memory:nth-child(3n + 2) {
  background: linear-gradient(145deg, #d8dfd4, #eef1eb);
}

.memory:nth-child(3n) {
  background: linear-gradient(145deg, #ddd5e5, #f1edf4);
}

.memory p {
  margin-top: 70px;
  font-family: var(--script);
  font-size: 28px;
  line-height: 1.05;
}

.year-nav {
  display: flex;
  gap: 10px;
  padding: 15px 0 30px;
  overflow-x: auto;
}

.year-story {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 7vw;
  align-items: center;
}

.year-art {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50% 50% 16px 16px;
  background:
    radial-gradient(circle, transparent 0 31%, color-mix(in srgb, var(--accent) 26%, transparent) 32% 32.5%, transparent 33%),
    var(--wash);
}

.year-art span {
  color: var(--deep);
  font-family: var(--script);
  font-size: 90px;
}

.year-copy h2 {
  margin: 0;
  font-size: clamp(42px, 6vw, 74px);
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.year-copy p {
  color: rgba(44, 39, 41, 0.68);
  font-size: 17px;
  line-height: 1.7;
}

.experience-footer {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: space-between;
  padding: 40px max(20px, calc((100vw - 1120px) / 2));
  color: var(--paper);
  background: var(--deep);
}

.experience-footer strong {
  font-family: var(--script);
  font-size: 42px;
  font-weight: 400;
}

.experience-footer a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

dialog {
  width: min(620px, calc(100% - 30px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(34, 27, 30, 0.7);
}

.dialog-inner {
  padding: 35px;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.dialog-head h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.04em;
}

dialog .detail-grid {
  grid-template-columns: 1fr;
}

dialog output {
  display: block;
  margin-top: 18px;
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}

@media (max-width: 800px) {
  .experience-nav nav a:not(.nav-action) {
    display: none;
  }

  .section-heading,
  .year-story {
    grid-template-columns: 1fr;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .feature-board {
    grid-template-columns: 1fr;
  }

  .memory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .demo-ribbon {
    justify-content: flex-end;
    padding-right: 12px;
    color: transparent;
    font-size: 8px;
  }

  .demo-ribbon::after {
    color: var(--paper);
    content: "Fictional demo";
  }

  .demo-ribbon a {
    color: var(--paper);
  }

  .experience-nav {
    min-height: 66px;
  }

  .experience-brand {
    font-size: 24px;
  }

  .experience-hero {
    min-height: 730px;
    padding-top: 55px;
  }

  .hero-names {
    font-size: 76px;
  }

  .hero-title {
    font-size: 48px;
  }

  .content-section {
    padding: 80px 0;
  }

  .section-shell {
    width: min(100% - 26px, 1120px);
  }

  .section-heading {
    gap: 25px;
    margin-bottom: 35px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .wide {
    grid-column: auto;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .timeline-item em {
    justify-self: start;
  }

  .envelope-wrap {
    min-height: 430px;
  }

  .envelope-letter {
    right: 18px;
    left: 18px;
  }

  .envelope-wrap.open .envelope-letter {
    transform: translateY(-170px);
  }

  .seat-card {
    grid-template-columns: 1fr;
  }

  .memory-grid {
    grid-template-columns: 1fr;
  }

  .experience-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}