:root {
      color-scheme: dark;
      --canvas: #17120c;
      --ink: #2e2118;
      --cream: #fff2d9;
      --gold: #e9bd7d;
      --muted: #d0b998;
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: Inter, system-ui, sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100svh;
      background: radial-gradient(ellipse at 50% 22%, #332014 0, #1e160e 37%, #15130e 73%);
      color: var(--cream);
      font: 15px/1.5 var(--sans);
    }
    button { font: inherit; cursor: pointer; }
    button:focus-visible { outline: 2px solid #fff6e0; outline-offset: 4px; }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .scene {
      width: min(100%, 500px);
      margin-inline: auto;
    }
    .toolbar {
      min-height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 5px 17px;
    }
    .edition {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--gold);
      letter-spacing: .115em;
      text-transform: uppercase;
      font-size: .67rem;
      font-weight: 600;
    }
    .edition-mark { font-size: 1.1rem; line-height: 1; }
    .music {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 10px 0 11px;
      border: 1px solid #bd925742;
      border-radius: 40px;
      background: #301f1580;
      color: var(--cream);
      font-size: .73rem;
    }
    .music:hover, .music[aria-pressed="true"] { background: #50341f; border-color: #b2844c; }
    .music-note { color: var(--gold); font-size: 1rem; line-height: 1; }
    .music-state { color: var(--muted); font-size: .65rem; }
    .art {
      position: relative;
      isolation: isolate;
      width: 100%;
      aspect-ratio: 941 / 1672;
      background: #261a0e;
    }
    .art img { display: block; width: 100%; height: 100%; border-radius: inherit; }
    .art::after {
      position: absolute; inset: 0; pointer-events: none; z-index: 3;
      content: ''; border: 1px solid #f0bd7449; border-radius: inherit;
    }
    .ornament {
      position: absolute;
      z-index: 2;
      width: 32%;
      height: 22.7%;
      top: calc(var(--y) - 15%);
      left: calc(var(--x) - 16%);
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 36% 36% 46% 46%;
      background: transparent;
      color: #44261a;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ornament::before {
      content: '';
      position: absolute;
      inset: 31% 4% 1%;
      border-radius: 50%;
      box-shadow: 0 0 19px #ffdc8dbb, inset 0 0 15px #fff4be87;
      opacity: 0;
      transition: opacity .2s ease;
    }
    .ornament:active::before, .ornament:focus-visible::before { opacity: 1; }
    @media (hover: hover) { .ornament:hover::before { opacity: 1; } }
    .ornament .check {
      display: grid;
      place-items: center;
      position: absolute;
      right: 4%; bottom: 4%;
      width: 27px; height: 27px;
      border: 1px solid #fff2d2;
      border-radius: 50%;
      background: #f3cf92;
      color: #352418;
      box-shadow: 0 2px 11px #17120cb0;
      font-size: .9rem;
      font-weight: 700;
      opacity: 0;
      transform: scale(.7);
      transition: opacity .25s ease, transform .25s ease;
    }
    .ornament[data-opened] .check { opacity: 1; transform: scale(1); }
    .glint {
      position: absolute;
      z-index: 1;
      top: var(--y); left: var(--x);
      width: 20px; height: 20px;
      margin: -10px;
      pointer-events: none;
      background: #fff3c2;
      clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
      animation: glint var(--tempo) ease-in-out var(--delay) infinite;
    }
    @keyframes glint {
      0%, 100% { opacity: .12; transform: scale(.35); }
      45% { opacity: .9; transform: scale(1.16); }
      61% { opacity: .28; transform: scale(.62); }
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 16px max(14px, env(safe-area-inset-bottom));
    }
    .progress {
      color: var(--muted);
      font-size: .75rem;
      font-variant-numeric: tabular-nums;
    }
    .segments { display: flex; gap: 5px; margin-top: 7px; }
    .segments span { width: 15px; height: 2px; border-radius: 8px; background: #806446; }
    .segments span[data-filled] { background: #f6cc8b; }
    .next {
      min-height: 44px;
      padding: 7px 13px;
      border: 1px solid #bd925777;
      border-radius: 7px;
      background: #332216;
      color: var(--cream);
      font-size: .78rem;
      font-weight: 600;
    }
    .next:hover { background: #51351f; }
    .next-arrow { margin-left: 6px; color: var(--gold); }
    @media (min-width: 540px) {
      .scene { padding: 2px 0 10px; }
      .art { border-radius: 10px; box-shadow: 0 16px 90px #0008, 0 0 0 5px #372819; }
      .toolbar, .controls { padding-inline: 4px; }
      .controls { padding-top: 18px; }
    }
    @media (min-width: 800px) and (max-height: 1020px) {
      .scene { width: clamp(345px, calc((100svh - 150px) * .5628), 500px); }
    }
    @media (max-width: 340px) {
      .edition { letter-spacing: .06em; }
      .music, .next { padding-inline: 9px; }
      .controls { padding-inline: 11px; }
    }
    dialog {
      position: fixed;
      width: min(calc(100% - 28px), 465px);
      max-height: calc(100% - 32px);
      padding: 30px 27px 24px;
      border: 1px solid #e8b671;
      border-radius: 18px;
      background: radial-gradient(ellipse at 50% -60px, #fff8ea, #f6e0bd 85%);
      box-shadow: 0 0 0 4px #9b67383d, 0 18px 75px #130b08a6;
      color: var(--ink);
      color-scheme: light;
      text-align: center;
      overflow: auto;
    }
    dialog[open] { animation: reveal .32s ease-out both; }
    dialog::backdrop { background: #130c08b8; backdrop-filter: blur(4px); }
    body:has(dialog[open]) { overflow: hidden; }
    @keyframes reveal {
      from { opacity: 0; transform: translateY(13px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    dialog button:focus-visible { outline-color: #6a321d; }
    .close {
      position: absolute; top: 9px; right: 9px;
      width: 44px; height: 44px;
      border: none; border-radius: 50%; background: transparent;
      color: #6a432b; font-size: 1.45rem; line-height: 1;
    }
    .close:hover { background: #e9c594; }
    .card-flourish {
      display: flex; justify-content: center; align-items: center; gap: 9px;
      margin: 1px 0 9px;
      color: #94602e; font: 30px/1 var(--serif);
    }
    .card-flourish::before, .card-flourish::after {
      content: ''; width: 45px; height: 1px; background: #b48554;
    }
    .category {
      margin: 0 0 8px;
      color: #744225;
      font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    }
    .card-title {
      margin: 0 0 12px;
      color: #642517;
      font: 500 clamp(1.85rem, 8vw, 2.65rem)/1.08 var(--serif);
      text-wrap: balance;
    }
    .card-copy { margin: 0 auto 19px; max-width: 34ch; font-size: .91rem; line-height: 1.6; }
    .event {
      display: grid; grid-template-columns: 1fr 1fr;
      margin: 0 0 19px;
      border: 1px solid #c4925b9c; border-radius: 8px;
    }
    .event[hidden] { display: none; }
    .event div { padding: 9px 6px; }
    .event div:nth-child(2) { border-left: 1px solid #c4925b9c; }
    .event div:last-child { grid-column: 1 / -1; border-top: 1px solid #c4925b9c; }
    .event dt { color: #744225; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
    .event dd { margin: 3px 0 0; font: 600 1.05rem/1.2 var(--serif); }
    .card-action {
      width: 100%; min-height: 46px;
      border: 1px solid #7b351e;
      border-radius: 8px;
      background: #6b281c; color: #fff2da;
      font-size: .87rem; font-weight: 600;
    }
    .card-action:hover { background: #803422; }
    @media (max-width: 539px) {
      dialog { margin-block: auto max(10px, env(safe-area-inset-bottom)); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .glint { opacity: .3; }
    }
  
    [hidden] { display: none !important; }
    #page-state { text-align: center; margin: 20vh 20px 0; }
    .update { background: #53341d; color: #fff2d9; padding: 12px 16px; margin: 0 0 9px; font-size: .82rem; }
    .card-copy, .event dd { overflow-wrap: anywhere; }
    .card-copy { white-space: pre-line; }
    .card-rsvp { margin-bottom: 8px; }
    .card-rsvp:not([hidden]) + .card-action { color: #642517; background: transparent; }
    .rsvp { padding: 16px 19px 19px; margin: 12px 12px 21px; border: 1px solid #aa7849; border-radius: 12px; background: #2d2016; }
    .rsvp h2 { font: 500 1.75rem var(--serif); color: var(--gold); margin: 0 0 14px; }
    .rsvp label { display: grid; gap: 5px; font-size: .86rem; }
    .rsvp input:is([type=text], [type=number], :not([type])) { width: 100%; min-height: 42px; padding: 8px 12px; background: #1e170f; border: 1px solid #b28561; border-radius: 6px; color: var(--cream); font: inherit; }
    @media (max-width: 539px) { .rsvp input:is([type=text], [type=number], :not([type])) { font-size: 16px; } }
    .rsvp fieldset { display: flex; gap: 15px; border: 0; margin: 13px 0; padding: 0; }
    .rsvp fieldset label { display: flex; align-items: center; min-height: 42px; }
    .rsvp legend { padding: 0; font-size: .86rem; }
    .rsvp .next { margin-top: 14px; }
    .rsvp-cookie { color: var(--muted); font-size: .79rem; margin: 10px 0 0; }
    .rsvp-cookie a { color: var(--gold); text-underline-offset: .18em; }
    .rsvp-consent { margin: 13px 0 7px; }
    .rsvp-consent label { display: flex; align-items: center; gap: 7px; min-height: 42px; }
    .rsvp-consent input { width: 17px; height: 17px; accent-color: var(--gold); }
    .rsvp-consent p { margin: 0; font-size: .77rem; }
    .rsvp-consent a { color: var(--gold); text-underline-offset: .18em; }
    #rsvp-status { margin: 6px 0 0; min-height: 1.2em; color: var(--muted); font-size: .83rem; }