/* The Digital gifts composer is now part of THIS document, not an iframe.
 *
 * It brings its own `.desk`, `.shelf`, `.shelf-card` and `.shelf-actions`, and
 * so does this file — the wedding's letter desk and its letter shelf. Framed,
 * the two could not see each other; native, every rule here reaches into the
 * composer unless something stops it.
 *
 * What it cost when nothing did: this file's `.desk` put 32px of padding, a
 * 16px gap, `justify-items: center` and `align-content: start` on the gift
 * desk's three-column grid and moved every row; its `.shelf` put
 * `grid-template-columns: repeat(5, …)` on the Bouquets shelf WRAPPER, so the
 * head and the card grid became two of five columns and nine bouquets stacked
 * in a strip a quarter of the width with the Customize buttons clipped off.
 * Neither showed up in a typecheck, a build or a DOM probe. They showed up in
 * a screenshot.
 *
 * The desk's own sheets are generated with a `.ws-gift-stage[data-desk-mode]`
 * prefix, so they outrank this file wherever both set the same property — the
 * damage is only ever a property the desk never mentions. Hence the guard
 * rather than a reset: the rules below simply stop at the stage's edge.
 *
 * `:where()` has zero specificity, so every guarded selector still weighs
 * exactly what it weighed before and the wedding's own cascade is unchanged.
 */
:root {
  --desk: #e8dcc8;
  --desk-deep: #cfc4ac;
  --ink: #1c2618;
  --muted: #4a5344;
  --line: #c9b89a;
  --paper: #f6efe6;
  --sheet: #faf4ea;
  --forest: #2d4a32;
  --focus: #2a5a3a;
  --seal: #b8924a;
  --env: #6a2430;
  --env-deep: #4c1a23;
  --env-light: #7d3340;
  --card: #faf6ee;
  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, serif;
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --radius: 20px;
  --top-gutter: var(--s3);
  --top-bar: 56px;
  --top-clear: calc(var(--top-bar) + var(--top-gutter) + var(--s5));
  --band-blend: 220px;
  --desk-hover: 130ms;
  --desk-press: 90ms;
  --desk-enter: 280ms;
  --desk-exit: 210ms;
  --desk-pane: 420ms;
  --dash-pane-in: 240ms;
  --dash-pane-out: 180ms;
  --desk-row-enter: 350ms;
  --desk-row-exit: 262ms;
  --studio-view-exit: 300ms;
  --desk-stagger: 48ms;
  --desk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --desk-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --guest-scene: url("../images/plate-library.jpg");
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #1c2618;
  color: var(--ink);
}

body {
  position: relative;
  font: 16px/1.5 var(--sans);
  background-image: var(--grain);
  background-size: 180px 180px;
}

img, svg { max-width: 100%; display: block; }
img.band-video { max-width: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

html, body {
  cursor: url("../images/heart-outline.svg") 12 20, auto !important;
}
html :is(a, button, [role="button"], [role="tab"], label, summary, select, .ws-pick, .ws-type-mode button, .ws-swatch-edit input, .guest-disc, .dash-nav a) {
  cursor: url("../images/heart-fill.svg") 12 20, pointer !important;
}
html :is(input, textarea, [contenteditable="true"]) {
  cursor: url("../images/heart-empty.svg") 12 20, text !important;
}

.fw-heart-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}
.fw-heart-pop {
  position: fixed;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  background: center / contain no-repeat;
  animation: fw-heart-pop 720ms var(--desk-ease-out) forwards;
}
.fw-heart-pop-fill { background-image: url("../images/heart-fill.svg"); }
.fw-heart-pop-empty { background-image: url("../images/heart-empty.svg"); }
.fw-heart-pop-outline { background-image: url("../images/heart-outline.svg"); }
@keyframes fw-heart-pop {
  0% { transform: translate(0, 0) scale(0.35); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-heart-pop { animation-duration: 280ms; }
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--sheet);
  padding: 8px 12px;
  z-index: 8;
}
.skip:focus { top: 12px; }

.top {
  position: absolute;
  top: var(--top-gutter);
  left: 50%;
  z-index: 20;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand tabs actions";
  gap: 8px;
  align-items: center;
  width: min(calc(100% - 24px), 1120px);
  min-height: var(--top-bar);
  margin: 0;
  padding: 6px 14px;
  transform: translateX(-50%);
  overflow: visible;
  border: 1px solid color-mix(in srgb, #ffffff 42%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.28), rgba(246, 239, 230, 0.1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 10px 28px rgba(16, 12, 10, 0.12);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: var(--ink);
}
.top-mouth,
.top-collapse { display: contents; }
.brand { grid-area: brand; }
.tabs { grid-area: tabs; }
.top-actions { grid-area: actions; }

.brand {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  align-items: center;
  justify-self: start;
  min-width: 0;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, #1c2218 8%, transparent);
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.brand strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.brand small {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--tab-count, 3), minmax(5.2rem, 1fr));
  justify-self: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
/* The public edge adds Wording as a fourth navigation link. */
.tabs:has(> a:nth-of-type(4)) { --tab-count: 4; }
.tabs-pill {
  position: absolute;
  top: 0;
  left: var(--tab-inset, 0px);
  z-index: 0;
  height: 100%;
  width: calc((100% - 2 * var(--tab-inset, 0px)) / var(--tab-count, 3));
  border-radius: 999px;
  background: color-mix(in srgb, #fffdf8 58%, transparent);
  pointer-events: none;
  transform: translateX(var(--tab-pill-x, 0%));
  transition: transform var(--desk-enter) var(--desk-ease-out);
}
body[data-view="home"] .tabs-pill { --tab-pill-x: 0%; }
body[data-view="library"] .tabs-pill { --tab-pill-x: 100%; }
body[data-view="price"] .tabs-pill { --tab-pill-x: 200%; }
body:not([data-view="home"]):not([data-view="library"]):not([data-view="price"]) .tabs-pill {
  opacity: 0;
}
.tabs-pill[hidden] { display: none; }
.tabs a {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 14px;
  display: grid;
  place-items: center;
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  transition: transform var(--desk-hover) var(--desk-ease-out), color var(--desk-hover) ease, background-color var(--desk-hover) ease;
}
.tabs a[aria-current="page"] {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.tabs a:active {
  transform: scale(0.96);
  transition-duration: var(--desk-press);
}
.tabs a:focus-visible {
  outline-color: var(--ink);
  outline-offset: 2px;
}
@media (hover: hover) {
  .tabs a:hover {
    color: var(--ink);
    background: color-mix(in srgb, #fffdf8 42%, transparent);
  }
  .tabs a[aria-current="page"]:hover {
    background: transparent;
  }
  .tabs a:hover:active {
    transform: scale(0.96);
  }
}

.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-self: end;
  justify-content: flex-end;
}
.top-signin,
.guest-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #f3ece0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--desk-hover) var(--desk-ease-out), background-color var(--desk-hover) ease;
}
.top-signin:active,
.guest-disc:active {
  transform: scale(0.96);
  transition-duration: var(--desk-press);
}
@media (hover: hover) {
  .top-signin:hover,
  .guest-disc:hover { background: #fffaf2; }
  .top-signin:hover:active,
  .guest-disc:hover:active { transform: scale(0.96); }
}
body[data-view="account"] .top-signin {
  background: #fffdf8;
}

.view { display: none; }
.view-create {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  padding-top: var(--top-clear);
  background: #efe6dc url("../images/plate-blush-w1920.webp") center / cover no-repeat;
}
.view-create > * { position: relative; z-index: 2; }
.view-create > .band-video { z-index: 0; }
.view-create picture.band-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
body[data-view="home"] #view-home,
body[data-view="library"] #view-library,
body[data-view="create"] #view-create,
body[data-view="dashboard"] #view-dashboard,
body[data-view="price"] #view-price,
body[data-view="account"] #view-account,
body[data-view="privacy"] #view-privacy,
body[data-view="terms"] #view-terms,
body[data-view="changelog"] #view-changelog {
  display: block;
}
html:not([data-hydrated]) body[data-view="home"] #view-home,
html:not([data-hydrated]) body[data-view="library"] #view-library,
html:not([data-hydrated]) body[data-view="create"] #view-create,
html:not([data-hydrated]) body[data-view="dashboard"] #view-dashboard,
html:not([data-hydrated]) body[data-view="price"] #view-price,
html:not([data-hydrated]) body[data-view="account"] #view-account,
html:not([data-hydrated]) body[data-view="privacy"] #view-privacy,
html:not([data-hydrated]) body[data-view="terms"] #view-terms,
html:not([data-hydrated]) body[data-view="changelog"] #view-changelog {
  animation: studio-view-in var(--desk-pane) var(--desk-ease-out) both;
}
body:not([data-view="home"]) .view-home,
body:not([data-view="home"]) .view-home .band-video { display: none !important; }
.view.is-view-live { display: block !important; }
body:not([data-view="home"]) .view-home.is-view-live,
body:not([data-view="home"]) .view-home.is-view-live .band-video { display: block !important; }
@keyframes studio-view-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes studio-view-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes studio-view-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.view.is-view-in {
  animation: studio-view-in var(--desk-pane) var(--desk-ease-out) both;
}
html:not([data-hydrated]) body[data-view="price"] #view-price > picture.band-video,
#view-price.view.is-view-in > picture.band-video {
  animation: studio-copy-fade var(--desk-pane) var(--desk-ease-out) both;
}
#view-price.view.is-view-out > picture.band-video {
  animation: studio-copy-fade var(--studio-view-exit, 262ms) var(--desk-ease-in) reverse both;
}
#view-price .price-card {
  animation: none;
}
#view-price.view.is-view-in .price-card,
#view-price .price-card.is-block-in {
  animation: studio-copy-in var(--desk-pane) var(--desk-ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--desk-stagger));
}
.view.is-view-out {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: auto;
  pointer-events: none;
  animation: studio-view-out var(--studio-view-exit, 262ms) var(--desk-ease-in) both;
}
@media (prefers-reduced-motion: reduce) {
  .view.is-view-in {
    animation-name: studio-view-fade;
    animation-duration: 200ms;
    transform: none;
  }
  .view.is-view-out {
    animation-name: studio-view-fade;
    animation-direction: reverse;
    animation-duration: 150ms;
    transform: none;
  }
  .tabs-pill {
    transition-property: opacity;
    transition-duration: 0ms;
  }
  .top-collapse {
    transition-duration: 0ms;
  }
  .tabs a,
  .tabs a:hover,
  .tabs a:active,
  .tabs a:hover:active {
    transform: none !important;
  }
}

.lib-head {
  width: min(100% - 32px, 1080px);
  margin: 0 auto;
}

.band {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #1c1814;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
picture.band-video {
  display: block;
}
picture.band-video > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: inherit;
  transform: none;
  image-rendering: auto;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.band > *:not(.band-video) { position: relative; z-index: 2; }

.view-home > .band + .band {
  margin-top: calc(var(--band-blend) * -1);
}
.view-home > .band-field { z-index: 1; }
.view-home > .band-bouquet { z-index: 2; }
.view-home > .band-lace { z-index: 3; }
.view-home > .band-sunveil { z-index: 4; }
.view-home > .band-know { z-index: 5; }
.view-home > .band-notes { z-index: 6; }
.view-home > .band-calla { z-index: 7; }
.view-home > .band {
  background-color: transparent;
}
.view-home > .band-field {
  background-color: var(--desk);
}
@media (max-width: 719px) {
  :root { --band-blend: 160px; }
}
.band-field {
  min-height: 100dvh;
  height: 100dvh;
  padding-top: 0;
  background-image: url("../images/plate-envelope-open-w1920.webp");
  background-color: var(--desk);
}
.band-field::after {
  display: none;
}
.band-field .band-video {
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  animation: none;
}
.band-lace {
  padding: 96px 0;
  overflow: hidden;
  min-height: 100dvh;
  background-image: none;
}
.band-lace::after {
  display: none;
}
.band-lace .band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 72% 38%;
  animation: none;
}
.band-calla {
  position: relative;
  padding: 96px 0 112px;
  overflow: hidden;
  min-height: 100dvh;
  background-image: none;
}
.band-calla .band-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  animation: none;
}
@media (max-width: 719px) and (orientation: portrait) {
  .band-calla .band-video { object-position: center 38%; }
  .band-field {
    background-image: url("../images/plate-envelope-open-w1080.webp");
  }
  .view-library {
    background-image: none;
  }
  .lib-hero {
    background-image: url("../images/plate-library-hero-phone.webp");
  }
  .lib-shelf {
    background-image: url("../images/plate-library-phone.jpg");
  }
  .view-create {
    background-image: url("../images/plate-blush-w1080.webp");
  }
}
.band-sunveil {
  padding: 96px 0;
  overflow: hidden;
  min-height: 100dvh;
  background-image: none;
}
.band-sunveil::after {
  display: none;
}
.band-sunveil .band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 32%;
  animation: none;
}
.band-know {
  padding: 96px 0;
  overflow: hidden;
  min-height: 100dvh;
  background-image: none;
}
.band-know::after { display: none; }
.band-know .band-video,
.band-know picture.band-video > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
  animation: none;
  filter: none;
  transform: none;
}
.know-band {
  width: min(100% - 32px, 1100px);
  padding: 88px 0;
}
.know-sheet {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 36px;
  align-items: start;
  padding: clamp(22px, 4vw, 40px);
  background: color-mix(in srgb, #f4efe4 55%, transparent);
  border: 1px solid rgba(28, 38, 24, 0.08);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(16, 12, 10, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.know-copy {
  position: sticky;
  top: 96px;
  display: grid;
  justify-items: start;
  gap: 4px;
}
.know-copy h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  font-weight: 400;
  line-height: 1.04;
  color: #1c3a28;
}
.know-copy .kicker { color: #3f5c48; }
.know-copy .lede {
  margin: 0 0 24px;
  max-width: 28em;
  color: #3f5c48;
}
.know-copy .btn-solid {
  background: color-mix(in srgb, var(--forest) 58%, transparent);
  border-color: color-mix(in srgb, var(--forest) 42%, transparent);
  color: #f4efe4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (hover: hover) {
  .know-copy .btn-solid:hover {
    background: color-mix(in srgb, var(--forest) 76%, transparent);
  }
}
.know-list {
  display: grid;
  min-width: 0;
}
.know-item {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, #1c3a28 16%, transparent);
}
.know-item:last-child { border-bottom: 1px solid color-mix(in srgb, #1c3a28 16%, transparent); }
.know-item summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 16px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  cursor: pointer;
  list-style: none;
  transition: background-color 420ms ease;
}
@media (hover: hover) {
  .know-item summary:hover {
    background: color-mix(in srgb, #f4efe4 42%, transparent);
  }
}
.know-item summary:active .know-plus {
  transform: scale(0.94);
}
.know-item[open] summary:active .know-plus {
  transform: rotate(45deg) scale(0.94);
}
.know-item summary::-webkit-details-marker { display: none; }
.know-num {
  color: #3f5c48;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.know-q {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
  color: #1c3a28;
}
.know-plus {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, #1c3a28 22%, transparent);
  border-radius: 999px;
  justify-self: end;
  transition:
    transform 520ms var(--desk-ease-out),
    border-color 360ms ease,
    background-color 360ms ease;
}
@media (hover: hover) {
  .know-item summary:hover .know-plus {
    border-color: color-mix(in srgb, #1c3a28 36%, transparent);
    background: color-mix(in srgb, #f4efe4 55%, transparent);
  }
}
.know-plus::before,
.know-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #1c3a28;
  transform: translate(-50%, -50%);
  transition: opacity 360ms ease;
}
.know-plus::before { width: 12px; height: 1.5px; }
.know-plus::after { width: 1.5px; height: 12px; }
.know-item[open] .know-plus { transform: rotate(45deg); }
.know-item[open] .know-plus::after { opacity: 0; }
.know-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--desk-ease-out);
}
.know-item[open] .know-body {
  grid-template-rows: 1fr;
}
.know-body > * {
  overflow: hidden;
  min-height: 0;
}
.know-item:not(.is-know-anim) .know-body {
  transition: none;
}
.know-item p {
  margin: 0 0 20px;
  padding: 0 0 4px 52px;
  max-width: 42em;
  color: #3f5c48;
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 480ms ease,
    transform 520ms var(--desk-ease-out);
}
.know-item[open] p {
  opacity: 1;
  transform: translateY(0);
}
.know-item:not(.is-know-anim) p {
  transition: none;
}
.know-item[open]:not(.is-know-anim) p {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 719px) {
  .know-band { padding: 56px 0; }
  .know-sheet {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 16px;
  }
  .know-copy { position: static; }
  .know-item summary { min-height: 64px; }
  .know-item p { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .know-plus,
  .know-body,
  .know-item p,
  .know-item summary {
    transition: none !important;
  }
  .know-item p {
    opacity: 1;
    transform: none;
  }
  .know-item[open] .know-plus::after {
    opacity: 0;
  }
}
.band-notes {
  padding: 96px 0;
  overflow: hidden;
  min-height: 100dvh;
  background-image: none;
}
.band-notes::after { display: none; }
.band-notes .band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  animation: none;
}
.notes-band {
  width: min(100% - 32px, 1120px);
  padding: 120px 0;
}
.notes-card {
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border: 0.5px solid rgba(28, 38, 24, 0.1);
  border-radius: 28px;
  background: color-mix(in srgb, #f4efe4 62%, transparent);
  color: var(--ink);
  box-shadow: 0 22px 56px rgba(16, 12, 10, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.notes-head {
  max-width: 22em;
  margin: 0 0 28px;
}
.notes-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.06;
  color: var(--ink);
}
.notes-reel {
  display: grid;
  gap: 14px;
  margin-inline: -8px;
}
.notes-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.notes-marquee {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: notes-run 32s linear infinite;
}
.notes-marquee-rev {
  animation-duration: 38s;
  animation-direction: reverse;
}
.notes-reel:hover .notes-marquee { animation-play-state: paused; }
.note {
  flex: 0 0 min(300px, 78vw);
  margin: 0;
  padding: 20px 18px 18px;
  border-radius: 20px;
  background: color-mix(in srgb, #fffdf8 82%, transparent);
  color: var(--ink);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes notes-run {
  to { transform: translateX(-50%); }
}
.note-stars {
  display: flex;
  gap: 3px;
  margin: 0 0 10px;
  color: var(--seal);
}
.note p { margin: 0; }
.note > p:nth-of-type(2) {
  font-size: 0.98rem;
  line-height: 1.55;
}
.note-who {
  margin-top: 14px;
  font-weight: 650;
  font-size: 0.92rem;
}
.note-where {
  color: var(--muted);
  font-size: 0.82rem;
}
@media (max-width: 719px) {
  .notes-band { padding: 72px 0; }
  .notes-card { padding: 22px 16px; }
  .note { flex-basis: min(260px, 82vw); }
}
@media (prefers-reduced-motion: reduce) {
  .notes-marquee { animation: none; }
  .notes-track { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.band-sunveil .kicker,
.band-sunveil h2,
.band-sunveil .lede,
.band-sunveil .story-note,
.band-sunveil .story-line figcaption {
  text-shadow: none;
}
.band-stairs {
  padding: 96px 0 112px;
  background-image: url("../images/plate-sunset.jpg");
  background-size: cover;
  background-position: center 48%;
}
.band-stairs .band-video {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.band-stairs::after {
  display: none;
}
.band-stairs .kicker,
.band-stairs h2 {
  text-shadow: 0 1px 2px rgba(28, 22, 16, 0.32);
}
@media (max-width: 719px) {
  .band-stairs,
  .band-stairs .band-video {
    background-position: 78% 28%;
    object-position: 78% 28%;
  }
}
.band-stairs .home-make {
  margin-top: 80px;
}
.band-bouquet {
  position: relative;
  padding: 96px 0 112px;
  overflow: hidden;
  min-height: 100dvh;
  background-image: none;
  scroll-margin-top: 72px;
}
.band-bouquet::after {
  display: none;
}
.band-bouquet .band-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  animation: none;
}
.band-calla::after {
  display: none;
}
.view-home > .band + .band {
  padding-top: calc(80px + var(--band-blend));
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgb(0 0 0 / 0.1) calc(var(--band-blend) * 0.3),
    rgb(0 0 0 / 0.42) calc(var(--band-blend) * 0.58),
    rgb(0 0 0 / 0.82) calc(var(--band-blend) * 0.84),
    #000 var(--band-blend)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgb(0 0 0 / 0.1) calc(var(--band-blend) * 0.3),
    rgb(0 0 0 / 0.42) calc(var(--band-blend) * 0.58),
    rgb(0 0 0 / 0.82) calc(var(--band-blend) * 0.84),
    #000 var(--band-blend)
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.view-home > .band-bouquet,
.view-home > .band-lace,
.view-home > .band-sunveil {
  padding-bottom: calc(72px + var(--band-blend));
}

@media (prefers-reduced-motion: no-preference) {
  .band-video {
    animation: none;
  }
  .shelf-card:nth-child(3n) .look-cover { animation-delay: -5s; }
  .shelf-card:nth-child(3n + 1) .look-cover { animation-delay: -11s; }
  .look-page-demo::after,
  .look-tap {
    animation: bubble-breathe 3.4s ease-in-out infinite;
  }
}
@keyframes film-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
@keyframes lib-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.1%, -0.7%, 0); }
}
@keyframes lib-card-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}
@keyframes cover-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
}

.home-hero,
.home-path,
.home-why {
  width: min(100% - 32px, 1080px);
  margin: 0 auto;
}

.home-hero {
  display: grid;
  gap: var(--s8);
  padding: var(--s8) 0 var(--s8);
  align-content: start;
  min-height: 0;
}
.band-field .home-hero {
  width: min(100% - 32px, 1080px);
  padding: var(--s8) 0 var(--s8);
}
.home-copy { max-width: 34em; }
.band-field .home-copy {
  max-width: 22em;
  padding: var(--s6) var(--s6) var(--s5);
  background: color-mix(in srgb, #f6f0e6 36%, transparent);
  border: 1px solid color-mix(in srgb, #f6efe6 40%, transparent);
  border-radius: 28px;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}

.band-field .kicker,
.band-field .desk-label,
.band-field .home-note {
  color: var(--muted);
}
.band-field h1 {
  color: var(--ink);
  text-shadow: none;
}
.band-field .lede {
  color: var(--muted);
  text-shadow: none;
}
.band-lace .kicker,
.band-calla .kicker,
.band-sunveil .kicker,
.band-stairs .kicker,
.band-bouquet .kicker { color: color-mix(in srgb, #f3ece0 72%, transparent); }
.band-lace h2,
.band-calla h2,
.band-sunveil h2,
.band-stairs h2,
.band-bouquet h2 { color: #f6f0e6; }
.band-lace h2,
.band-sunveil h2,
.band-stairs h2,
.band-bouquet h2 {
  margin: 0 0 var(--s4);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.band-lace .lede,
.band-sunveil .lede,
.band-stairs .lede,
.band-bouquet .lede,
.band-calla p { color: #efe6d8; }
.band-lace .date-copy .kicker,
.band-lace .date-field > span { color: var(--muted); }
.band-lace .date-copy h2 { color: var(--ink); }
.band-lace .date-copy .lede { color: var(--muted); }
.band-sunveil .kicker,
.band-sunveil .lede { color: color-mix(in srgb, #fffdf8 78%, transparent); }
.band-sunveil h2 { color: #fffdf8; }
.band-field .btn {
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
}
.band-stairs .btn,
.band-bouquet .btn {
  background: color-mix(in srgb, #f3ece0 14%, transparent);
  border-color: color-mix(in srgb, #f3ece0 35%, transparent);
  color: #f6f0e6;
}
.band-field .btn-solid {
  background: var(--forest);
  border-color: var(--forest);
  color: #f4efe4;
}
.band-stairs .btn-solid,
.band-bouquet .btn-solid {
  background: #f3ece0;
  border-color: #f3ece0;
  color: #1c1814;
}
.band-field .home-stage {
  width: min(100%, 440px);
  padding: 28px 20px 24px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-stage .desk-label { display: none; }
.home-stage .mat {
  display: block;
  z-index: 3;
}
.home-stage .eyebrow {
  color: color-mix(in srgb, #f6f0e6 78%, transparent);
  letter-spacing: 0.2em;
  text-shadow: 0 1px 16px rgba(16, 12, 10, 0.5);
}
.home-stage .names {
  color: #f6f0e6;
  text-shadow: 0 2px 22px rgba(16, 12, 10, 0.55);
}
.home-stage .hero-fan {
  position: relative;
  width: 100%;
  min-height: 228px;
  margin: 8px 0 4px;
  cursor: pointer;
}
.home-stage .hero-env {
  position: absolute;
  width: 74%;
  height: auto;
  top: 22%;
  filter: drop-shadow(0 14px 20px rgba(16, 12, 10, 0.32));
  pointer-events: none;
}
.home-stage .hero-env-pearl {
  left: 0;
  --tilt: rotate(-18deg) translate(-6%, 10%);
  transform: var(--tilt);
}
.home-stage .hero-env-sage {
  right: 0;
  left: auto;
  --tilt: rotate(16deg) translate(6%, 12%);
  transform: var(--tilt);
}
.home-stage .hero-invite {
  position: absolute;
  left: 18%;
  top: 0;
  z-index: 1;
  width: 64%;
  padding: 16px 14px 36px;
  background: #f4eee2;
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 12px 22px rgba(16, 12, 10, 0.22);
  --tilt: rotate(-5deg);
  transform: var(--tilt);
  text-align: center;
  color: #1c2218;
  pointer-events: none;
}
.home-stage .hero-invite span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a5348;
}
.home-stage .hero-invite strong {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
}
.home-stage .hero-invite em {
  font-style: italic;
  font-size: 0.7em;
}
.home-stage .hero-invite i {
  display: block;
  margin-top: 6px;
  font-style: italic;
  font-size: 0.78rem;
  color: #5a5348;
}
.home-stage .env-wrap {
  position: relative;
  z-index: 2;
  width: 84%;
  margin: 28px auto 0;
  filter: drop-shadow(0 22px 32px rgba(20, 14, 10, 0.48));
}
.home-stage .ghost {
  margin-top: 24px;
  border: 1px solid color-mix(in srgb, #f3ece0 46%, transparent);
  background: color-mix(in srgb, #1c1814 28%, transparent);
  border-radius: 999px;
  font-family: var(--serif);
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: #f6f0e6;
  transition: background 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.home-stage .ghost:focus-visible {
  background: color-mix(in srgb, #1c1814 46%, transparent);
}
@media (hover: hover) {
  .home-stage .ghost:hover {
    background: color-mix(in srgb, #1c1814 46%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .band-field .home-stage .eyebrow,
  .band-field .home-stage .names,
  .band-field .home-stage .env-wrap,
  .band-field .home-stage .ghost {
    animation: letter-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .band-field .home-stage .hero-env-pearl,
  .band-field .home-stage .hero-env-sage,
  .band-field .home-stage .hero-invite {
    animation: fan-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .band-field .home-stage .names { animation-delay: 80ms; }
  .band-field .home-stage .hero-env-pearl { animation-delay: 120ms; }
  .band-field .home-stage .hero-env-sage { animation-delay: 180ms; }
  .band-field .home-stage .hero-invite { animation-delay: 200ms; }
  .band-field .home-stage .env-wrap {
    animation:
      letter-in 500ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both,
      env-float 5.6s ease-in-out 800ms infinite;
  }
  .band-field .home-stage .ghost {
    animation:
      letter-in 500ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both,
      tap-glow 2.8s ease-in-out 900ms infinite;
  }
  .band-field .home-stage .seal::after {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 236, 190, 0.55), transparent 58%);
    animation: seal-gleam 3.4s ease-in-out 800ms infinite;
    pointer-events: none;
  }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fan-in {
  from { opacity: 0; transform: var(--tilt) translateY(12px); }
  to { opacity: 1; transform: var(--tilt); }
}
@keyframes env-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes tap-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 236, 224, 0); }
  50% { box-shadow: 0 0 0 8px rgba(243, 236, 224, 0.08); }
}
@keyframes bubble-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -12px 18px rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      0 8px 18px rgba(28, 34, 24, 0.08);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -10px 22px rgba(255, 255, 255, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      0 12px 24px rgba(28, 34, 24, 0.14);
  }
}
@keyframes seal-gleam {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}
.home-stage .letter:not([data-page="cover"]) {
  background: transparent;
  padding: 0;
}
@media (hover: hover) {
  .band-field .btn:hover { background: var(--paper); }
  .band-field .btn-solid:hover { background: #1b2a21; }
  .band-stairs .btn:hover,
  .band-bouquet .btn:hover { background: color-mix(in srgb, #f3ece0 26%, transparent); }
  .band-stairs .btn-solid:hover,
  .band-bouquet .btn-solid:hover { background: #fffaf1; }
}
.home-copy h1,
.lib-head h2,
.home-path h2,
.home-why h2 {
  margin: 0 0 var(--s4);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-feature-settings: "kern", "liga";
}
.lede {
  margin: 0 0 var(--s6);
  max-width: 32em;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--muted);
}
.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: var(--s5);
}
.home-actions .btn {
  flex: 0 0 auto;
  width: max-content;
  text-decoration: none;
  display: inline-grid;
  place-items: center;
}
.home-make .home-actions { margin-top: var(--s6); }
@media (max-width: 719px) {
  .home-make .home-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .home-make .home-actions .btn { width: 100%; }
}
.home-note { margin: var(--s5) 0 0; color: var(--muted); font-size: 0.9rem; }

.home-stage {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
}
.home-stage .letter { width: min(100%, 360px); }

.home-path,
.home-why { padding: var(--s8) 0; }

.why-card {
  max-width: 560px;
  padding: var(--s8) var(--s6);
  background: color-mix(in srgb, #f6efe6 34%, transparent);
  border: 1px solid color-mix(in srgb, #f6efe6 40%, transparent);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.why-card .kicker { color: var(--muted); }
.why-card h2 {
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 2.7rem);
}

.path {
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s3);
}
.path li {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 120px;
  padding: var(--s5) var(--s4);
  border: 0;
  border-radius: var(--radius);
  background: color-mix(in srgb, #f6f0e6 16%, transparent);
  color: #f6f0e6;
  opacity: 0;
  transform: translateY(10px);
}
.path.is-in li {
  animation: soft-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.path li:nth-child(1) { animation-delay: 0ms; }
.path li:nth-child(2) { animation-delay: 80ms; }
.path li:nth-child(3) { animation-delay: 160ms; }
.path li:nth-child(4) { animation-delay: 240ms; }
.path li:nth-child(5) { animation-delay: 320ms; }
.path strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  font-style: italic;
}
.path span { color: color-mix(in srgb, #f6f0e6 78%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .path li {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background 280ms ease;
  }
  .path li:hover {
    transform: translateY(-4px);
    background: color-mix(in srgb, #f6f0e6 26%, transparent);
  }
}

@keyframes soft-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.why-card p {
  margin: 0 0 var(--s6);
  max-width: 34em;
  color: var(--muted);
  line-height: 1.6;
}
.why-card .btn-solid {
  background: var(--forest);
  border-color: var(--forest);
  color: #f4efe4;
}
@media (hover: hover) {
  .why-card .btn-solid:hover { background: #1b2a21; }
}

.home-wrap {
  width: min(100% - 32px, 1080px);
  margin: 0 auto;
}
.band-bouquet .home-wrap {
  position: relative;
  z-index: 4;
}
.look-head,
.plate-copy {
  padding: var(--s6) var(--s6) var(--s5);
  background: color-mix(in srgb, #f6f0e6 36%, transparent);
  border: 1px solid color-mix(in srgb, #f6efe6 40%, transparent);
  border-radius: 28px;
  color: var(--ink);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.look-head {
  max-width: min(100% - 32px, 40em);
  margin: 0 auto;
  padding: 0 0 var(--s4);
  text-align: center;
  scroll-margin-top: 88px;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.look-head .lede {
  margin-left: auto;
  margin-right: auto;
}
.plate-copy {
  width: fit-content;
  max-width: min(100%, 40em);
}
.look-head .kicker,
.plate-copy .kicker { color: var(--muted); }
.look-head h2,
.plate-copy h2 {
  color: var(--ink);
  text-shadow: none;
}
.look-head .lede,
.plate-copy .lede {
  max-width: 36em;
  color: var(--muted);
  text-shadow: none;
}
.env-suite .plate-copy,
.story-head {
  margin-bottom: var(--s6);
}
.band-bouquet .env-suite .kicker,
.band-bouquet .env-suite h2,
.band-bouquet .env-suite .lede {
  text-shadow: none;
}
.band-bouquet .env-suite .kicker { color: var(--muted); }
.band-bouquet .env-suite .lede { max-width: 36em; color: var(--muted); }
.band-bouquet .env-suite h2 { color: var(--ink); }
.band-bouquet .env-row button { color: var(--ink); }

.lookbook {
  position: relative;
  z-index: 2;
  width: var(--orbit-box, min(100% - 24px, 880px));
  height: var(--orbit-box, min(100vw - 24px, 880px));
  max-width: calc(100% - 24px);
  margin: 36px auto 0;
  overflow: visible;
}
@media (min-width: 720px) {
  .lookbook {
    width: min(calc(100% - 24px), 1280px);
    max-width: 1280px;
    height: var(--orbit-box, min(calc(100vw - 24px), 1280px));
    margin-top: 28px;
  }
}
@media (max-width: 719px) {
  .lookbook {
    width: calc(100% - 16px);
    max-width: 100%;
    height: var(--orbit-box, 70vw);
    overflow: visible;
  }
  .lookbook.is-orbit .look-card-page {
    border-radius: 12px;
  }
}
.lookbook.is-orbit {
  display: block;
}
.orbit-rail {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, #f3ece0 62%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fffdf8 30%, transparent),
    inset 0 0 56px color-mix(in srgb, #f6efe6 22%, transparent);
  pointer-events: none;
}
.orbit-rail[data-dir="-1"] {
  border-color: color-mix(in srgb, #f3ece0 28%, transparent);
  box-shadow: inset 0 0 28px color-mix(in srgb, #fffdf8 12%, transparent);
}
.look-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 0;
  height: 0;
}
.look-ring[data-dir="1"] { animation: look-run 110s linear infinite; }
.look-ring[data-dir="-1"] { animation: look-run 84s linear infinite reverse; }
.look-ring[data-dir="1"] .look-card-page { animation: look-run 110s linear infinite reverse; }
.look-ring[data-dir="-1"] .look-card-page { animation: look-run 84s linear infinite; }
.lookbook.is-orbit:hover .look-ring,
.lookbook.is-orbit:hover .look-card-page {
  animation-play-state: paused;
}
@keyframes look-run {
  to { transform: rotate(360deg); }
}
.look-card {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: #f6f0e6;
  opacity: 1;
}
.lookbook.is-orbit .look-card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-w, 112px);
  cursor: pointer;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateY(calc(-1 * var(--r)))
    rotate(calc(-1 * var(--a)))
    scale(var(--s, 1));
}
.lookbook.is-orbit .look-card-meta { display: none; }
.lock-stamp,
.look-tap,
.look-card-page::before,
.look-card-page::after,
.look-page-demo::before,
.look-page-demo::after {
  display: none !important;
}
.look-ring[data-dir="-1"] .look-card-page {
  box-shadow: 0 10px 22px rgba(16, 12, 10, 0.18);
}
.look-card-page {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fffdf8;
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(16, 12, 10, 0.28);
}
.look-card-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #fffdf8;
}
.lookbook.is-orbit .look-card-page img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
}
.look-page-demo .look-cover,
.view-library .look-page-demo .look-cover,
.shelf-card .look-cover {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  object-position: center top;
  background: #fff;
  transform: none !important;
}
.look-card-meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  font-style: italic;
}
.look-card-meta span {
  color: color-mix(in srgb, #f6f0e6 72%, transparent);
  font-size: 0.85rem;
}
.look-card:focus-visible .look-card-page {
  box-shadow: 0 22px 40px rgba(16, 12, 10, 0.32);
}
@media (hover: hover) {
  .look-card:hover .look-card-page {
    scale: 1.08;
    box-shadow: 0 20px 38px rgba(16, 12, 10, 0.3);
  }
}
.lookbook.is-orbit .look-card:active .look-card-page img {
  transform: scale(1.02);
}
.shelf-preview:focus-visible .look-cover,
.shelf-preview:active .look-cover {
  transform: none;
  filter: none;
}
@media (hover: hover) {
  .shelf-preview:hover .look-cover {
    transform: none;
    filter: none;
  }
}
.look-card-page {
  transition:
    scale 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease;
}

.env-suite {
  position: relative;
  z-index: 4;
  margin-top: 16px;
}
.lookbook.is-orbit + .env-suite {
  margin-top: 28px;
}
.band-bouquet .env-suite .plate-copy {
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 var(--s4);
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.band-bouquet .env-suite .plate-copy .lede {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 719px) {
  .lookbook.is-orbit + .env-suite { margin-top: 12px; }
}
.env-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  margin-top: var(--s6);
  align-items: end;
}
.env-row button {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6f0e6;
  text-align: center;
}
.env-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(16, 12, 10, 0.32));
  transform-origin: 50% 70%;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
}
.env-row button:focus-visible img {
  transform: scale(1.04);
}
@media (hover: hover) {
  .env-row button:hover img {
    transform: scale(1.04);
  }
}
.env-row button:active img {
  transform: scale(1.015);
}
.env-row span {
  justify-self: center;
  width: fit-content;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
}
@media (hover: hover) {

.shelf-card:hover:where(:not(.ws-gift-stage *)) {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(16, 12, 10, 0.14);
  }
  .view-library .shelf-card:hover {
    background: color-mix(in srgb, #fffdf8 20%, transparent);
    box-shadow: 0 22px 40px rgba(28, 34, 24, 0.12);
  }
}

.band-lace .home-wrap {
  width: min(100% - 32px, 1200px);
}
.date-band {
  display: grid;
  gap: var(--s8);
  padding: 120px 0;
}
.date-pair {
  display: grid;
  gap: var(--s5);
  align-items: stretch;
}
.date-copy h2 {
  font-size: clamp(2.6rem, 5.4vw, 4rem);
  line-height: 1.04;
}
.date-copy .kicker,
.date-copy h2,
.date-copy .lede,
.date-field > span {
  text-shadow: none;
}
.date-field > span {
  justify-self: start;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
}
.date-copy .lede {
  max-width: 28em;
  font-size: 1.22rem;
}
.date-field {
  display: grid;
  grid-template-rows: auto minmax(400px, auto);
  gap: var(--s3);
  margin: 0;
  min-width: 0;
  color: #f6f0e6;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.date-wheel {
  --wheel-item: 56px;
  --wheel-pad: calc((400px - var(--wheel-item)) / 2);
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, #f6efe6 40%, transparent);
  background: color-mix(in srgb, #f6f0e6 36%, transparent);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.date-wheel::before,
.date-wheel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--wheel-pad);
  pointer-events: none;
}
.date-wheel::before {
  top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, #f6f0e6 55%, transparent) 0%, transparent 100%);
}
.date-wheel::after {
  bottom: 0;
  background: linear-gradient(0deg, color-mix(in srgb, #f6f0e6 55%, transparent) 0%, transparent 100%);
}
.wheel-cols {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1fr;
  height: 100%;
}
.wheel-col {
  height: 100%;
  overflow-y: auto;
  padding: var(--wheel-pad) 0;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-item {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--wheel-item);
  padding: 0;
  border: 0;
  background: transparent;
  scroll-snap-align: center;
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: var(--wheel-item);
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 34%, transparent);
  letter-spacing: 0;
  text-transform: none;
}
.wheel-item.is-on { color: var(--ink); }
.wheel-mark {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: var(--wheel-item);
  transform: translateY(-50%);
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}
.date-wheel-ink {
  border-color: var(--line);
  background: #fffdf8;
}
.date-wheel-ink::before {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, transparent 100%);
}
.date-wheel-ink::after {
  background: linear-gradient(0deg, rgba(255, 253, 248, 0.96) 0%, transparent 100%);
}
.date-wheel-ink .wheel-item { color: color-mix(in srgb, var(--ink) 34%, transparent); }
.date-wheel-ink .wheel-item.is-on { color: var(--ink); }
.date-wheel-ink .wheel-mark {
  border-top-color: color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 16%, transparent);
}
.create-date .date-wheel { margin-top: 8px; }
button.date-card {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.date-open {
  justify-self: start;
  margin-top: 8px;
}
.date-card {
  display: grid;
  align-content: space-between;
  gap: var(--s3);
  min-height: 400px;
  height: auto;
  padding: 28px 28px 28px;
  background: color-mix(in srgb, #f6f0e6 36%, transparent);
  border: 1px solid color-mix(in srgb, #f6efe6 40%, transparent);
  color: var(--ink);
  border-radius: 28px;
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.date-line {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.date-spoken {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
}
.count-face {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.count-face div {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 100px;
  min-width: 0;
  padding: var(--s5) 8px;
  background: color-mix(in srgb, #fffdf8 42%, transparent);
  border: 1px solid color-mix(in srgb, #f6efe6 36%, transparent);
  border-radius: 20px;
}
.count-face strong {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count-face span {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.date-who {
  margin: 0;
  text-align: left;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.08;
}

.band-lace,
.band-calla {
  --ink: #1c3a28;
  --muted: #3f5c48;
}
.band-sunveil {
  --ink: #fffdf8;
  --muted: color-mix(in srgb, #fffdf8 78%, transparent);
}
.band-lace .plate-copy,
.band-lace .date-wheel,
.band-lace .date-card {
  background: color-mix(in srgb, #fffdf8 10%, transparent);
  border-color: color-mix(in srgb, #1c3a28 20%, transparent);
  color: #1c3a28;
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
}
.band-sunveil .plate-copy,
.band-sunveil .story-line-home label.story-shot,
.band-sunveil .story-note {
  background: color-mix(in srgb, #fffdf8 10%, transparent);
  border-color: color-mix(in srgb, #fffdf8 28%, transparent);
  color: #fffdf8;
  caret-color: #fffdf8;
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
}
.band-calla .why-card {
  background: color-mix(in srgb, #fffdf8 10%, transparent);
  border-color: color-mix(in srgb, #1c3a28 20%, transparent);
  color: #1c3a28;
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
}
.band-lace .date-copy .kicker,
.band-lace .date-copy h2,
.band-lace .date-copy .lede,
.band-lace .date-field,
.band-lace .date-field > span,
.band-lace .date-who,
.band-lace .date-spoken,
.band-lace .date-open,
.band-calla .why-card .kicker,
.band-calla .why-card h2,
.band-calla .why-card p {
  color: #1c3a28;
}
.band-lace .date-copy .lede,
.band-lace .date-field > span,
.band-lace .date-line,
.band-lace .count-face span,
.band-calla .why-card .kicker,
.band-calla .why-card p {
  color: #3f5c48;
}
.band-calla .why-card {
  --ink: #efe6d8;
  --muted: color-mix(in srgb, #efe6d8 78%, transparent);
  color: #efe6d8;
  border-color: color-mix(in srgb, #efe6d8 28%, transparent);
}
.band-calla .why-card .kicker,
.band-calla .why-card h2,
.band-calla .why-card p {
  color: #efe6d8;
}
.band-calla .why-card .kicker,
.band-calla .why-card p {
  color: color-mix(in srgb, #efe6d8 82%, #fff8ea);
}
.band-lace .date-wheel::before {
  background: linear-gradient(180deg, color-mix(in srgb, #fffdf8 20%, transparent) 0%, transparent 100%);
}
.band-lace .date-wheel::after {
  background: linear-gradient(0deg, color-mix(in srgb, #fffdf8 20%, transparent) 0%, transparent 100%);
}
.band-lace .wheel-item { color: color-mix(in srgb, #efe6d8 22%, transparent); }
.band-lace .wheel-item.is-on {
  position: relative;
  z-index: 3;
  color: #fffdf8;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: var(--wheel-item);
  text-shadow:
    0 0 22px rgba(255, 248, 234, 0.95),
    0 0 8px rgba(255, 253, 248, 0.85);
}
.band-lace .wheel-mark {
  background: color-mix(in srgb, #fff8ea 22%, transparent);
  border-top-color: color-mix(in srgb, #efe6d8 58%, transparent);
  border-bottom-color: color-mix(in srgb, #efe6d8 58%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff8ea 16%, transparent);
}
.band-lace .count-face div {
  background: color-mix(in srgb, #fffdf8 14%, transparent);
  border-color: color-mix(in srgb, #1c3a28 18%, transparent);
  color: #1c3a28;
}
.band-sunveil .story-line-home .story-empty,
.band-sunveil .story-empty-copy,
.band-sunveil .story-change,
.band-sunveil .story-line figcaption,
.band-sunveil .story-note,
.band-sunveil .story-note-label {
  color: #fffdf8;
}
.band-sunveil .story-note::placeholder {
  color: color-mix(in srgb, #fffdf8 70%, transparent);
}
.band-sunveil .story-plus {
  border-color: color-mix(in srgb, #fffdf8 55%, transparent);
}
.band-sunveil .story-plus::before,
.band-sunveil .story-plus::after {
  background: #fffdf8;
}

.story-line-home {
  margin-top: var(--s6);
  align-items: start;
}


.path-ink li,
.make li {
  position: relative;
  overflow: hidden;
  background: #fffdf8;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 14px 28px rgba(16, 12, 10, 0.12);
}
.path-ink li i,
.make li i {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.path-ink span,
.make span { color: var(--muted); }
.path-ink.is-in li,
.make.is-in li {
  opacity: 1;
  animation:
    soft-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both,
    page-float 5.6s ease-in-out 560ms infinite alternate;
}
.path-ink.is-in li:nth-child(1) { animation-delay: 0ms, 560ms; }
.path-ink.is-in li:nth-child(2) { animation-delay: 80ms, 920ms; }
.path-ink.is-in li:nth-child(3) { animation-delay: 160ms, 1280ms; }
.path-ink.is-in li:nth-child(4) { animation-delay: 240ms, 1640ms; }
.path-ink.is-in li:nth-child(5) { animation-delay: 320ms, 2000ms; }
.make.is-in li:nth-child(1) { animation-delay: 0ms, 600ms; }
.make.is-in li:nth-child(2) { animation-delay: 90ms, 1100ms; }
.make.is-in li:nth-child(3) { animation-delay: 180ms, 1600ms; }
.path-ink li.is-now,
.make li.is-now {
  z-index: 1;
  box-shadow: 0 18px 32px rgba(16, 12, 10, 0.16);
}
@media (prefers-reduced-motion: no-preference) {
  .path-ink li,
  .make li {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
  }
  .path-ink li:hover,
  .make li:hover,
  .path-ink li.is-now,
  .make li.is-now {
    animation-play-state: paused;
    transform: translateY(-6px);
    background: #fffaf1;
  }
}

@keyframes page-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

.make {
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s4);
}
.make li {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: var(--s5) var(--s4);
  border-radius: var(--radius);
}
.make strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  font-style: italic;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
}
[data-reveal].is-in {
  animation: soft-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (min-width: 720px) {
  .story-line-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .make { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .date-pair { grid-template-columns: 1fr 1fr; gap: 32px; }
  .env-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .env-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .look-ring,
  .look-card-page {
    animation: none !important;
  }
  .look-card-page {
    transition: none;
  }
  .look-card,
  .look-card:hover .look-card-page {
    opacity: 1;
  }
  .card-tile,
  .card-tile:hover {
    opacity: 1;
    transform: none;
    animation: none;
    box-shadow: none;
  }
.shelf-card:where(:not(.ws-gift-stage *)),
.shelf-card:hover:where(:not(.ws-gift-stage *)) {
    opacity: 1;
    transform: none;
    animation: none;
    box-shadow: 0 12px 24px rgba(16, 12, 10, 0.1);
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    animation: none;
  }
  label.story-shot,
  label.story-shot:hover,
  label.story-shot:focus-within {
    transform: none;
    transition: none;
  }
  .home-stage .hero-env,
  .home-stage .hero-invite,
  .home-stage .env-wrap,
  .home-stage .ghost {
    animation: none;
  }
  .look-page-demo::after,
  .card-tile:not(.card-tile-house)::after,
  .look-tap {
    animation: none;
  }
}

.view-library {
  position: relative;
  overflow: visible;
  min-height: 100dvh;
  padding: 0;
  background: transparent;
}
.lib-switch {
  position: relative;
  z-index: 3;
  width: fit-content;
  margin: 0 auto 28px;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, #1c2218 10%, transparent);
  border-radius: 999px;
  background: #fffdf8;
  box-shadow: 0 10px 24px rgba(16, 12, 10, 0.1);
}
.lib-switch button {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5a4a3c;
  font-size: 0.82rem;
  font-weight: 600;
}
.lib-switch button[aria-checked="true"] {
  background: var(--ink);
  color: #fffdf8;
}
.shelf.is-carousel {
  display: flex;
  width: 100%;
  max-width: none;
  gap: 16px;
  padding: 0 max(16px, calc((100vw - 1120px) / 2)) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shelf.is-carousel .shelf-card {
  flex: 0 0 min(72vw, 300px);
  scroll-snap-align: start;
}
@media (min-width: 720px) {
  .shelf.is-carousel {
    grid-template-columns: none;
  }
  .shelf.is-carousel .shelf-card {
    flex-basis: 280px;
  }
}
@media (min-width: 1100px) {
  .shelf.is-carousel {
    grid-template-columns: none;
    width: 100%;
  }
}
.view-library::after {
  display: none;
}
.view-library .band-video {
  object-position: center;
}
.view-library picture.band-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.view-library picture.band-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.lib-hero,
.lib-shelf {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
.lib-hero {
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: var(--top-clear) 24px calc(72px + var(--band-blend));
  background: #efe6dc url("../images/plate-library-hero.webp") center / cover no-repeat;
}
.lib-hero::after {
  display: none;
}
.lib-head {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.lib-shelf {
  z-index: 2;
  min-height: 100dvh;
  margin-top: calc(var(--band-blend) * -1);
  padding: calc(80px + var(--band-blend)) 0 112px;
  background: #c4b4c8 url("../images/plate-library.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgb(0 0 0 / 0.1) calc(var(--band-blend) * 0.3),
    rgb(0 0 0 / 0.42) calc(var(--band-blend) * 0.58),
    rgb(0 0 0 / 0.82) calc(var(--band-blend) * 0.84),
    #000 var(--band-blend)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgb(0 0 0 / 0.1) calc(var(--band-blend) * 0.3),
    rgb(0 0 0 / 0.42) calc(var(--band-blend) * 0.58),
    rgb(0 0 0 / 0.82) calc(var(--band-blend) * 0.84),
    #000 var(--band-blend)
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.lib-shelf .band-video {
  position: absolute;
  inset: 0;
}
.lib-shelf::before {
  display: none;
}
.lib-shelf > .shelf,
.lib-shelf > .lib-switch { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .lib-hero picture.band-video img {
    animation: none;
  }
  .view-library .shelf-card.is-in {
    opacity: 1;
    animation: lib-card-float 5.6s ease-in-out infinite alternate;
  }
  .view-library .shelf-card.is-in:nth-child(3n) { animation-delay: 1.1s; }
  .view-library .shelf-card.is-in:nth-child(3n + 1) { animation-delay: 2.2s; }
  .view-library .shelf-card.is-in:nth-child(3n + 2) { animation-delay: 0.4s; }
}
.lib-head .kicker { color: color-mix(in srgb, #3f5c48 78%, transparent); }
.lib-head h2 {
  color: #1c3a28;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.lib-head p { margin: 0 auto; max-width: 28em; color: #3f5c48; }
/* Phone: the garden's fountain spire rises through the centred subline, so the
   words sit on a soft paper glow, ink on light like the rest of the library. */
@media (max-width: 719px) {
  .lib-head { isolation: isolate; }
  .lib-head::before {
    content: "";
    position: absolute;
    inset: -28px -12px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgb(250 245 238 / 0.9), rgb(250 245 238 / 0.62) 62%, rgb(250 245 238 / 0));
  }
}
.view-library .shelf-card { opacity: 1; }
.view-library .look-meta strong { color: #1c3a28; }
.view-library .look-meta span { color: #5a6d5c; }
.shelf:where(:not(.ws-gift-stage *)) {
  width: min(100% - 32px, 1120px);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.shelf-card:where(:not(.ws-gift-stage *)) {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 10px;
  height: auto;
  padding: 10px 10px 16px;
  border: 1px solid color-mix(in srgb, #fffdf8 46%, transparent);
  background: color-mix(in srgb, #fffdf8 12%, transparent);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  border-radius: 24px;
  overflow: visible;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 280ms ease, box-shadow 280ms ease, background 280ms ease;
}
.shelf-card.is-in {
  opacity: 1;
  animation: soft-in 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.shelf-preview {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}
.lock-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, #fffdf8 88%, transparent);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.look-card-page,
.look-page {
  position: relative;
}
.using-letter {
  margin: 0 0 var(--s5);
  color: var(--muted);
  font-size: 0.95rem;
}
.shelf-card .look-page,
.shelf-card .look-page-demo,
.shelf-card .look-page.look-page-demo {
  display: block;
  aspect-ratio: auto;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  background: #fff;
  border-radius: 16px;
}
.look-page-demo {
  position: relative;
  display: block;
  padding: 0;
  background: transparent;
}
.look-page-demo::before,
.card-tile:not(.card-tile-house)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 1;
  width: 196px;
  height: 58px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 252, 247, 0.28), transparent 72%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.look-page-demo::after,
.card-tile:not(.card-tile-house)::after,
.look-card-page::after,
.look-tap {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(150% 90% at 20% -35%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(
      185deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.04) 46%,
      rgba(255, 255, 255, 0.2) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -12px 18px rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 8px 18px rgba(28, 34, 24, 0.1);
  backdrop-filter: blur(18px) saturate(1.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.look-page-demo::after,
.card-tile:not(.card-tile-house)::after {
  content: "Tap to open";
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  width: max-content;
  min-width: 168px;
  transform: translateX(-50%);
  pointer-events: none;
}
.card-wall .card-tile::before,
.card-wall .card-tile::after,
.card-wall .look-tap,
.shelf-card .look-page-demo::before,
.shelf-card .look-page-demo::after {
  display: none !important;
}
.look-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  transform: none;
}
.view-library .shelf-actions .btn:not(.btn-solid) {
  background: color-mix(in srgb, #fffdf8 28%, transparent);
  border-color: color-mix(in srgb, #1c3a28 18%, transparent);
  color: #1c3a28;
}
.shelf-actions:where(:not(.ws-gift-stage *)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
}
.shelf-actions .btn {
  text-decoration: none;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 719px) {
  :root {
    --top-bar: 56px;
    --top-clear: calc(var(--top-bar) + 52px + var(--top-gutter) + var(--s5));
  }
  .top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    width: calc(100% - 16px);
    max-width: calc(100vw - 16px);
    top: var(--s2);
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .brand,
  .tabs,
  .top-actions { grid-area: auto; }
  .top-mouth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    z-index: 2;
    min-height: var(--top-bar);
    padding: 6px max(16px, calc(var(--top-bar) / 2 - 12px));
    overflow: visible;
    border: 1px solid color-mix(in srgb, #ffffff 42%, transparent);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.28), rgba(246, 239, 230, 0.1));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      0 10px 28px rgba(16, 12, 10, 0.12);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
  .top-collapse {
    display: grid;
    grid-template-rows: 1fr;
    z-index: 1;
    min-height: 0;
    margin-top: 6px;
    padding-top: 0;
    overflow: hidden;
    transition: grid-template-rows var(--desk-row-enter) var(--desk-ease-out);
  }
  .top-collapse > .tabs {
    --tab-inset: 8px;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, #ffffff 42%, transparent);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 253, 248, 0.28), rgba(246, 239, 230, 0.1));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      0 8px 20px rgba(16, 12, 10, 0.1);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }
  .brand-copy small { display: none; }
  .brand strong { font-size: 1.12rem; }
  .tabs {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(var(--tab-count, 3), minmax(0, 1fr));
  }
  .tabs a {
    min-width: 0;
    padding: 0 6px;
    letter-spacing: 0.08em;
    font-size: 0.62rem;
  }
  .top-actions {
    gap: 4px;
    min-width: 0;
  }
  .guest-disc { padding: 0; font-size: 0; width: 44px; flex: 0 0 44px; }
  .guest-disc::after { content: "G"; font-size: 0.72rem; letter-spacing: 0; }
  .top-signin { padding: 0 10px; font-size: 0.62rem; }
}

@media (min-width: 720px) {
  .top { grid-template-columns: 1fr auto 1fr; }
  .tabs { justify-self: center; }
  .path { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.shelf:where(:not(.ws-gift-stage *)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {

.shelf:where(:not(.ws-gift-stage *)) {
    width: min(100% - 48px, 1680px);
    gap: 18px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
.shelf-actions:where(:not(.ws-gift-stage *)) {
    flex-direction: column;
    align-items: stretch;
    padding: 0 6px;
  }
  .shelf-actions .btn {
    width: 100%;
    padding: 0 10px;
    font-size: 0.72rem;
  }
}

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: var(--sheet);
  border-radius: 999px;
  text-decoration: none;
  display: inline-grid;
  place-items: center;
}
.btn-solid {
  background: var(--forest);
  color: #f4efe4;
  border-color: var(--forest);
}
@media (hover: hover) {
  .btn:hover { background: #fffaf2; }
  .btn-solid:hover { background: #1b2a21; }
}

.workspace {
  display: grid;
  grid-template-columns: 1fr;
}

body[data-view="create"] .desk { order: 1; }
body[data-view="create"] .create-samples { order: 2; }
body[data-view="create"] .panel.create { order: 3; }

/* See the note on `:where(:not(.ws-gift-stage *))` at the top of this file. */
.desk:where(:not(.ws-gift-stage *)) {
  padding: var(--s6) var(--s4) var(--s8);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s4);
}

.desk-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.desk .using-letter {
  margin: 0;
  text-align: center;
  font-size: 0.88rem;
}
.desk #chooseAnother {
  min-height: 44px;
}

.live-demo {
  width: min(100%, 390px);
  height: min(78dvh, 844px);
  min-height: 560px;
  border: 0;
  border-radius: var(--radius);
  background: #fffdf8;
  color-scheme: light;
}
.live-follow {
  width: min(100%, 390px);
  display: grid;
  gap: 8px;
}
.live-follow-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.live-follow-shots img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
}
.live-follow-note {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  color: #1c3a28;
}
.letter {
  width: min(100%, 360px);
}
.letter[data-page="cover"] {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.letter:not([data-page="cover"]) {
  background: #fffdf8;
  padding: var(--s6) var(--s4) var(--s4);
  border-radius: var(--radius);
}

[hidden] { display: none !important; }

.page-cover { width: 100%; }

.eyebrow {
  margin: 0 0 var(--s3);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.names {
  margin: 0 0 var(--s5);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 8vw, 2.9rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.names em {
  display: block;
  margin: 6px 0;
  font-size: 0.55em;
  font-style: italic;
}

.env-wrap {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 22px 36px rgba(28, 34, 24, 0.2));
}

.env-photo {
  width: 100%;
  height: auto;
  background: transparent;
}

.seal {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: #3a2a10;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.7rem, 2.4vw, 0.95rem);
  line-height: 1;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.35);
}

.mat {
  position: absolute;
  left: 4%;
  bottom: -20%;
  z-index: 3;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  width: 36%;
  padding: 8px 8px 8px;
  background: #f7f1e6;
  border: 0;
  border-radius: 10px;
  transform: rotate(-8deg);
  box-shadow:
    0 16px 28px rgba(16, 12, 10, 0.2),
    inset 0 1px 0 rgba(255, 252, 247, 0.8);
}
.mat-well {
  display: block;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(180deg, #efe6d4 0%, #e4d8c4 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.mat-caption {
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: #6a6258;
}

.ghost {
  display: block;
  width: max-content;
  min-height: 48px;
  margin: 28px auto 0;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--sheet) 88%, transparent);
  border-radius: 999px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.spread {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s3);
  align-items: start;
}

.suite {
  grid-template-areas:
    "env play"
    "invite invite"
    "details shots"
    "count count";
  gap: 8px 12px;
  padding: 4px 0 8px;
}
.suite .mini-env { grid-area: env; }
.suite .playlist-tile { grid-area: play; }
.suite .invite-card { grid-area: invite; }
.suite .details-tile { grid-area: details; }
.suite .shots { grid-area: shots; }
.suite .count-chip { grid-area: count; }

.mini-env {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  min-height: 44px;
}
.mini-env .env-photo { width: 100%; }
.mini-env .seal {
  width: 18%;
  font-size: 0.55rem;
}

.tile {
  min-height: 88px;
  padding: var(--s4);
  border: 1px solid var(--line);
  background: var(--card);
  text-align: left;
  display: grid;
  align-content: space-between;
  border-radius: var(--radius);
  box-shadow: 0 8px 16px rgba(28, 34, 24, 0.06);
}
.tile em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
}
.tile span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.playlist-tile {
  align-self: end;
  min-height: 96px;
  margin: 12px 4px 0 0;
  transform: rotate(3deg);
  background: #f6efe4;
  border-color: color-mix(in srgb, #cfc0a8 80%, transparent);
}
.details-tile {
  min-height: 120px;
  aspect-ratio: 1;
  place-items: center;
  text-align: center;
  align-content: center;
  gap: 8px;
  padding: var(--s5);
  border-radius: 50%;
  transform: rotate(-5deg);
  background: #f3ece0;
  border-color: color-mix(in srgb, #cfc0a8 90%, transparent);
  box-shadow: 0 10px 20px rgba(28, 34, 24, 0.1);
}
.details-tile em { font-size: 1.15rem; }

.invite-card {
  justify-self: center;
  width: min(100%, 248px);
  background: var(--card);
  padding: 36px 24px 32px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--seal) 42%, transparent);
  box-shadow:
    inset 0 0 0 7px var(--card),
    inset 0 0 0 8px color-mix(in srgb, var(--seal) 38%, transparent),
    0 14px 28px rgba(28, 34, 24, 0.08);
  scroll-margin-top: 24px;
}
.invite-card p { margin: 0; }
.invite-card .host,
.invite-card .ask,
.invite-card .close {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
}
.invite-card .who {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px 0 8px;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 7vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.invite-card .who em {
  display: block;
  margin: 2px 0 0;
  font-size: 0.62em;
  font-style: italic;
  font-weight: 400;
}
.invite-card .ask { margin: 8px 0 20px; }
.invite-card .when,
.invite-card .hour,
.invite-card .addr {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
}
.invite-card .hour { margin-top: 4px; }
.invite-card .venue {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.invite-card .addr { margin-top: 4px; }
.invite-card .close { margin-top: 20px; }
@media (max-width: 719px) {
  .invite-card { scroll-margin-top: 188px; }
}

.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.shot {
  background: #f7f1e4;
  padding: 7px 7px 18px;
  border: 0;
  box-shadow: 0 8px 18px rgba(28, 34, 24, 0.08);
  min-height: 44px;
}
.shot:first-child { transform: rotate(-7deg); }
.shot:last-child { transform: rotate(5deg); margin-top: 12px; }
.shot span {
  display: block;
  aspect-ratio: 4 / 5;
  background: #f3ece0;
  border: 7px solid #cfc0a8;
}

.count-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  margin: 8px auto 0;
  padding: 0 16px;
  background: #fffdf8;
  border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 12px;
}
.count-chip span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.count-chip strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.page-story .story-line {
  gap: var(--s3);
}
.page-story label.story-shot {
  aspect-ratio: 5 / 4;
  min-height: 132px;
  padding: 6px 6px 22px;
}
.page-story .story-empty,
.page-story .story-pic {
  top: 6px;
  right: 6px;
  bottom: 22px;
  left: 6px;
}
.page-story .story-pic {
  width: calc(100% - 12px);
  height: calc(100% - 28px);
}
.page-story .story-change { bottom: 4px; }

.page-title {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(2rem, 6.5vw, 2.55rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-sub {
  margin: 8px 0 var(--s6);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted);
}

.detail-sheet {
  background: var(--card);
  padding: var(--s6) var(--s5);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(28, 34, 24, 0.08);
}
.detail-sheet p { margin: 0 0 var(--s3); }
.detail-sheet p:last-child { margin: 0; }

.story-line {
  display: grid;
  gap: var(--s5);
  margin: 0 0 var(--s6);
}
.story-line figure {
  margin: 0;
  --tilt: 0deg;
}
label.story-shot {
  position: relative;
  display: block;
  gap: 0;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 168px;
  padding: 8px 8px 28px;
  overflow: hidden;
  background: #f7f1e4;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(28, 34, 24, 0.12);
  cursor: pointer;
  transform: rotate(var(--tilt));
  transition: transform 280ms ease, box-shadow 280ms ease;
}
input.story-file,
input.story-file::-webkit-file-upload-button,
input.story-file::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
}
input.story-file {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  min-width: 0;
  opacity: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  text-indent: -999px;
  cursor: pointer;
}
.story-empty {
  pointer-events: none;
  position: absolute;
  inset: 8px 8px 28px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s3);
  background:
    linear-gradient(180deg, #efe6d4 0%, #e6dcc8 100%);
  border-radius: calc(var(--radius) - 8px);
  color: var(--muted);
}
.story-plus {
  width: 36px;
  height: 36px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  position: relative;
}
.story-plus::before,
.story-plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: 999px;
}
.story-plus::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.story-plus::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.story-empty-copy {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.story-pic {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 28px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 36px);
  max-width: none;
  object-fit: cover;
  border-radius: calc(var(--radius) - 8px);
}
.story-change {
  pointer-events: none;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  z-index: 1;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
}
.story-shot.is-filled .story-empty { display: none; }
.story-shot.is-filled .story-pic { display: block; }
.story-shot.is-filled .story-change { opacity: 1; }
.story-line figcaption {
  width: fit-content;
  margin: var(--s3) auto 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.story-line-home figure:nth-child(1) { --tilt: -2.4deg; }
.story-line-home figure:nth-child(2) { --tilt: 1.1deg; }
.story-line-home figure:nth-child(3) { --tilt: 2.6deg; }
.story-line-home label.story-shot {
  background: color-mix(in srgb, #f6efe6 28%, transparent);
  border: 1px solid color-mix(in srgb, #f6efe6 38%, transparent);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.story-line-home .story-empty {
  background: color-mix(in srgb, #f6efe6 16%, transparent);
  color: #f6f0e6;
}
.story-line-home .story-plus {
  border-color: color-mix(in srgb, #f6efe6 55%, transparent);
}
.story-line-home .story-plus::before,
.story-line-home .story-plus::after {
  background: color-mix(in srgb, #f6efe6 82%, transparent);
}
label.story-shot:hover,
label.story-shot:focus-within {
  box-shadow: 0 16px 28px rgba(28, 34, 24, 0.16);
}
label.story-shot:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  label.story-shot:hover,
  label.story-shot:focus-within {
    transform: rotate(var(--tilt)) translateY(-4px);
  }
}
.band-sunveil .story-line figcaption,
.band-sunveil .story-note,
.band-sunveil .story-note-label {
  color: #fffdf8;
}
.story-note-label {
  display: block;
  width: fit-content;
  margin: var(--s6) auto 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.story-note {
  display: block;
  width: min(100%, 36em);
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, #f6efe6 34%, transparent);
  background: color-mix(in srgb, #f6efe6 22%, transparent);
  border-radius: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  text-align: center;
  color: #f6f0e6;
  resize: vertical;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.story-note:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
#create textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--sheet);
  border-radius: 12px;
  font: inherit;
  resize: vertical;
}

.rsvp-by {
  margin: 0 0 var(--s6);
  text-align: center;
}
.rsvp-row { display: grid; gap: var(--s3); }
.rsvp-opt {
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
}
.rsvp-opt[aria-pressed="true"] {
  border-color: var(--ink);
  background: #fffaf1;
}

.pager {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.pager button {
  min-height: 44px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  background: none;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.screen .pager button {
  font-size: 0.55rem;
  letter-spacing: 0.02em;
}
.pager button[aria-current="true"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .page:not([hidden]) { animation: page-in 280ms ease-out; }
}
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.panel {
  padding: var(--s6) var(--s5) var(--s8);
  background: color-mix(in srgb, var(--sheet) 78%, transparent);
  border-top: 1px solid var(--line);
}

.kicker {
  margin: 0 0 var(--s2);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel h2 {
  margin: 0 0 var(--s6);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.block { margin: 0 0 var(--s6); }
.block > p {
  margin: 0 0 var(--s3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.looks {
  display: grid;
  gap: var(--s4);
}
.look {
  display: grid;
  gap: var(--s3);
  width: 100%;
  padding: 0 0 var(--s3);
  border: 1px solid var(--line);
  background: transparent;
  text-align: left;
  border-radius: var(--radius);
  overflow: hidden;
}
.look[aria-pressed="true"] { border-color: var(--ink); }
.look-page {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s5) var(--s4) var(--s4);
  background: transparent;
}
.look-eye {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.look-names {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  text-align: center;
  letter-spacing: -0.01em;
}
.look-names em {
  display: block;
  font-size: 0.55em;
  margin: 2px 0;
}
.look-env {
  width: 88%;
  height: auto;
  margin: 4px 0;
  background: transparent;
  filter: drop-shadow(0 10px 18px rgba(28, 34, 24, 0.16));
}
.look-tap {
  margin-top: 8px;
}
.look-meta { padding: 0 var(--s3); }
.look-meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  font-style: italic;
}
.look-meta span { color: var(--muted); font-size: 0.85rem; }

.create-search {
  margin: 0 0 var(--s4);
  border: 1px solid var(--line);
  background: var(--sheet);
}
.create-sample-list {
  display: grid;
  gap: 12px;
  margin-top: var(--s4);
  max-height: 62vh;
  overflow: auto;
}
.create-sample {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  background: transparent;
  text-align: left;
  border-radius: 18px;
  cursor: pointer;
}
.create-sample-reel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.create-sample-reel::-webkit-scrollbar { display: none; }
.create-sample-page {
  flex: 0 0 48%;
  margin: 0;
  scroll-snap-align: start;
}
.create-sample-page img,
.create-sample-page .sample-piece {
  display: block;
  width: 100%;
  height: min(36vw, 168px);
  object-fit: contain;
  object-position: center top;
  background: #fff;
  border-radius: 10px;
}
.create-sample-page .sample-piece {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 12px 10px;
  text-align: center;
  background: #fffdf8;
  object-fit: unset;
}
.create-sample-page[data-kind="map"] .sample-piece {
  height: min(44vw, 220px);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  padding: 10px 8px 8px;
}
.sample-map {
  width: 100%;
  min-height: 96px;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #efe8dc;
  pointer-events: none;
}
.letter-pin {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}
.letter-pin iframe {
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 16px;
  background: #efe8dc;
}
.sample-piece-kicker {
  margin: 0;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sample-piece p {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--ink);
}
.sample-piece .sample-who,
.sample-piece .sample-dress,
.sample-piece .sample-place {
  font-size: 1.05rem;
  font-style: italic;
}
.create-sample-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-height: 18px;
}
.create-sample-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c9bfa8;
  cursor: pointer;
}
.create-sample-dots button[aria-current="true"] {
  background: var(--forest);
  transform: scale(1.25);
}
.create-sample-page figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.swatch-all {
  min-width: 44px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #fffdf8 40%, transparent);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sample-empty { margin-top: 12px; }
.create-sample-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.create-sample-copy strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
}
.create-sample-copy span {
  color: var(--muted);
  font-size: 0.8rem;
}
.create-sample[aria-selected="true"] {
  border-color: var(--ink);
  background: #fffaf2;
}
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(28, 34, 24, 0.2);
}
.swatch[aria-pressed="true"] { border-color: var(--ink); }

.backdrop-add {
  position: relative;
  display: grid;
  margin: 0 0 var(--s4);
  min-height: 120px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sheet);
  border-radius: 16px;
  cursor: pointer;
}
.backdrop-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 120px;
  padding: var(--s4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
}
.backdrop-add.is-filled .backdrop-empty { display: none; }
.backdrop-add.is-filled #backdropPreview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.backdrop-change {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f6efe6;
  text-shadow: 0 1px 2px rgba(28, 22, 16, 0.35);
}
.guest-actions {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
}
.guest-actions .btn {
  display: grid;
  width: 100%;
  margin: 0;
}
.guest-actions #guestLinkNote { margin: 0; }
#saveGuest,
#copyGuestLink { width: 100%; }
body[data-view="create"][data-has-backdrop="1"] .desk {
  background: var(--guest-scene) center 42% / cover no-repeat;
  padding-top: var(--s8);
}
body[data-view="create"][data-has-backdrop="1"] .desk-label {
  color: #f6efe6;
  text-shadow: 0 1px 2px rgba(28, 22, 16, 0.28);
}

.cuts { display: grid; gap: var(--s2); }
.cut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--sheet);
  text-align: left;
  border-radius: var(--radius);
}
.cut[aria-pressed="false"] { color: var(--muted); }
.cut i {
  width: 28px;
  height: 16px;
  border-radius: 99px;
  background: var(--line);
  position: relative;
}
.cut i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sheet);
}
.cut[aria-pressed="true"] i { background: var(--forest); }
.cut[aria-pressed="true"] i::after { left: 14px; }

fieldset { border: 0; margin: 0 0 var(--s5); padding: 0; }
legend {
  margin-bottom: var(--s3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
label {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--s3);
  font-size: 0.9rem;
}
input:not([type="file"]):not([type="hidden"]) {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: #fffaf2;
  border-radius: var(--radius);
}

.note { margin: var(--s4) 0 0; color: var(--muted); font-size: 0.9rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

dialog.guest {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #c4b4c8;
  background-image: var(--guest-scene);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
dialog.guest::backdrop { background: rgba(20, 24, 18, 0.55); }
dialog.guest.is-guest-in {
  animation: studio-view-in var(--desk-pane) var(--desk-ease-out) both;
}
dialog.guest.is-guest-in::backdrop {
  animation: studio-copy-fade var(--desk-pane) var(--desk-ease-out) both;
}
body:has(dialog.guest[open]) .top,
body:has(dialog.guest[open]) .view { visibility: hidden; }
.guest-stage {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 0;
  background: transparent;
  display: grid;
  grid-template-rows: 1fr;
}
dialog.guest:has(.demo-frame),
dialog.guest:has(.demo-still),
dialog.guest:has(.demo-missing) {
  background-color: #c4b4c8;
  background-image: var(--guest-scene);
}
#guestMount {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  background: #5a684c;
}
#guestMount .demo-still {
  margin: 0;
  min-height: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 64px 16px 24px;
  box-sizing: border-box;
}
#guestMount .demo-still img {
  display: block;
  max-width: min(920px, 100%);
  max-height: calc(100dvh - 88px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(20, 24, 18, 0.28);
}
#guestMount .demo-missing {
  margin: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 64px 24px;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  text-align: center;
}
#guestMount .demo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
  border: 0;
  background: #5a684c;
  color-scheme: light;
}
.guest-bar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.guest-bar .guest-close,
.guest-bar .guest-use {
  pointer-events: auto;
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, #f3ece0 55%, transparent);
  background: #f3ece0;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--ink);
}
.guest-use[hidden] { display: none; }
.guest-stage .letter,
.letter.is-guest,
.letter.is-guest:not([data-page="cover"]) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.guest-stage .pager {
  border-top-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
.demo-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: light;
}
.guest-stage .letter {
  padding: 0;
}
.guest-stage .page-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 56px 22px 40px;
  box-sizing: border-box;
}
.guest-stage .eyebrow {
  color: color-mix(in srgb, #f6f0e6 78%, transparent);
}
.guest-stage .names {
  margin: 0 0 20px;
  font-size: clamp(1.85rem, 8vw, 2.35rem);
  color: #f6f0e6;
  text-shadow: 0 2px 18px rgba(16, 12, 10, 0.45);
}
.guest-stage .env-wrap {
  width: 86%;
  max-width: 320px;
  margin: 0 auto;
}
.guest-stage .ghost {
  margin-top: 40px;
  border: 1px solid color-mix(in srgb, #f3ece0 46%, transparent);
  background: color-mix(in srgb, #1c1814 28%, transparent);
  color: #f6f0e6;
}
.letter.is-guest .suite {
  display: grid;
  width: min(100%, 560px);
  grid-template-columns: 1fr;
  grid-template-areas:
    "invite"
    "count";
  justify-items: stretch;
  gap: 20px;
  padding: 0;
  min-height: 0;
  box-sizing: border-box;
  align-content: center;
}
.letter.is-guest .mini-env,
.letter.is-guest .playlist-tile,
.letter.is-guest .details-tile,
.letter.is-guest .shots,
.view-create .letter .mini-env,
.view-create .letter .playlist-tile,
.view-create .letter .details-tile,
.view-create .letter .shots {
  display: none;
}
.letter.is-guest .page-invite,
.letter.is-guest .page-details,
.letter.is-guest .page-story,
.letter.is-guest .page-rsvp {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 72px 24px 108px;
  box-sizing: border-box;
  background: transparent;
}
.letter.is-guest .invite-card {
  width: 100%;
  padding: 56px 48px 52px;
  background: var(--card);
}
.letter.is-guest .detail-sheet,
.letter.is-guest .page-rsvp .rsvp-row,
.letter.is-guest .story-note {
  width: min(100%, 560px);
}
.letter.is-guest .page-title,
.letter.is-guest .page-sub,
.letter.is-guest .rsvp-by {
  text-align: center;
}
.letter.is-guest .count-chip {
  background: color-mix(in srgb, #f6efe6 88%, transparent);
}
.letter.is-guest .pager {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: color-mix(in srgb, #f6efe6 72%, transparent);
}

@media (min-width: 768px) {
  .looks { grid-template-columns: 1fr; }
}

@media (min-width: 1100px) {
  .workspace {
    grid-template-columns: 340px minmax(0, 1fr) 300px;
    min-height: calc(100dvh - 73px);
  }
  body[data-view="create"] .workspace {
    grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr) minmax(300px, 1fr);
    min-height: calc(100dvh - 73px);
  }
  body[data-view="create"] .desk,
  body[data-view="create"] .create-samples,
  body[data-view="create"] .panel.create {
    order: 0;
  }
  .create-sample-list {
    max-height: none;
  }
.desk:where(:not(.ws-gift-stage *)) {
    order: 0;
    align-content: start;
    align-self: start;
    position: sticky;
    top: 0;
    max-height: calc(100dvh - 73px);
    overflow: auto;
    padding: var(--s8);
  }
  .dress,
  .create {
    max-height: calc(100dvh - 73px);
    overflow: auto;
  }
  .panel { border-top: 0; }
  .dress { border-right: 1px solid var(--line); }
  .create { border-left: 1px solid var(--line); }
}

.view-create .panel {
  background: color-mix(in srgb, #fffdf8 10%, transparent);
  border-color: color-mix(in srgb, #1c3a28 16%, transparent);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}
.view-create .desk {
  background: transparent;
}
.view-create .desk-label,
.view-create .desk .using-letter,
.view-create .kicker,
.view-create .panel h2,
.view-create .using-letter,
.view-create .note,
.view-create .block > p,
.view-create legend {
  color: #1c3a28;
}
.view-create .desk-label,
.view-create .desk .using-letter {
  text-shadow: none;
}
.view-create .btn,
.view-create .btn-solid,
.view-create .ghost,
.view-create .cut,
.view-create .create-sample,
.view-create .backdrop-add {
  background: color-mix(in srgb, #fffdf8 14%, transparent);
  border: 1px solid color-mix(in srgb, #1c3a28 20%, transparent);
  color: #1c3a28;
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  box-shadow: none;
}
@media (hover: hover) {
  .view-create .btn:hover,
  .view-create .btn-solid:hover,
  .view-create .ghost:hover,
  .view-create .cut:hover,
  .view-create .create-sample:hover,
  .view-create .backdrop-add:hover {
    background: color-mix(in srgb, #fffdf8 28%, transparent);
  }
}
.view-create .btn-solid {
  color: #1c3a28;
}
.view-create .create-sample[aria-selected="true"],
.view-create .cut[aria-pressed="true"] {
  background: color-mix(in srgb, #fffdf8 28%, transparent);
  border-color: color-mix(in srgb, #1c3a28 32%, transparent);
}
.view-create .create-sample img {
  background: #fff;
}
.view-create .ghost {
  margin-left: auto;
  margin-right: auto;
}
.view-create input:not([type="file"]):not([type="hidden"]),
.view-create textarea {
  appearance: none;
  -webkit-appearance: none;
  background: color-mix(in srgb, #fffdf8 14%, transparent);
  border-color: color-mix(in srgb, #1c3a28 16%, transparent);
}
.view-create .backdrop-empty {
  color: #3f5c48;
}
.view-create .create-sample-copy span,
.view-create .cut[aria-pressed="false"] {
  color: #5a6d5c;
}
.create-photo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 0;
}
.create-photo {
  position: relative;
  display: grid;
  min-height: 88px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
}
.create-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.create-photo-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 118px;
  padding: 10px 6px;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.create-photo-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font: 700 1.15rem/1 Georgia, Times, serif;
  letter-spacing: 0;
  text-transform: none;
}
.create-photo-empty .story-plus {
  width: 32px;
  height: 32px;
  border-color: color-mix(in srgb, #1c3a28 40%, transparent);
}
.create-photo-empty .story-plus::before,
.create-photo-empty .story-plus::after {
  background: #1c3a28;
}
.create-photo-add {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.create-photo img {
  display: none;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.create-photo.is-filled .create-photo-empty { display: none; }
.create-photo.is-filled img { display: block; }
.package-need {
  color: #6a2430;
}
.view-create .create-photo {
  background: color-mix(in srgb, #fffdf8 14%, transparent);
  border: 1px solid color-mix(in srgb, #1c3a28 20%, transparent);
  color: #1c3a28;
}
.view-create .package-need { color: #6a2430; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .path li { opacity: 1; transform: none; }
}

.view-price {
  position: relative;
  overflow: visible;
  min-height: 100dvh;
  padding: 0;
  background: #1c2618 url("../images/plate-price.jpg") center / cover no-repeat;
}
.view-price > * { position: relative; z-index: 2; }
.view-price > .band-video { z-index: 0; }
.view-price > .price-veil { z-index: auto; }
.view-price picture.band-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.view-price picture.band-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.price-veil {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
  padding: max(var(--top-clear), 144px) 20px 48px;
  background: none;
}
.price-head {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  max-width: 34em;
  padding: 24px clamp(18px, 4vw, 40px);
  border-radius: 28px;
  background: rgba(244, 239, 228, 0.94);
}
.price-board {
  width: min(100%, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.price-card {
  display: grid;
  align-content: start;
  gap: 14px;
  justify-items: stretch;
  text-align: left;
  padding: clamp(22px, 3vw, 32px);
  border: 0.5px solid rgba(28, 38, 24, 0.1);
  border-radius: 28px;
  background: color-mix(in srgb, #f4efe4 78%, transparent);
  color: var(--ink);
  box-shadow: 0 22px 56px rgba(16, 12, 10, 0.12);
}
.price-card[data-kind="website"] {
  background: color-mix(in srgb, #f4efe4 86%, transparent);
}
.view-price .kicker {
  margin: 0;
  color: var(--forest);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.view-price h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
}
.view-price h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}
.view-price .lede {
  margin: 0;
  max-width: 34em;
  color: var(--muted);
}
.price-head .lede { margin: 0 auto; }
.price-list {
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 0.95rem;
}
.price-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.price-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--forest);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.3 11.6 2.8 8.1l1.2-1.2 2.3 2.3 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.3 11.6 2.8 8.1l1.2-1.2 2.3 2.3 5.7-5.7 1.2 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.price-amt {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.price-amt small {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-start {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  background: var(--forest);
  border: 1px solid var(--forest);
  border-bottom-width: 4px;
  border-bottom-color: #1a5440;
  color: #fffdf8;
  transition: transform 70ms ease-out, border-bottom-width 70ms ease-out;
}
.price-start:active {
  border-bottom-width: 1px;
  transform: translateY(3px);
}
.price-note {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, #1c2218 72%, #f4efe4);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(244, 239, 228, 0.94);
}
@media (min-width: 720px) and (max-width: 1023px) {
  .price-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card[data-kind="unlimited"] { grid-column: 1 / -1; }
}
@media (hover: hover) {
  .price-start:hover { background: #243d29; }
  .price-start:hover:active {
    border-bottom-width: 1px;
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-start { transition: none; }
  #view-price .price-card,
  #view-price.view.is-view-in .price-card,
  #view-price .price-card.is-block-in {
    animation-name: studio-view-fade;
    animation-duration: 200ms;
    transform: none;
  }
}
@media (max-width: 719px) {
  .view-price {
    background-image: url("../images/plate-price-phone.jpg");
  }
  .price-veil {
    align-content: start;
    gap: 20px;
    padding: max(var(--top-clear), 180px) 12px 32px;
  }
  .price-board {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .price-card { padding: 22px 18px; }
}

.auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px 0 6px;
}
.auth-chip img,
.auth-chip span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: #f3ece0;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-chip button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-view="account"] {
  background: var(--desk, #e4dcc8);
}
.auth-gate {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow: auto;
  padding-top: var(--top-clear);
  background: #e4dcc8;
}
.auth-gate::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    #e4dcc8 url("../images/plate-account.jpg") center / cover no-repeat;
}
.auth-gate::after {
  content: none;
}
.auth-gate-veil {
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - var(--top-clear));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 3.4vh, 36px);
  padding: clamp(28px, 4vh, 48px) clamp(16px, 3vw, 28px) clamp(40px, 6vh, 72px);
  background: none;
}
.auth-hero {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 28px 24px 24px;
  text-align: center;
  color: var(--ink);
  animation: auth-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Same frost plate as dashboard .dash-hero / .dash-card */
  --dash-hair: color-mix(in srgb, #ffffff 70%, transparent);
  --dash-vellum: color-mix(in srgb, var(--paper, #f4efe6) 42%, transparent);
  --dash-frost: color-mix(in srgb, #ffffff 20%, transparent);
  --dash-blur: blur(22px) saturate(1.7);
  --dash-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -8px 16px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: var(--dash-vellum);
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius, 22px);
  box-shadow: var(--dash-inset), 0 10px 28px rgba(16, 12, 10, 0.1);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.auth-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--forest);
}
.auth-eyebrow::before,
.auth-eyebrow::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, rgba(36, 53, 42, 0.45), transparent);
}
.auth-eyebrow::before { margin-left: 0; }
.auth-eyebrow::after { margin-right: 0; }
.auth-hero h1 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-shadow: none;
}
.auth-hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.auth-lead {
  margin: 0 auto;
  max-width: 42ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  text-shadow: none;
}
.auth-panel {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  overflow: hidden;
  border: 0.5px solid rgba(28, 38, 24, 0.1);
  border-radius: 32px;
  background: color-mix(in srgb, #f4efe4 86%, transparent);
  box-shadow: 0 22px 56px rgba(16, 12, 10, 0.12);
  animation: auth-rise 860ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-hero,
  .auth-panel {
    animation: none;
  }
}
.auth-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(40px, 5.2vw, 68px);
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 250, 242, 0.42), rgba(246, 239, 230, 0.18)),
    #f6efe6 url("../images/plate-account-panel.jpg") center / cover no-repeat;
  color: var(--ink);
}
.auth-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 250, 242, 0.22), transparent 42%),
    linear-gradient(180deg, transparent 55%, rgba(28, 20, 14, 0.08));
  pointer-events: none;
}
.auth-copy::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -120px;
  width: 280px;
  aspect-ratio: 1;
  border: 1px solid rgba(28, 38, 24, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(28, 38, 24, 0.03),
    0 0 0 76px rgba(28, 38, 24, 0.02);
  pointer-events: none;
}
.auth-copy h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 600;
  line-height: 0.98;
}
.auth-copy > p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.auth-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.78);
  color: var(--forest);
  border: 1px solid rgba(45, 74, 50, 0.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-benefits {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.auth-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 650;
}
.auth-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(28px, 3.4vw, 44px);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(252, 247, 237, 0.96));
  color: var(--ink);
  border-left: 1px solid rgba(28, 38, 24, 0.08);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(28, 38, 24, 0.1);
}
.auth-brand-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 18px rgba(29, 61, 84, 0.14);
}
.auth-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-brand-copy {
  display: grid;
  gap: 2px;
}
.auth-brand-copy strong {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}
.auth-brand-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
}
.auth-mobile-intro { display: none; }
.auth-continue {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}
.auth-continue::before,
.auth-continue::after {
  content: "";
  display: inline-block;
  width: 28%;
  height: 1px;
  margin: 0 10px;
  vertical-align: middle;
  background: rgba(28, 38, 24, 0.16);
}
.auth-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(28, 38, 24, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}
.auth-consent input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--forest);
}
.auth-consent a,
.auth-note a {
  color: var(--ink);
  font-weight: 800;
  text-underline-offset: 3px;
}
.auth-google {
  width: 100%;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid rgba(28, 38, 24, 0.16);
  border-bottom-width: 4px;
  border-radius: 16px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(16, 12, 10, 0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.auth-google:not(:disabled):hover {
  background: #fffaf1;
  box-shadow: 0 14px 32px rgba(16, 12, 10, 0.12);
}
.auth-google:not(:disabled):active {
  transform: translateY(1px);
  border-bottom-width: 2px;
}
.auth-google:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.auth-session {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(28, 38, 24, 0.12);
  border-radius: 16px;
  background: #fffdf8;
}
.auth-session[hidden] { display: none; }
.auth-session p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.auth-signout {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(28, 38, 24, 0.16);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.project-desk {
  display: grid;
  gap: 12px;
}
.project-desk[hidden],
#projectPitch[hidden],
#authPitch[hidden],
#authGuest[hidden] { display: none; }
.project-kicker {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--muted);
}
.project-desk p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.project-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.project-actions .btn {
  min-height: 44px;
}
.auth-google-mark {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(29, 61, 84, 0.12);
}
.auth-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.auth-error {
  margin: 0;
  color: #8a2a1a;
  font-size: 13px;
}
.auth-embedded {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(196, 112, 62, 0.34);
  border-radius: 14px;
  background: rgba(255, 247, 232, 0.86);
}
.auth-embedded strong {
  font-family: var(--serif);
  font-size: 22px;
}
.auth-embedded button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--forest);
  color: #fffdf8;
  font-weight: 700;
}
@media (max-width: 980px) {
  .auth-panel {
    width: min(100%, 720px);
    grid-template-columns: 1fr;
  }
  .auth-copy {
    min-height: 240px;
    padding: 28px 24px;
  }
  .auth-card {
    border-left: 0;
    border-top: 1px solid rgba(28, 38, 24, 0.08);
  }
}
@media (max-width: 719px) {
  .auth-gate-veil {
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 12px 40px;
  }
  .auth-hero { padding: 22px 16px 18px; }
  .auth-hero h1 { font-size: clamp(32px, 8.5vw, 42px); }
  .auth-lead { font-size: 14px; }
  .auth-panel {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .auth-copy,
  .auth-card {
    border: 0.5px solid rgba(28, 38, 24, 0.12);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(16, 12, 10, 0.12);
  }
  .auth-card {
    grid-row: 1;
    background: color-mix(in srgb, #f4efe4 92%, transparent);
    border-top: 0;
  }
  .auth-copy {
    grid-row: 2;
    min-height: 220px;
    padding: 20px 16px;
    background: #f6efe6 url("../images/plate-account-panel.jpg") center / cover no-repeat;
    color: var(--ink);
  }
  .auth-copy::after,
  .auth-copy > .auth-badge,
  .auth-copy > h2,
  .auth-copy > p {
    display: none;
  }
  .auth-copy .auth-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
  }
  body[data-signed-in="1"] .auth-copy {
    display: none;
  }
  .auth-copy .auth-benefits span {
    min-height: 32px;
    justify-content: center;
    gap: 4px;
    color: var(--ink);
    font-size: 10px;
    line-height: 1.25;
    text-align: center;
  }
  .auth-mobile-intro {
    display: grid;
    gap: 8px;
  }
  .auth-mobile-intro h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(30px, 8.5vw, 38px);
    font-weight: 600;
    line-height: 0.98;
  }
  .auth-mobile-intro p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }
  .auth-continue { display: none; }
}


dialog.onboard {
  inset: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
dialog.onboard::backdrop {
  background: rgba(20, 24, 18, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.onboard-sheet {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 32px 28px 24px;
  background: color-mix(in srgb, #f4efe4 90%, transparent);
  border: 0.5px solid rgba(28, 38, 24, 0.1);
  border-radius: 28px;
  box-shadow: 0 22px 56px rgba(16, 12, 10, 0.16);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}
.onboard-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.onboard-x:hover { background: #fffaf1; }
.onboard-head { display: grid; gap: 8px; padding-right: 40px; }
.onboard-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 2.15rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}
.onboard-head p {
  margin: 0;
  color: #3f5c48;
  font-size: 0.95rem;
  line-height: 1.4;
}
.onboard-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.onboard-progress i {
  height: 3px;
  border-radius: 999px;
  background: #ddd4c4;
}
.onboard-progress i.is-on { background: #5c564c; }
.onboard-steps section { display: grid; gap: 14px; }
.onboard-steps h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  font-weight: 400;
  line-height: 1.2;
}
.onboard-steps label {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #3f5c48;
}
.onboard-steps input,
.onboard-steps textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 14px;
  background: #fffdf8;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
}
.onboard-steps textarea { min-height: 120px; resize: vertical; }
.onboard-steps input:focus-visible,
.onboard-steps textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.format-pick {
  display: grid;
  gap: 12px;
  border: 0;
  padding: 0;
  margin: 0;
}
.format-pick legend {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c564c;
  margin-bottom: 8px;
}
.format-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 16px 20px;
  border: 1px solid #d8cbb4;
  border-radius: 20px;
  background: #fffaf1;
  cursor: pointer;
}
.format-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.format-card strong {
  font-family: "Cormorant Garamond", Palatino, serif;
  font-size: 24px;
  font-weight: 400;
}
.format-card span {
  color: #5c564c;
  font-size: 15px;
}
.format-card:has(input:checked) {
  border-color: #2d4a32;
  background: #f3efe4;
}
.format-card:has(input:focus-visible) {
  outline: 2px solid #2a5a3a;
  outline-offset: 3px;
}
.format-pick-create {
  margin: 0 0 20px;
}
body[data-format="og"] .create-samples,
body[data-format="cordially"] .create-samples { display: none; }

.onboard-ready {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.onboard-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.onboard-nav .btn {
  min-height: 44px;
  min-width: 88px;
}
.onboard-nav .btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}
.onboard-login {
  display: grid;
  place-items: center;
  width: fit-content;
  min-height: 44px;
  margin: 12px auto 0;
  padding: 8px 20px;
  border-radius: 999px;
  background: color-mix(in srgb, #fffdf8 78%, transparent);
  color: var(--ink);
  font-size: 0.88rem;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.onboard-login:hover { background: #fffaf1; }

body[data-view="dashboard"],
body[data-view="privacy"],
body[data-view="terms"],
body[data-view="changelog"] {
  background-color: var(--desk);
  background-image: none;
}
body[data-view="dashboard"] .top,
body[data-view="dashboard"] .guest-disc,
body[data-view="dashboard"] .skip { display: none !important; }

.view-dashboard {
  display: none;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  padding: 0;
  background: transparent;
  color: var(--ink);
  --dash-stack: var(--s6);
  --dash-hair: color-mix(in srgb, #ffffff 70%, transparent);
  --dash-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -8px 16px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --dash-glass:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  --dash-vellum: color-mix(in srgb, var(--paper) 42%, transparent);
  --dash-frost: color-mix(in srgb, #ffffff 20%, transparent);
  /* Shared liquid glass: wallpaper remains visible through every desk pane. */
  --dash-liquid-base:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  --dash-liquid-border: color-mix(in srgb, #ffffff 70%, transparent);
  --dash-liquid-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(100, 77, 48, 0.12),
    inset 10px 0 30px rgba(255, 255, 255, 0.22),
    0 22px 56px rgba(45, 34, 24, 0.18);
  --dash-blur: blur(22px) saturate(1.7);
  --dash-drop: 0 10px 28px rgba(16, 12, 10, 0.1);
  --desk-hover: 130ms;
  --desk-press: 90ms;
  --desk-enter: 280ms;
  --desk-exit: 210ms;
  --desk-pane: 420ms;
  --dash-pane-in: 240ms;
  --dash-pane-out: 180ms;
  --desk-row-enter: 350ms;
  --desk-row-exit: 262ms;
  --desk-stagger: 48ms;
  --desk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --desk-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}
body[data-view="dashboard"] .view-dashboard { display: block; }
#view-dashboard::before,
.view-legal::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--desk);
  background-image: url("../images/plate-desk.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
body[data-dash-pane="guests"] #view-dashboard::before,
body[data-dash-pane="emails"] #view-dashboard::before,
body[data-dash-pane="rsvp"] #view-dashboard::before {
  background-image:
    url("../images/plate-desk-blush.jpg"),
    url("../images/plate-desk.jpg");
}
body[data-dash-pane="settings"] #view-dashboard::before,
body[data-dash-pane="events"] #view-dashboard::before,
body[data-dash-pane="save"] #view-dashboard::before {
  background-image:
    url("../images/plate-desk-sage.jpg"),
    url("../images/plate-desk.jpg");
}
.dash-app {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: transparent;
}
.dash-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 12px;
  min-height: 0;
  /* Scroll + backdrop-filter paints frost only over inked content;
     empty flex gap above .dash-nav-foot then shows raw wallpaper. */
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  z-index: 12;
  border: 1px solid var(--dash-hair);
  background: transparent;
  box-shadow: var(--dash-inset), var(--dash-drop, 0 10px 28px rgba(16, 12, 10, 0.12));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dash-nav::before,
.ws-choice-pane[data-pane="intro"] .ws-choice-head::before,
.ws-choice-pane[data-pane="intro"] .ws-intro-option::before,
.ws-choice-pane[data-pane="intro"] .ws-intro-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--paper) 38%, transparent);
  background-image: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
/* Invitation surface picker shares the same material, declared separately so the
   intro/sidebar group above stays the single shared-material owner. */
.ws-invitation-surfaces::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--paper) 38%, transparent);
  background-image: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.dash-nav > *,
.ws-invitation-surfaces > *,
.ws-choice-pane[data-pane="intro"] .ws-choice-head > *,
.ws-choice-pane[data-pane="intro"] .ws-intro-option > *,
.ws-choice-pane[data-pane="intro"] .ws-intro-preview > * {
  position: relative;
  z-index: 1;
}
.dash-brand {
  display: grid;
  gap: 2px;
  padding: 8px 12px 20px;
  text-decoration: none;
  color: var(--ink);
}
.ws-invitation-surfaces {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--dash-hair);
  border-radius: 24px;
  padding: 18px 22px;
  margin-bottom: 24px;
  background: transparent;
}
.ws-surface-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ws-surface-options .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ws-surface-options .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dash-brand strong {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 500;
}
.dash-brand small {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-nav-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-nav-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  height: var(--nav-pill-h, 44px);
  border-radius: 999px;
  pointer-events: none;
  background: var(--dash-frost);
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  opacity: var(--nav-pill-on, 0);
  transform: translate3d(0, var(--nav-pill-y, 0px), 0);
  transition:
    transform var(--nav-pill-move, 0ms) var(--desk-ease-out),
    height var(--nav-pill-move, 0ms) var(--desk-ease-out),
    opacity 220ms var(--desk-ease-out);
}
/* Two products in one rail: Wedding invites and Digital gifts. Native
   <details>, so the disclosure needs no script and no focus trap. The label is
   the dropdown — there is no second button beside it, which is the whole point
   of "drop down boxes, but ideally minimum". */
/* Two products, two sub-navs.
   The rail holds Wedding invites and Digital gifts, and they are two places
   rather than one list with two labels. Each is its own bar: a hairline above
   it, its name in a glass header that answers to the pointer, and the rows
   beneath it. The pill is unchanged and list-wide on purpose — it belongs to
   whichever row is current, in either group, which is what makes the two bars
   read as one rail instead of two widgets. */
.dash-nav-group {
  display: block;
  /* The rule earns its keep; the padding around it must not. Sub-nav bars that
     cost 12px each pushed the third gift row past the rail's fold at 900px —
     Bouquets was still there, still 44px tall, just 49px below the edge with
     the list's "more below" fade over it. A hairline reads as a division at
     any spacing, so the spacing goes back to what it was. */
  margin: 8px 0 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}
/* The first bar needs no rule above it: the wordmark is already its edge. */
.dash-nav-group:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.dash-nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-nav-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 4px;
  padding: 4px 6px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition:
    background-color var(--dash-pane-in) var(--desk-ease-out),
    color var(--dash-pane-in) var(--desk-ease-out);
}
@media (hover: hover) {
  .dash-nav-kicker:hover {
    background: color-mix(in srgb, var(--paper) 52%, transparent);
    color: var(--ink);
  }
}
.dash-nav-kicker:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
  outline-offset: 2px;
}
/* The bar whose row is the current page says so quietly, so a collapsed group
   still shows where the viewer is. */
.dash-nav-group:has([aria-current="page"]) .dash-nav-kicker {
  color: var(--ink);
}
.dash-nav-group.is-collapsed:has([aria-current="page"]) .dash-nav-kicker {
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  box-shadow: inset 0 0 0 1px var(--dash-hair);
}
.dash-nav-kicker::-webkit-details-marker { display: none; }
.dash-nav-kicker::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  margin-right: 2px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.dash-nav-group.is-collapsed .dash-nav-kicker::after {
  transform: translateY(0) rotate(-45deg);
}
/* The <details> stays open; .is-collapsed slides the rows shut. max-height
   runs to the rows' measured height (--nav-items-h, set by studio.js) so the
   220ms is spent on real distance, not on an oversized ceiling. */
.dash-nav-group-items {
  max-height: var(--nav-items-h, 480px);
  overflow: hidden;
  opacity: 1;
  transition:
    max-height 220ms ease-out,
    opacity 220ms ease-out;
}
.dash-nav-group.is-collapsed .dash-nav-group-items {
  max-height: 0;
  opacity: 0;
}
.dash-nav-list a,
.dash-nav-foot a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.dash-nav-list a[aria-current="page"] {
  background: transparent;
  color: var(--ink);
}
.dash-nav-list em {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--seal) 28%, var(--paper));
  color: color-mix(in srgb, var(--ink) 72%, var(--seal));
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-nav i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}
.dash-nav i[data-ico="home"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 7.2 8 2l6 5.2V14H9.5V9.5h-3V14H2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 7.2 8 2l6 5.2V14H9.5V9.5h-3V14H2z'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="letter"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3 4.5h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm0 .8 5 3.2 5-3.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3 4.5h10a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm0 .8 5 3.2 5-3.2'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="web"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2 8h12M8 2c2 2.2 2 9.8 0 12M8 2C6 4.2 6 11.8 8 14' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M2 8h12M8 2c2 2.2 2 9.8 0 12M8 2C6 4.2 6 11.8 8 14' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="heart"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 13.5S2.5 9.6 2.5 6.2A2.8 2.8 0 0 1 8 4.6a2.8 2.8 0 0 1 5.5 1.6C13.5 9.6 8 13.5 8 13.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 13.5S2.5 9.6 2.5 6.2A2.8 2.8 0 0 1 8 4.6a2.8 2.8 0 0 1 5.5 1.6C13.5 9.6 8 13.5 8 13.5z'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="rsvp"],
.dash-nav i[data-ico="cal"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 2h1.5v1.5H4A1.5 1.5 0 0 0 2.5 5v8A1.5 1.5 0 0 0 4 14.5h8a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5h-1.5V2H9v1.5H7V2H4zm0 4.5h8V13H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 2h1.5v1.5H4A1.5 1.5 0 0 0 2.5 5v8A1.5 1.5 0 0 0 4 14.5h8a1.5 1.5 0 0 0 1.5-1.5V5A1.5 1.5 0 0 0 12 3.5h-1.5V2H9v1.5H7V2H4zm0 4.5h8V13H4z'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="people"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='5' r='2.2' fill='black'/%3E%3Ccircle cx='11' cy='6' r='1.8' fill='black'/%3E%3Cpath fill='black' d='M1.8 13c.3-2.4 2.2-3.6 4.2-3.6s3.9 1.2 4.2 3.6zm7.2-2.8c1.5.2 2.8 1.2 3.1 2.8H14c-.3-2-1.8-3.2-3.5-3.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6' cy='5' r='2.2' fill='black'/%3E%3Ccircle cx='11' cy='6' r='1.8' fill='black'/%3E%3Cpath fill='black' d='M1.8 13c.3-2.4 2.2-3.6 4.2-3.6s3.9 1.2 4.2 3.6zm7.2-2.8c1.5.2 2.8 1.2 3.1 2.8H14c-.3-2-1.8-3.2-3.5-3.4z'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="mail"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 4h12v8H2zm1.2 1 4.8 3.4L12.8 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M2 4h12v8H2zm1.2 1 4.8 3.4L12.8 5z'/%3E%3C/svg%3E"); }
.dash-nav i[data-ico="gear"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.4 1.5h3.2l.4 1.6 1.5.8 1.6-.4 1.6 2.7-1.2 1.2v1.6l1.2 1.2-1.6 2.7-1.6-.4-1.5.8-.4 1.6H6.4l-.4-1.6-1.5-.8-1.6.4L1.3 10l1.2-1.2V7.2L1.3 6l1.6-2.7 1.6.4 1.5-.8zM8 10.2A2.2 2.2 0 1 0 8 5.8a2.2 2.2 0 0 0 0 4.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.4 1.5h3.2l.4 1.6 1.5.8 1.6-.4 1.6 2.7-1.2 1.2v1.6l1.2 1.2-1.6 2.7-1.6-.4-1.5.8-.4 1.6H6.4l-.4-1.6-1.5-.8-1.6.4L1.3 10l1.2-1.2V7.2L1.3 6l1.6-2.7 1.6.4 1.5-.8zM8 10.2A2.2 2.2 0 1 0 8 5.8a2.2 2.2 0 0 0 0 4.4z'/%3E%3C/svg%3E"); }
/* ── the rail scrolls, and draws its own scrollbar ────────────────────────

   The wordmark stays pinned at the top and the footer links at the bottom; the
   list between them takes the free height and scrolls. Without this, a short
   viewport simply cut the rail off — "Terms & Conditions" sat below the rail's
   own bottom edge with no way to reach it, because .dash-nav is overflow:hidden
   (it has to be: scrolling plus backdrop-filter paints frost only over inked
   content, and the gap above the foot would show raw wallpaper).

   THE BAR IS DRAWN, NOT NATIVE. Both native routes were tried and measured
   first. On a Mac left at "Show scroll bars: When scrolling" — the default —
   Chromium and Safari give an OVERLAY bar: it reserves no width, every
   ::-webkit-scrollbar rule is ignored (a forced 10px red thumb painted
   nothing), and `scrollbar-color` only tints the platform's own shape. That is
   a stock bar in our colours, which is not what was asked for. So the native
   bar is hidden on both engines and studio.js draws one: a rounded vellum
   thumb in the rail's own hairline and inner highlight, in a 6px gutter,
   appearing on hover or while the list moves and fading ~800ms after it stops.
   It is draggable, like the bar it replaces. */
.dash-nav-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* The drawn thumb lives in this gutter instead of over the rows. */
  padding-right: 10px;
  margin-right: -4px;
  scrollbar-width: none;
}
.dash-nav-list::-webkit-scrollbar { width: 0; height: 0; }

/* A row that runs past the edge should read as "more below", not as clipped.
   studio.js sets which edges are live, so a list that fits wears no fade. */
.dash-nav-list[data-fade="top"] {
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}
.dash-nav-list[data-fade="bottom"] {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}
.dash-nav-list[data-fade="both"] {
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* The bar itself. Positioned by studio.js against the list's own box, so it
   needs no knowledge of the rail's padding or of the foot below it. */
.dash-rail-bar {
  position: absolute;
  width: 6px;
  border-radius: 999px;
  background: transparent;
  pointer-events: auto;
  opacity: 0;
  z-index: 3;
  transition: opacity 220ms var(--desk-ease-out);
}
.dash-rail-bar[data-on] { opacity: 1; }
.dash-rail-thumb {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 0 1px var(--dash-hair),
    0 2px 6px rgba(16, 12, 10, 0.10);
  transition: background-color 160ms var(--desk-ease-out);
}
.dash-rail-bar:hover .dash-rail-thumb,
.dash-rail-bar[data-drag] .dash-rail-thumb {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing fades in or out: once the list can scroll, its bar is simply
     there. */
  .dash-rail-bar { transition: none; }
  .dash-rail-thumb { transition: none; }
  .dash-nav-list[data-fade] ~ .dash-rail-bar,
  .dash-rail-bar { opacity: 1; }
}

/* The one other height-constrained list in the shell scrolls the same way.
   It has no drawn bar of its own — it is a short panel inside the page, not a
   full-height rail — so it keeps the thin native one, tinted to match. */
.dash-invitation-tracking {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 220ms var(--desk-ease-out);
}
.dash-invitation-tracking:hover { scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent; }
.dash-invitation-tracking::-webkit-scrollbar { width: 6px; }
.dash-invitation-tracking::-webkit-scrollbar-track { background: transparent; }
.dash-invitation-tracking::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
  transition: background-color 220ms var(--desk-ease-out);
}
.dash-invitation-tracking:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px var(--dash-hair);
}

.dash-nav-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}
/* The foot is secondary chrome and the list is the rail's job. Six pixels a
   row here is what lets all three Digital gifts rows sit above the fold at
   900px instead of the third one living under the "more below" fade. Still a
   40px target, and the list's own rows keep their 44. */
.dash-nav-foot a { min-height: 38px; }
.dash-nav-foot a { color: var(--muted); font-size: 0.88rem; }
.dash-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: transparent;
}
.dash-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 16px;
}
.dash-top > :is(.dash-search, .dash-unlock, .dash-round) {
  align-self: center;
  margin: 0;
}
@media (max-width: 719px) {
  .dash-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    align-items: center;
  }
  #dashMenu { grid-column: 1; grid-row: 1; }
  .dash-unlock {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #dashMsg { grid-column: 3; grid-row: 1; }
  #dashAvatar { grid-column: 4; grid-row: 1; }
  .dash-search {
    grid-column: 1 / -1;
    grid-row: 2;
    flex: none;
    order: 0;
  }
}
/* Desk search is a 44px glass pill. The icon is a real 16px sibling;
   the field is shrink-wrapped 14px type. WebKit type=search + a
   background-image icon sits the placeholder high — do not put the
   magnifier on the input. */
:is(.dash-search, .ws-search, .create-search) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
}
.create-search {
  margin: 0 0 var(--s4);
}
.dash-search {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--dash-hair);
  background: var(--dash-glass);
  box-shadow: var(--dash-inset), 0 10px 28px rgba(16, 12, 10, 0.08);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.desk-search-ico {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 0 0 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.2' fill='none' stroke='%234a5344' stroke-width='1.5'/%3E%3Cpath d='M10 10l4 4' stroke='%234a5344' stroke-width='1.5'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
  pointer-events: none;
}
:is(.dash-search, .ws-search, .create-search) input[type="search"] {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 18px 0 0;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  appearance: none;
  -webkit-appearance: none;
}
:is(.dash-search, .ws-search, .create-search) input[type="search"]::placeholder {
  color: var(--muted);
  line-height: 1.15;
  opacity: 1;
}
:is(.dash-search, .ws-search, .create-search) input[type="search"]::-webkit-search-decoration,
:is(.dash-search, .ws-search, .create-search) input[type="search"]::-webkit-search-cancel-button,
:is(.dash-search, .ws-search, .create-search) input[type="search"]::-webkit-search-results-button,
:is(.dash-search, .ws-search, .create-search) input[type="search"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
  display: none;
}
#view-dashboard :is(.dash-search, .ws-search) {
  display: flex;
  align-items: center;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  margin: 0;
  overflow: hidden;
}
#view-dashboard :is(
  .ws-filters > .btn,
  .ws-filter-more-inner .btn,
  .ws-head .dash-actions .btn,
  .ws-head > .btn,
  .ws-house-head .dash-actions .btn,
  .ws-house-head .dash-actions .ws-quiet,
  .ed-bar-actions .btn
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-block: 0;
  line-height: 1;
  align-self: center;
}
#view-dashboard :is(.ws-filters, .ws-house-head, .ws-person-tools) .desk-select-trigger {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}
.dash-unlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--seal) 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--seal) 38%, transparent), color-mix(in srgb, var(--ink) 42%, transparent));
  color: var(--sheet);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--seal) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--seal) 28%, transparent),
    0 8px 24px color-mix(in srgb, var(--seal) 22%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.dash-round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  cursor: pointer;
  flex: 0 0 44px;
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
#dashMenu span,
#dashMenu span::before,
#dashMenu span::after {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
}
#dashMenu span::before,
#dashMenu span::after {
  content: "";
  position: absolute;
  left: 0;
}
#dashMenu span::before { top: -5px; }
#dashMenu span::after { top: 5px; }
.dash-main {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--dash-stack);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 8px 20px 28px;
}
body[data-dash-pane="letter"] .dash-main,
body[data-dash-pane="website"] .dash-main,
body[data-dash-pane="rsvp"] .dash-main,
body[data-dash-pane="preview"] .dash-main,
body[data-dash-pane="gifts"] .dash-main,
body[data-dash-pane="giftsMine"] .dash-main,
body[data-dash-pane="giftsBouquets"] .dash-main {
  padding: 0 16px 12px 16px;
  overflow: hidden;
}
/* ── Digital gifts ────────────────────────────────────────────────────────
   The mother container. Everything to the right of the rail lives in one
   frame, and the Flowers compose desk is what is in it — the same app, served
   through this origin by the /compose proxy, not a second web app. The
   container carries the desk's glass edge so the two read as one surface;
   the desk inside lets this plate through instead of laying its own ground
   over it (gift-compose/src/styles/sequence-desk.css, `[data-embedded]`). */
.dash-gifts {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.ws-gift-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: transparent;
  box-shadow: var(--dash-inset);
}
/* While the composer's payment overlay is open the frame takes the whole
   viewport, so the overlay covers the page rather than the composer's box.
   studio.js toggles it on the composer's flowers-compose-fullscreen message. */
.ws-gift-stage.is-frame-full {
  position: fixed;
  inset: 0;
  z-index: 2147480000;
  width: 100vw;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html.ws-gift-full,
html.ws-gift-full body {
  overflow: hidden;
}
.ws-gift-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: normal;
}
.dash-pane {
  display: grid;
  gap: var(--dash-stack);
  align-content: start;
}
.dash-setup,
.dash-hero,
.dash-card,
.dash-empty-card {
  background: var(--dash-vellum);
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  box-shadow: var(--dash-inset), 0 18px 48px rgba(16, 12, 10, 0.1);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}
.dash-pane.dash-sheet {
  /* Frost lives on ::before so tall Settings content stays under glass. */
  background: transparent;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  box-shadow: var(--dash-inset), 0 18px 48px rgba(16, 12, 10, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dash-setup {
  padding: 28px 24px 24px;
}
.dash-setup-kicker {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-setup h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}
.dash-setup-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.dash-hero {
  display: grid;
  gap: var(--dash-stack);
  padding: 16px;
  /* Visible overflow + a px floor: short definite-height home panes used
     to crush this row to ~40px (photo height:auto + stretch circularly
     collapsed). aspect-ratio sizes the plate from width, not parent height. */
  overflow: visible;
  min-height: max(280px, min-content);
  flex-shrink: 0;
}
.dash-hero-photo {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  object-fit: cover;
  object-position: center 58%;
  border-radius: calc(var(--radius) - 6px);
  background: var(--dash-frost);
  overflow: hidden;
  align-self: start;
}
.dash-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 8px 8px 4px;
  min-width: 0;
}
.dash-hero-copy h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 36px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dash-meta { color: var(--muted); }
.dash-facts,
.dash-counts { display: grid; gap: 10px; }
.dash-facts p,
.dash-counts p {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 28%, transparent);
}
.dash-facts span,
.dash-counts span,
.dash-template-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-facts strong,
.dash-counts strong {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
}
.dash-grid { display: grid; gap: var(--dash-stack); }
.dash-card { display: grid; gap: 10px; padding: 20px; align-content: start; }
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dash-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
}
.dash-go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}
.dash-path-url {
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.95rem;
  word-break: break-all;
}
.dash-text-btn {
  justify-self: start;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dash-list,
.dash-event-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.dash-list li,
.dash-event-preview li {
  padding: 12px 0;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.dash-event-preview li:last-child { border-bottom: 0; }
.dash-invitation-tracking { max-height: 320px; overflow-y: auto; }
.dash-invitation-tracking li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.dash-invitation-tracking strong { overflow-wrap: anywhere; min-width: 0; }
.dash-invitation-tracking span { color: var(--forest); }
.dash-primary {
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 16%, var(--paper));
  color: var(--forest);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
@media (min-width: 960px) {
  .dash-app {
    --dash-nav-track: 248px;
    --dash-nav-gap: 20px;
    grid-template-columns: var(--dash-nav-track) 1fr;
    column-gap: var(--dash-nav-gap);
  }
  .dash-nav {
    height: calc(100dvh - 24px);
    min-height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    position: sticky;
    top: 12px;
    margin: 12px 0 12px 12px;
    border-radius: var(--radius);
    overflow: hidden;
    opacity: 1;
  }
  /* The rail closes on a desk, not only on a phone. Its column is a token so
     the whole shell can travel to zero and the stage — the mother container
     that holds whatever is being customised — takes the width back. Owner,
     2026-09-22: "when we close the nav bar it shows full screen."
     grid-template-columns and column-gap are both animatable lengths here, so
     the travel is one CSS transition on --dash-pane-in / --dash-pane-out and
     JS only flips the class. */
  .dash-app {
    transition:
      grid-template-columns var(--dash-pane-in) var(--desk-ease-out),
      column-gap var(--dash-pane-in) var(--desk-ease-out);
  }
  .dash-nav {
    transition:
      opacity var(--dash-pane-in) var(--desk-ease-out),
      transform var(--dash-pane-in) var(--desk-ease-out),
      margin var(--dash-pane-in) var(--desk-ease-out);
  }
  body.dash-nav-collapsed .dash-app {
    --dash-nav-track: 0px;
    --dash-nav-gap: 0px;
    transition:
      grid-template-columns var(--dash-pane-out) var(--desk-ease-in),
      column-gap var(--dash-pane-out) var(--desk-ease-in);
  }
  /* The column is already closing, so the rail only has to get out of its own
     way; a width on it would fight the track. It keeps its place in the flow
     until the travel ends, then stops being focusable — inert during the
     travel would drop a focus that is still visible. */
  body.dash-nav-collapsed .dash-nav {
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    transform: translateX(-16px);
    pointer-events: none;
    transition:
      opacity var(--dash-pane-out) var(--desk-ease-in),
      transform var(--dash-pane-out) var(--desk-ease-in),
      margin var(--dash-pane-out) var(--desk-ease-in);
  }
  /* The one control. It is the rail's own button on a desk and the drawer's on
     a phone, which is the least chrome that can do both. */
  /* The hamburger is the phone drawer's control and stays with the phone.
     On a desk the rail is opened and closed by its own edge; see .dash-rail-tab. */
  #dashMenu { display: none; }
  .dash-hero { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .dash-hero-photo {
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 280px;
    align-self: start;
  }
  .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-counts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 959px) {
  .dash-editor .ed-split-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(250px, 0.9fr) minmax(300px, 1.1fr);
  }
  .dash-editor .ed-split-flow > .ed-panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .dash-editor .ed-split-flow > .ed-preview {
    min-width: 0;
    min-height: 300px;
  }
}
@media (max-width: 959px) {
  .dash-app { grid-template-columns: 1fr; }
  .dash-nav {
    position: fixed;
    inset: 12px auto 12px 12px;
    width: min(280px, 86vw);
    z-index: 8;
    border-radius: var(--radius);
    background: transparent;
    transform: translateX(-105%);
    opacity: 1;
    transition: transform var(--desk-enter) var(--desk-ease-out), opacity var(--desk-enter) var(--desk-ease-out);
    box-shadow: var(--dash-inset), 8px 0 32px rgba(16, 12, 10, 0.12);
  }
  .dash-nav::before {
    background-color: color-mix(in srgb, var(--paper) 42%, transparent);
  }
  body.dash-nav-open .dash-nav { transform: none; }
  body.dash-nav-exiting .dash-nav {
    transform: translateX(-105%);
    transition-duration: var(--desk-exit);
    transition-timing-function: var(--desk-ease-in);
  }
  .dash-nav-foot { display: flex; }
}
/* ── the rail's edge ──────────────────────────────────────────────────────
   Owner review: the round hamburger was a phone control sitting on a desk,
   and once the rail had gone it was the only hint the rail existed. This is a
   slim tab of the same glass as the rail, held on the stage's left side, so it
   travels with the column rather than being a fixed object the layout moves
   underneath. Closed, it stays on the screen edge — the way back is where the
   way out was.
   Phone keeps #dashMenu and the drawer; this is >=960px only, and it is
   declared beside the desktop rail rules it belongs to. */
.dash-rail-tab {
  display: none;
  position: absolute;
  /* Centred by top, not by translateY(-50%): the studio-wide
     `:is(a, button, …):hover { transform: none !important }` wiped that
     translate on hover and the tab dropped half its height under the cursor.
     Nothing on hover, focus or press may move it. */
  top: calc(50% - 38px);
  left: -13px;
  z-index: 13;
  width: 26px;
  height: 76px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--paper) 38%, transparent);
  background-image: var(--dash-glass);
  box-shadow: var(--dash-inset), var(--dash-drop);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  color: var(--ink);
  cursor: pointer;
  transform: none !important;
  transition:
    left var(--dash-pane-in) var(--desk-ease-out),
    box-shadow var(--desk-hover) var(--desk-ease-out);
}
/* The mark is a chevron drawn from two borders, so it turns rather than being
   swapped for a second icon. Open it points back at the rail: push it away. */
.dash-rail-tab-mark {
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.62;
  transform: rotate(45deg);
  transition: transform var(--dash-pane-in) var(--desk-ease-out), scale var(--desk-hover) var(--desk-ease-out), opacity var(--desk-hover) var(--desk-ease-out);
}
body.dash-nav-collapsed .dash-rail-tab {
  left: 4px;
  transition:
    left var(--dash-pane-out) var(--desk-ease-in),
    box-shadow var(--desk-hover) var(--desk-ease-out);
}
body.dash-nav-collapsed .dash-rail-tab-mark { transform: rotate(-135deg); }
/* The tab grows by its mark, not by itself.
   Scaling the BUTTON scaled its ::after with it, and the tooltip is a child of
   that transform: the word drifted and swelled across the tab's own edge on
   every hover. The button carries no transform at all, so the label beside it
   stays the size it was drawn and the tab never moves under the cursor. */
@media (hover: hover) {
  .dash-rail-tab:hover {
    box-shadow: var(--dash-inset), 0 10px 26px rgba(16, 12, 10, 0.16);
  }
  /* `scale`, not `transform`, so the chevron keeps its rotate() and does not
     turn into an L under the cursor. */
  .dash-rail-tab:hover .dash-rail-tab-mark { opacity: 1; scale: 1.12; }
}
.dash-rail-tab:active .dash-rail-tab-mark { scale: 0.9; }
.dash-rail-tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* The word, only when the hand or the keyboard is on it. One line of glass,
   never in the way of the rail it is sitting beside. */
.dash-rail-tab::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  /* Centred on the tab. Without this it hung from the top of the button box
     and read as if it had come loose from it. */
  top: 50%;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  box-shadow: var(--dash-inset);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  /* Above the stage's own chrome, and never behind the rail it sits beside. */
  z-index: 30;
  transform: translate(-4px, -50%);
  transition: opacity var(--desk-hover) var(--desk-ease-out), transform var(--desk-hover) var(--desk-ease-out);
}
@media (hover: hover) {
  .dash-rail-tab:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.dash-rail-tab:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) {
  .dash-rail-tab,
  .dash-rail-tab-mark,
  .dash-rail-tab::after { transition: none; }
  .dash-rail-tab:hover .dash-rail-tab-mark,
  .dash-rail-tab:active .dash-rail-tab-mark { scale: none; }
  .dash-rail-tab:hover::after,
  .dash-rail-tab:focus-visible::after { transform: translate(0, -50%); }
}
/* Declared after the base rule above, not back in the desktop rail block:
   same specificity, and the later one is the one that counts. */
@media (min-width: 960px) {
  .dash-rail-tab { display: grid; }
}
@media (max-width: 959px) {
  .dash-rail-tab { display: none !important; }
}

/* ── the rail, alive ──────────────────────────────────────────────────────
   One timing story for the whole rail: the dashboard's own pane durations
   (--dash-pane-in / --dash-pane-out) and its own easings, transform and
   opacity only, exit about three quarters of enter. Nothing here animates a
   layout property, so a rail that is mid-travel never costs a reflow. */

/* A group opening deals its rows out rather than snapping them into place.
   The stagger is small on purpose: five rows at 26ms is 104ms of cascade
   inside a 240ms pane, so it reads as one movement with a grain, not as a
   list being counted. */
.dash-nav-group[open] .dash-nav-group-items > a {
  animation: dash-nav-row-in var(--dash-pane-in) var(--desk-ease-out) both;
}
.dash-nav-group[open] .dash-nav-group-items > a:nth-child(1) { animation-delay: 0ms; }
.dash-nav-group[open] .dash-nav-group-items > a:nth-child(2) { animation-delay: 26ms; }
.dash-nav-group[open] .dash-nav-group-items > a:nth-child(3) { animation-delay: 52ms; }
.dash-nav-group[open] .dash-nav-group-items > a:nth-child(4) { animation-delay: 78ms; }
.dash-nav-group[open] .dash-nav-group-items > a:nth-child(5) { animation-delay: 104ms; }
@keyframes dash-nav-row-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Closing is the same movement backwards and faster, and it has to finish
   before the rows leave the box — <details> removes them the instant `open`
   flips, so studio.js holds the flip until this has run. The last row leaves
   first, so the group folds up towards its own label. */
.dash-nav-group.is-closing .dash-nav-group-items > a {
  animation: dash-nav-row-out var(--dash-pane-out) var(--desk-ease-in) both;
}
.dash-nav-group.is-closing .dash-nav-group-items > a:nth-last-child(1) { animation-delay: 0ms; }
.dash-nav-group.is-closing .dash-nav-group-items > a:nth-last-child(2) { animation-delay: 18ms; }
.dash-nav-group.is-closing .dash-nav-group-items > a:nth-last-child(3) { animation-delay: 36ms; }
.dash-nav-group.is-closing .dash-nav-group-items > a:nth-last-child(4) { animation-delay: 54ms; }
.dash-nav-group.is-closing .dash-nav-group-items > a:nth-last-child(5) { animation-delay: 72ms; }
@keyframes dash-nav-row-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px); }
}

/* The caret is the one thing that moves in both directions under its own
   power, so it carries the state while the rows are still arriving. */
.dash-nav-kicker::after {
  transition: transform 220ms ease-out, opacity var(--desk-hover) var(--desk-ease-out);
  opacity: 0.55;
}
@media (hover: hover) {
  .dash-nav-kicker:hover::after { opacity: 1; }
  .dash-nav-kicker:hover { color: var(--ink); }
}
.dash-nav-kicker { transition: color var(--desk-hover) var(--desk-ease-out); }
.dash-nav-kicker:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }

/* A row answers the hand before it answers the router: a small travel on
   hover, a settle under the press, and a ring the keyboard can see. The
   travelling pill behind them keeps saying which one is live. */
.dash-nav-list a,
.dash-nav-foot a {
  transition: transform var(--desk-hover) var(--desk-ease-out), color var(--desk-hover) var(--desk-ease-out);
}
@media (hover: hover) {
  .dash-nav-list a:hover,
  .dash-nav-foot a:hover { transform: translateX(2px); }
  .dash-nav-list a:hover i { opacity: 0.85; }
}
.dash-nav-list a:active,
.dash-nav-foot a:active { transform: scale(0.985); }
.dash-nav-list a:focus-visible,
.dash-nav-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dash-nav-list a i { transition: opacity var(--desk-hover) var(--desk-ease-out); }

/* The world changes: the wordmark crossfades in place rather than swapping,
   and the banner's motif is asked to arrive again. Both are stacked in one
   grid cell so neither reflows the other on the way through. */
/* ── the account door, in the Digital gifts world ────────────────────────

   A sender who arrives here from the desk should meet the same room they
   left: the wedding studio's account page is a landing panel with a wide
   editorial pitch beside a cream card, and dropped into the dashboard it read
   as a different product. On the gifts side it becomes what the shelves are —
   a glass panel on the host's plate, with the page's own head above it.

   Scoped to body[data-dash-world="gifts"], which is the same one definition
   the rail, the banner and the door's copy already read, so every wedding host
   keeps the panel it has always had. No new images: the bouquet ornament is
   the one the door already swapped to.

   The primary action is the wedding's purchase pill, the same beige as
   "Unlock & send" and the desk's Sign in — because on this side of the house
   that is what a primary action looks like. Email keeps its place underneath,
   quieter, behind a hairline that says what it is. */
body[data-dash-world="gifts"] .dashboard-account .auth-panel,
body[data-dash-world="gifts"] #view-account .auth-panel {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 560px);
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background-color: color-mix(in srgb, var(--paper) 46%, transparent);
  background-image:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  box-shadow: var(--dash-inset), 0 18px 44px rgba(16, 12, 10, 0.10);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
/* The editorial pitch belongs to the landing page, not to a panel inside the
   dashboard: the head above already says where the sender is. */
body[data-dash-world="gifts"] .auth-copy { display: none; }
body[data-dash-world="gifts"] .auth-card {
  background: transparent;
  border-left: 0;
  gap: 14px;
  padding: clamp(22px, 3vw, 34px);
}
body[data-dash-world="gifts"] .auth-account-intro h2 {
  font-family: var(--serif);
  font-weight: 500;
}
body[data-dash-world="gifts"] .auth-consent {
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--dash-hair);
  border-bottom: 1px solid var(--dash-hair);
  border-radius: 0;
  background: transparent;
}
/* Continue with Google, in the primary beige. */
body[data-dash-world="gifts"] .auth-google {
  justify-content: center;
  min-height: 52px;
  border: 1px solid #1f3423;
  border-bottom: 4px solid #1f3423;
  border-radius: 999px;
  background: #2d4a32;
  box-shadow: 0 3px 0 #1f3423;
  color: #F8F4EC;
  -webkit-text-fill-color: #F8F4EC;
  font-weight: 750;
}
body[data-dash-world="gifts"] .auth-google:not(:disabled):hover {
  background: #2d4a32;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 #1f3423;
}
body[data-dash-world="gifts"] .auth-google:not(:disabled):active {
  transform: translateY(1px) scale(0.98);
  border-bottom-width: 4px;
}
body[data-dash-world="gifts"] .auth-google:focus-visible {
  outline: 2px solid #2d4a32;
  outline-offset: 5px;
}
/* Email is the quieter second way in. */
.auth-email-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Clear of the pill's glow, which sits 5px outside its border. */
  margin: 12px 0 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.auth-email-divider::before,
.auth-email-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--dash-hair);
}
body[data-dash-world="gifts"] .auth-email input {
  border-radius: 12px;
}
body[data-dash-world="gifts"] #authEmailSignIn {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  color: var(--ink);
  font-weight: 650;
}
@media (prefers-reduced-motion: reduce) {
  body[data-dash-world="gifts"] .auth-google:hover,
  body[data-dash-world="gifts"] .auth-google:active { transform: none; }
}

/* One world, wherever it is named.

   The rail's wordmark crossfades between its two worlds inside one grid cell
   (the rule below). The account door is a shared PAGE rather than one swapping
   element, so its pairs simply stand down: whichever world the sender arrived
   from is the only one in the document. Same attribute, one definition —
   body[data-dash-world], set by wedding/app/layout.tsx on first paint and kept
   by studio.js accountWorld(). */
/* A wrapper that groups a heading with its line must not become a box: it
   carries the world, nothing else, so it hands its children straight to the
   parent's layout. */
.auth-world--wrap { display: contents; }

body:not([data-dash-world="gifts"]) .auth-world[data-world="gifts"],
body[data-dash-world="gifts"] .auth-world[data-world="wedding"] {
  display: none !important;
}

/* The ornament belongs to the world too: a letter for the wedding studio, a
   bouquet for Digital gifts. Both already ship in /art/studio. */
body[data-dash-world="gifts"] .auth-brand::after {
  background-image: url('../images/bouquet.svg');
}

.dash-brand-copy[data-world] {
  grid-area: 1 / 1;
  transition:
    opacity var(--dash-pane-in) var(--desk-ease-out),
    transform var(--dash-pane-in) var(--desk-ease-out),
    visibility 0s linear var(--dash-pane-in);
}
body:not([data-dash-world="gifts"]) .dash-brand-copy[data-world="gifts"],
body[data-dash-world="gifts"] .dash-brand-copy[data-world="wedding"] {
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
}
body:not([data-dash-world="gifts"]) .dash-brand-copy[data-world="wedding"],
body[data-dash-world="gifts"] .dash-brand-copy[data-world="gifts"] {
  opacity: 1;
  transform: none;
}
.dash-greet.is-greet-swap .dash-greet-art {
  animation: fw-greet-motif-in 430ms var(--desk-ease-out);
}

/* Reduced motion, and a deliberate exception to the blanket rule.
     `* { transition: none !important; animation: none !important }` (around
     line 4304) stays this app's default, and it is the right answer for a page
     of decoration. It is the wrong answer for a control whose whole job is to
     say that something changed — a rail folding away, a wordmark becoming a
     different word. A zero-frame swap there is not calm; it is a change the
     reader has to notice after the fact.
     These few elements keep a short crossfade, and only these. No travel, no
     stagger, no scale: nothing moves in space, and 140ms is under the
     threshold where motion reads as motion. The `!important` here answers the
     blanket rule's own `!important`; it is not arguing with anything else. */
@media (prefers-reduced-motion: reduce) {
  .dash-nav-group[open] .dash-nav-group-items > a {
    animation: dash-nav-row-fade 140ms linear both !important;
  }
  .dash-nav-group.is-closing .dash-nav-group-items > a {
    animation: dash-nav-row-fade-out 120ms linear both !important;
  }
  .dash-brand-copy[data-world] {
    transition: opacity 140ms linear !important;
    transform: none !important;
  }
  .dash-rail-tab,
  .dash-rail-tab-mark,
  .dash-rail-tab::after { transition: opacity 140ms linear !important; }
  /* The rail groups snap shut and open; the chevron turns without travel. */
  .dash-nav-group-items,
  .dash-nav-kicker::after { transition: none !important; }
  .dash-greet.is-greet-swap .dash-greet-art {
    animation: dash-nav-row-fade 140ms linear !important;
  }
  /* Hover and press keep their meaning through colour alone. */
  .dash-nav-list a:hover,
  .dash-nav-foot a:hover,
  .dash-nav-list a:active,
  .dash-nav-foot a:active { transform: none; }
}
@keyframes dash-nav-row-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes dash-nav-row-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dash-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 7;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity var(--desk-enter) var(--desk-ease-out);
}
.dash-nav-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
.dash-nav-scrim.is-exiting {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--desk-exit);
  transition-timing-function: var(--desk-ease-in);
}
.dash-nav-scrim[hidden] { display: none !important; }
@media (min-width: 960px) {
  .dash-nav-scrim { display: none !important; }
}
.dash-pane[hidden],
.dash-sheet[hidden],
#dashProject[hidden],
#dashEmpty[hidden] { display: none !important; }
.dash-pane.is-parked {
  position: fixed !important;
  left: -120vw;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  content-visibility: hidden;
  contain: strict;
  z-index: -1;
}
.dash-pane.is-parked iframe,
#view-dashboard .dash-pane.is-out iframe,
#view-dashboard iframe.is-frame-frozen {
  content-visibility: hidden;
  visibility: hidden;
}
.dash-sheet {
  position: relative;
  display: grid;
  gap: var(--dash-stack);
  padding: var(--s6) var(--s5);
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: transparent;
  box-shadow: var(--dash-inset), var(--dash-drop, 0 22px 56px rgba(16, 12, 10, 0.12));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dash-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--paper) 42%, transparent);
  background-image: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.dash-sheet > * {
  position: relative;
  z-index: 1;
}
.dash-sheet h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
}
.dash-lead,
.dash-meta {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
}
.dash-new,
.dash-path {
  display: grid;
  gap: var(--s4);
}
.dash-new label,
.dash-template-kicker {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
#view-dashboard .dash-new input:not([type="file"]):not([type="hidden"]),
#view-dashboard .dash-new textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
/* Desk selects — Guest-access forest pill frame everywhere */
select.desk-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.desk-select {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px !important;
  border: 3px solid var(--forest) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.desk-select.is-inline {
  width: auto;
  min-width: 9.5rem;
}
.desk-select-trigger {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0 40px 0 16px !important;
  line-height: 1;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none'><path d='M6 2.25 L6 13.75 M3 5.25 L6 2.25 L9 5.25 M3 10.75 L6 13.75 L9 10.75' stroke='%231c2618' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 16px !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  cursor: pointer;
}
.desk-select-trigger .desk-select-value {
  display: block;
  padding-right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-select-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--forest) 45%, transparent);
  outline-offset: 2px;
}
.desk-select-menu {
  position: fixed;
  z-index: 12000;
  top: auto;
  left: 0;
  right: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 3px solid var(--forest) !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 16%, transparent);
  overflow-x: hidden;
  overflow-y: auto;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Ported to body so .ed-panel overflow/backdrop-filter cannot clip or re-root fixed. */
.desk-select-menu.is-ported {
  position: fixed !important;
  z-index: 12000 !important;
}
.desk-select-menu [role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  cursor: pointer;
}
.desk-select-menu [role="option"]::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.desk-select-menu [role="option"].is-selected::before {
  content: "✓";
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--forest);
}
.desk-select-menu [role="option"]:hover,
.desk-select-menu [role="option"]:focus-visible {
  background: color-mix(in srgb, var(--forest) 10%, #ffffff);
}
.desk-select.is-animated-select {
  transition:
    transform var(--desk-hover) var(--desk-ease-out),
    box-shadow var(--desk-hover) var(--desk-ease-out);
}
.desk-select.is-animated-select.is-open {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px color-mix(in srgb, var(--forest) 18%, transparent) !important;
}
.desk-select.is-animated-select .desk-select-trigger {
  transition:
    transform var(--desk-hover) var(--desk-ease-out),
    background-color var(--desk-hover) linear;
}
.desk-select.is-animated-select.is-open .desk-select-trigger {
  transform: scale(1.012);
}
.desk-select.is-animated-select .desk-select-trigger:active {
  transform: scale(0.972);
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu) {
  --desk-menu-y: 10px;
  --desk-menu-exit-y: 6px;
  display: grid;
  gap: 5px;
  padding: 8px;
  border-width: 2px !important;
  border-radius: 20px !important;
  background: #fffaf0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 42px color-mix(in srgb, var(--ink) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--desk-menu-y), 0) scale(0.97);
  transform-origin: top center;
  transition:
    opacity var(--desk-enter) var(--desk-ease-out),
    transform var(--desk-enter) var(--desk-ease-out);
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu)[data-placement="above"] {
  --desk-menu-y: -10px;
  --desk-menu-exit-y: -6px;
  transform-origin: bottom center;
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu).is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu).is-exiting {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--desk-menu-exit-y), 0) scale(0.982);
  transition-duration: var(--desk-exit);
  transition-timing-function: var(--desk-ease-in);
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu) [role="option"] {
  opacity: 0;
  transform: translate3d(0, 7px, 0) scale(0.985);
  transition:
    opacity 190ms var(--desk-ease-out),
    transform 240ms var(--desk-ease-out),
    border-color 140ms ease,
    background-color 140ms ease;
  transition-delay: calc(var(--desk-option-i, 0) * 24ms);
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu).is-open [role="option"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu).is-choosing [role="option"] {
  opacity: 0.4;
  transform: scale(0.975);
  transition-delay: 0ms;
}
.desk-select-menu.is-animated-select-menu:not(.is-visual-intro-menu).is-choosing [role="option"].is-confirming {
  opacity: 1;
  transform: scale(1.025);
  background: color-mix(in srgb, var(--forest) 12%, #fffaf0);
}
.desk-select.is-status-select {
  width: fit-content;
  min-width: 11rem;
  max-width: 100%;
  border-width: 2px !important;
  background: color-mix(in srgb, #fffaf0 86%, transparent) !important;
}
.desk-select.is-status-select .desk-select-trigger {
  position: relative;
  min-height: 42px;
  height: 42px;
  max-height: 42px;
  padding: 0 38px 0 38px !important;
  background-image: none !important;
  font-size: 0.86rem;
  font-weight: 650;
}
.desk-select.is-status-select .desk-select-trigger::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 72%, #ffffff);
  transform: translateY(-50%);
  transition: transform 180ms var(--desk-ease-out), background-color 180ms linear;
}
.desk-select.is-status-select .desk-select-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-68%) rotate(45deg);
  transition: transform 240ms var(--desk-ease-out);
}
.desk-select.is-status-select.is-open .desk-select-trigger::after {
  transform: translateY(-28%) rotate(225deg);
}
.desk-select.is-status-select[data-select-value="yes"] .desk-select-trigger::before,
.desk-select.is-status-select[data-select-value="delivered"] .desk-select-trigger::before {
  border-color: var(--forest);
  background: var(--forest);
}
.desk-select.is-status-select[data-select-value="no"] .desk-select-trigger::before,
.desk-select.is-status-select[data-select-value="bounced"] .desk-select-trigger::before {
  border-color: var(--env);
  background: var(--env);
}
.desk-select-menu.is-status-select-menu [role="option"] {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
}
.desk-select-menu.is-status-select-menu [role="option"]::before {
  display: none;
  content: none;
}
.desk-status-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 76%, #ffffff);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}
.desk-status-mark::after { content: "·"; }
[role="option"][data-value="yes"] .desk-status-mark::after,
[role="option"][data-value="delivered"] .desk-status-mark::after { content: "✓"; }
[role="option"][data-value="no"] .desk-status-mark::after,
[role="option"][data-value="bounced"] .desk-status-mark::after { content: "×"; }
[role="option"][data-value="yes"] .desk-status-mark,
[role="option"][data-value="delivered"] .desk-status-mark {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--paper);
}
[role="option"][data-value="no"] .desk-status-mark,
[role="option"][data-value="bounced"] .desk-status-mark {
  border-color: var(--env);
  background: var(--env);
  color: #ffffff;
}
.desk-status-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.desk-status-copy strong {
  font-size: 0.92rem;
  line-height: 1.15;
}
.desk-status-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-select-menu.is-status-select-menu [role="option"].is-selected {
  border-color: color-mix(in srgb, var(--forest) 48%, transparent);
  background: color-mix(in srgb, var(--forest) 9%, #fffaf0);
}
.ws-rsvp-sync-toast {
  position: fixed;
  z-index: 14000;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  width: min(390px, calc(100vw - 28px));
  min-height: 78px;
  box-sizing: border-box;
  padding: 12px 12px 12px 14px;
  border: 2px solid color-mix(in srgb, var(--forest) 78%, #fffaf0);
  border-radius: 22px;
  background: #fffaf0;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 46px color-mix(in srgb, var(--ink) 22%, transparent);
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.975);
  transition:
    opacity 260ms var(--desk-ease-out),
    transform 320ms var(--desk-ease-out);
}
.ws-rsvp-sync-toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.ws-rsvp-sync-toast.is-leaving {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.985);
  transition-duration: 200ms;
  transition-timing-function: var(--desk-ease-in);
}
.ws-rsvp-sync-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--forest) 10%, #fffaf0);
  color: var(--forest);
  font: 700 1rem/1 var(--sans);
}
.ws-rsvp-sync-toast.has-new-response .ws-rsvp-sync-mark {
  background: var(--forest);
  color: var(--paper);
}
.ws-rsvp-sync-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ws-rsvp-sync-copy strong {
  overflow: hidden;
  font: 650 0.92rem/1.2 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-rsvp-sync-copy small {
  color: var(--muted);
  font: 500 0.74rem/1.3 var(--sans);
}
.ws-rsvp-sync-toast > button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--forest) 18%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 1.2rem/1 var(--sans);
  cursor: pointer;
  transition: transform var(--desk-press) var(--desk-ease-out), background-color var(--desk-hover) linear;
}
.ws-rsvp-sync-toast > button:hover,
.ws-rsvp-sync-toast > button:focus-visible {
  background: color-mix(in srgb, var(--forest) 9%, #fffaf0);
}
.ws-rsvp-sync-toast > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--forest) 52%, transparent);
  outline-offset: 2px;
}
.ws-rsvp-sync-toast > button:active { transform: scale(0.94); }
@media (max-width: 560px) {
  .ws-rsvp-sync-toast {
    right: 14px;
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px));
    width: calc(100vw - 28px);
  }
}
.desk-select.is-visual-intro {
  border-width: 2px !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--forest) 11%, transparent) !important;
  transition: transform var(--desk-hover) var(--desk-ease-out);
}
.desk-select.is-visual-intro .desk-select-trigger {
  position: relative;
  padding-right: 46px !important;
  background-image: none !important;
  transition: transform var(--desk-hover) var(--desk-ease-out);
}
.desk-select.is-visual-intro .desk-select-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  opacity: 0.88;
  transform: translateY(-68%) rotate(45deg);
  transition:
    transform 240ms var(--desk-ease-out),
    opacity var(--desk-hover) linear;
}
.desk-select.is-visual-intro.is-open {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px color-mix(in srgb, var(--forest) 18%, transparent) !important;
}
.desk-select.is-visual-intro.is-open .desk-select-trigger {
  transform: scale(1.012);
  background-color: color-mix(in srgb, #ffffff 94%, var(--paper)) !important;
}
.desk-select.is-visual-intro.is-open .desk-select-trigger::after {
  opacity: 1;
  transform: translateY(-28%) rotate(225deg);
}
.desk-select.is-visual-intro .desk-select-trigger:active {
  transform: scale(0.972);
}
@keyframes intro-choice-arrive {
  from { opacity: 0.68; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes intro-poster-arrive {
  from { opacity: 0.46; transform: scale(0.88) rotate(-2deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes intro-summary-arrive {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.desk-select.is-visual-intro.is-choice-arrived {
  animation: intro-choice-arrive 360ms var(--desk-ease-out) both;
}
.ws-send-panel.is-intro-updated .ws-send-intro-poster {
  animation: intro-poster-arrive 420ms var(--desk-ease-out) both;
}
.ws-send-panel.is-intro-updated [data-ws-send-summary] {
  animation: intro-summary-arrive 400ms 60ms var(--desk-ease-out) both;
}
.desk-select-menu.is-visual-intro-menu {
  --intro-menu-y: 12px;
  --intro-menu-exit-y: 7px;
  --intro-option-exit-y: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-width: 2px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(150% 90% at 14% -20%, rgba(255, 255, 255, 0.72), transparent 58%),
    color-mix(in srgb, #fffaf0 94%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 20px 48px color-mix(in srgb, var(--ink) 20%, transparent);
  backdrop-filter: blur(24px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.35) !important;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--intro-menu-y), 0) scale(0.965);
  transform-origin: top center;
  transition:
    opacity var(--desk-enter) var(--desk-ease-out),
    transform var(--desk-enter) var(--desk-ease-out);
}
.desk-select-menu.is-visual-intro-menu[data-placement="above"] {
  --intro-menu-y: -12px;
  --intro-menu-exit-y: -7px;
  --intro-option-exit-y: -3px;
  transform-origin: bottom center;
}
.desk-select-menu.is-visual-intro-menu:not([hidden]) {
  display: grid;
}
.desk-select-menu.is-visual-intro-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}
.desk-select-menu.is-visual-intro-menu.is-exiting {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--intro-menu-exit-y), 0) scale(0.982);
  transition-duration: var(--desk-exit);
  transition-timing-function: var(--desk-ease-in);
}
.desk-select-menu.is-visual-intro-menu::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--forest) 32%, transparent);
  border-radius: 17px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition:
    opacity 150ms linear,
    transform 180ms var(--desk-ease-out);
}
.desk-select-menu.is-visual-intro-menu.is-choosing::after {
  opacity: 0.7;
  transform: scale(1);
}
.desk-select-menu.is-visual-intro-menu [role="option"] {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 70px;
  padding: 6px 9px 6px 6px;
  border: 1px solid color-mix(in srgb, var(--forest) 12%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 56%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translate3d(0, 9px, 0) scale(0.982);
  transition:
    opacity 210ms var(--desk-ease-out),
    transform 260ms var(--desk-ease-out),
    border-color 140ms ease,
    background-color 140ms ease;
  transition-delay: calc(var(--intro-option-i, 0) * 18ms);
}
.desk-select-menu.is-visual-intro-menu.is-open [role="option"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.desk-select-menu.is-visual-intro-menu.is-exiting [role="option"] {
  opacity: 0.72;
  transform: translate3d(0, var(--intro-option-exit-y), 0) scale(0.99);
  transition-delay: 0ms;
  transition-duration: var(--desk-exit);
  transition-timing-function: var(--desk-ease-in);
}
.desk-select-option-art {
  display: block;
  width: 48px;
  height: 58px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 48%, transparent);
}
.desk-select-option-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.055);
  transition: transform 320ms var(--desk-ease-out);
}
.desk-select-menu.is-visual-intro-menu.is-open .desk-select-option-art img {
  transform: scale(1);
}
.desk-select-option-copy {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.18;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.desk-select-menu.is-visual-intro-menu [role="option"]::before {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font-size: 0.64rem;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 160ms var(--desk-ease-out);
}
.desk-select-menu.is-visual-intro-menu [role="option"].is-selected {
  border-color: color-mix(in srgb, var(--forest) 72%, transparent);
  background: color-mix(in srgb, var(--forest) 10%, #fffaf0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--forest) 16%, transparent);
}
.desk-select-menu.is-visual-intro-menu [role="option"].is-selected::before {
  opacity: 1;
  transform: scale(1);
}
.desk-select-menu.is-visual-intro-menu.is-choosing [role="option"] {
  opacity: 0.42;
  transform: scale(0.972);
  transition-delay: 0ms;
}
.desk-select-menu.is-visual-intro-menu.is-choosing [role="option"].is-confirming {
  z-index: 2;
  opacity: 1;
  transform: scale(1.025);
  border-color: var(--forest);
  background: color-mix(in srgb, var(--forest) 15%, #fffaf0);
}
.desk-select-menu.is-visual-intro-menu [role="option"].is-confirming::before {
  opacity: 1;
  transform: scale(1.16);
}
.desk-select-menu.is-visual-intro-menu [role="option"].is-confirming .desk-select-option-art img {
  transform: scale(1.06);
}
.desk-select-menu.is-visual-intro-menu [role="option"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--forest) 52%, transparent);
  outline-offset: 2px;
}
@media (hover: hover) {
  .desk-select-menu.is-visual-intro-menu:not(.is-choosing) [role="option"]:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--forest) 32%, transparent);
    background: color-mix(in srgb, #ffffff 78%, transparent);
  }
}
.desk-select-menu.is-visual-intro-menu:not(.is-choosing) [role="option"]:active {
  transform: scale(0.965);
  transition-duration: var(--desk-press);
  transition-delay: 0ms;
}
@media (max-width: 390px) {
  .desk-select-menu.is-visual-intro-menu {
    gap: 6px;
    padding: 8px;
  }
  .desk-select-menu.is-visual-intro-menu [role="option"] {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px;
    min-height: 64px;
  }
  .desk-select-option-art {
    width: 42px;
    height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ws-rsvp-sync-toast,
  .ws-rsvp-sync-toast > button,
  .desk-select.is-animated-select,
  .desk-select.is-animated-select .desk-select-trigger,
  .desk-select-menu.is-animated-select-menu,
  .desk-select-menu.is-animated-select-menu [role="option"],
  .desk-select.is-visual-intro,
  .desk-select.is-visual-intro .desk-select-trigger,
  .desk-select.is-visual-intro .desk-select-trigger::after,
  .desk-select.is-visual-intro.is-choice-arrived,
  .desk-select-menu.is-visual-intro-menu,
  .desk-select-menu.is-visual-intro-menu [role="option"],
  .desk-select-menu.is-visual-intro-menu [role="option"]::before,
  .desk-select-menu.is-visual-intro-menu::after,
  .desk-select-option-art img,
  .ws-send-panel.is-intro-updated .ws-send-intro-poster,
  .ws-send-panel.is-intro-updated [data-ws-send-summary],
  .ws-general-send-flow.is-invitation-updated .ws-send-surface-step,
  .ws-general-send-flow.is-invitation-updated .ws-send-opt,
  .ws-general-send-flow.is-invitation-updated .ws-send-opt-check,
  .ws-general-send-flow.is-invitation-updated .ws-send-link-card {
    animation: none !important;
    transform: none !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}
.desk-select.is-compact .desk-select-trigger {
  min-height: 40px;
  font-size: 0.95rem;
}
/* Fallback before enhance — same forest frame on any desk select */
#view-dashboard select:not(.desk-select-native),
#view-create select,
.view-create select {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 40px 12px 16px;
  border: 3px solid var(--forest) !important;
  border-radius: 999px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none'><path d='M6 2.25 L6 13.75 M3 5.25 L6 2.25 L9 5.25 M3 10.75 L6 13.75 L9 10.75' stroke='%231c2618' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#view-dashboard .dash-new select:not(.desk-select-native),
#view-dashboard .ed-panel select:not(.desk-select-native),
#view-dashboard .ws-sec-body select:not(.desk-select-native),
#view-dashboard .dash-sheet select:not(.desk-select-native) {
  width: 100%;
}
body.dash-dark .desk-select {
  border-color: color-mix(in srgb, var(--forest) 70%, var(--paper)) !important;
}
body.dash-dark .desk-select-trigger,
body.dash-dark .desk-select-menu {
  background-color: color-mix(in srgb, #ffffff 12%, #1a2218) !important;
  color: var(--paper) !important;
}
body.dash-dark .desk-select-trigger {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none'><path d='M6 2.25 L6 13.75 M3 5.25 L6 2.25 L9 5.25 M3 10.75 L6 13.75 L9 10.75' stroke='%23f6efe6' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
body.dash-dark .desk-select-menu [role="option"]:hover {
  background: color-mix(in srgb, var(--paper) 12%, transparent);
}
.dash-new textarea { min-height: 88px; resize: vertical; }
.format-card.is-set {
  cursor: default;
  border-color: var(--forest);
  background: var(--dash-vellum);
}
.dash-path-url {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 28%, transparent);
  font-family: var(--sans);
  font-size: 0.95rem;
  word-break: break-all;
}
.dash-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.dash-actions .btn {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-block: 0;
  line-height: 1;
  text-decoration: none;
}
.ws-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.ws-share-actions .btn {
  width: 100%;
  letter-spacing: 0.06em;
}
.ws-share-actions .js-dash-copy {
  font-weight: 500;
}
.ws-rsvp-share {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-rsvp-share .dash-template-kicker {
  margin: 0;
}
.ws-rsvp-share .dash-path-url {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.2;
}
.ws-rsvp-share .note {
  margin: 0;
}
.ws-rsvp-share .ws-share-actions {
  margin-top: 6px;
}
.ws-rsvp-share > label {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-share-actions .js-dash-open {
  font-weight: 700;
}
.dash-back {
  margin: 0 0 var(--s3);
}
.dash-back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color var(--desk-hover) ease, transform var(--desk-hover) var(--desk-ease-out);
}
@media (max-width: 719px) {
  #view-dashboard::before,
  .view-legal::before {
    background-image: url("../images/plate-desk-phone.jpg");
  }

  .view-dashboard { padding: 0; }
  .dash-sheet { padding: 28px 18px 20px; }
}
@media (max-width: 719px) {
  dialog.onboard { width: min(100vw - 20px, 560px); }
  .onboard-sheet { padding: 28px 18px 20px; border-radius: 24px; }
}

.venue-pin {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.venue-pin iframe {
  width: 100%;
  height: 168px;
  border: 0.5px solid color-mix(in srgb, #1c3a28 20%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, #fffdf8 18%, transparent);
}
.venue-open {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, #fffdf8 14%, transparent);
  border: 1px solid color-mix(in srgb, #1c3a28 20%, transparent);
  color: #1c3a28;
  text-decoration: none;
  font-size: 0.88rem;
}
@media (hover: hover) {
  .venue-open:hover { background: color-mix(in srgb, #fffdf8 28%, transparent); }
}

body[data-view="privacy"] #view-privacy,
body[data-view="terms"] #view-terms,
body[data-view="changelog"] #view-changelog {
  display: block;
}
.view-legal {
  display: none;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: var(--top-clear) 20px 48px;
  background: transparent;
  color: var(--ink);
  --dash-hair: color-mix(in srgb, #ffffff 70%, transparent);
  --dash-inset:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -8px 16px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --dash-glass:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  --dash-vellum: color-mix(in srgb, var(--paper) 42%, transparent);
  --dash-frost: color-mix(in srgb, #ffffff 20%, transparent);
  --dash-blur: blur(22px) saturate(1.7);
}
.view-legal > * { position: relative; z-index: 1; }
.legal-card {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 32px 24px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: var(--dash-vellum);
  box-shadow: var(--dash-inset), 0 22px 56px rgba(16, 12, 10, 0.12);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
}
.legal-card h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
}
.legal-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }

.dash-stage { position: relative; }
.dash-pop {
  position: absolute;
  top: 72px;
  left: 72px;
  z-index: 9;
  width: min(360px, calc(100% - 32px));
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: var(--dash-frost);
  box-shadow: var(--dash-inset), 0 18px 40px rgba(16, 12, 10, 0.14);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--desk-enter) var(--desk-ease-out), transform var(--desk-enter) var(--desk-ease-out);
}
.dash-pop.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.dash-pop.is-exiting {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition-duration: var(--desk-exit);
  transition-timing-function: var(--desk-ease-in);
}
.dash-pop-right { left: auto; right: 16px; }
.dash-pop[hidden] { display: none !important; }
.dash-pop a,
.dash-pop p {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.dash-pop span { color: var(--muted); font-size: 0.88rem; }
.dash-ghost {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  cursor: pointer;
}
.dash-editor {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: var(--dash-stack);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}
.dash-editor:has(> .ws-invitation-surfaces) {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}
.dash-editor > .ws-invitation-surfaces {
  margin: 0;
  min-height: min-content;
}
.ed-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  overflow-x: auto;
}
@media (max-width: 719px) {
  .ed-bar {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .ed-bar-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  .dash-unlock { font-size: 0.78rem; padding: 0 10px; }
}
.ed-bar > .kicker {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
.ed-bar-actions,
.ed-devices {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 0 0 auto;
}
.ed-bar-actions { margin-left: auto; }
.ed-bar-actions .btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font: 650 0.82rem/1 DM Sans, system-ui, sans-serif;
  letter-spacing: 0.04em;
  transition: transform 70ms ease-out, box-shadow 70ms ease-out, border-bottom-width 70ms ease-out;
}
.ed-bar-actions .btn:not(.btn-solid) {
  border: 1px solid var(--dash-hair);
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  color: var(--ink);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ed-bar-actions .btn:not(.btn-solid):hover {
  transform: translateY(-1px);
}
.ed-bar-actions .btn:not(.btn-solid):active {
  transform: scale(0.96) translateY(1px);
}
.ed-bar-actions .btn:not(.btn-solid).is-armed {
  box-shadow: var(--dash-inset), 0 0 0 2px color-mix(in srgb, #8a5a2b 45%, transparent);
}
.ed-bar-actions .btn-solid {
  border: 0;
  border-bottom: 4px solid #1a5440;
  background: #24352a;
  color: #f7f1e4;
  box-shadow: 0 8px 18px color-mix(in srgb, #1a5440 28%, transparent);
}
.ed-bar-actions .btn-solid:hover {
  transform: translateY(-1px);
}
.ed-bar-actions .btn-solid:active {
  transform: translateY(4px);
  border-bottom-width: 0;
  box-shadow: none;
}
.ws-chips button,
.ws-group header button:not(.btn-solid):not(.ws-quiet),
.ws-event-list button,
.ws-sec-list button,
.ws-table-wrap button:not(.ws-stamp):not(.ws-quiet):not(.btn-solid) {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  color: var(--ink);
  font: inherit;
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-chips button.is-on,
.ws-event-list button.is-on {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}
.ed-split {
  display: grid;
  gap: var(--dash-stack);
  min-height: 70dvh;
}
.ed-split > .ed-canvas { order: -1; }
.ed-split-flow {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  align-items: stretch;
}
.ed-split-flow > .ed-canvas,
.ed-split-flow .ed-canvas { order: 0; }
.ed-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 70dvh;
}
.ed-tabs-ico {
  width: 100%;
  justify-self: stretch;
}
.ed-tabs-ico button {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  gap: 6px;
  padding: 0 8px;
  font-size: 0.78rem;
}
.ed-tabs-ico button svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  max-width: 16px;
}
.ed-tabs-ico button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-sec-kicker {
  margin: 8px 0 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
}
.ws-sec-help {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.ws-add-sec {
  justify-self: stretch;
  width: 100%;
}
.ws-stage-list {
  display: grid;
  gap: var(--s5);
}
.ws-add-list {
  display: grid;
  gap: var(--s4);
}
.ws-add-list button {
  justify-content: flex-start;
}
.ed-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset), var(--dash-drop, 0 18px 48px rgba(16, 12, 10, 0.08));
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ed-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 38%, transparent), transparent 42%);
  opacity: 0.65;
}
.ed-panel > * { position: relative; z-index: 1; }
.ed-panel > .note,
.ed-panel > .btn,
#wsWebsitePanel > .btn,
#wsAddFaq {
  justify-self: start;
}
.ed-devices,
.ed-tabs {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border: 1px solid var(--dash-hair);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  --ed-pill-x: 0px;
  --ed-pill-w: 0px;
  --ed-pill-move: var(--desk-enter);
}
.ed-tabs::before,
.ed-devices::before {
  content: "";
  position: absolute;
  top: 4px;
  left: var(--ed-pill-x);
  z-index: 0;
  height: calc(100% - 8px);
  width: var(--ed-pill-w);
  border-radius: 999px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  pointer-events: none;
  transform: none;
  transition:
    left var(--ed-pill-move) var(--desk-ease-out),
    width var(--ed-pill-move) var(--desk-ease-out);
}
.ed-tabs {
  width: 100%;
}
.ed-tabs.ed-tabs-ico {
  width: 100%;
  justify-self: stretch;
}
.ed-devices button,
.ed-tabs button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  color: var(--ink);
  font: inherit;
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-chips button.is-on,
.ws-event-list button.is-on {
  background: var(--forest);
  color: var(--paper);
  border-color: var(--forest);
}
.ed-split {
  display: grid;
  gap: var(--dash-stack);
  min-height: 70dvh;
}
.ed-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset), var(--dash-drop, 0 18px 48px rgba(16, 12, 10, 0.08));
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ed-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 38%, transparent), transparent 42%);
  opacity: 0.65;
}
.ed-panel > * { position: relative; z-index: 1; }
.ed-panel > .note,
.ed-panel > .btn,
#wsWebsitePanel > .btn,
#wsAddFaq {
  justify-self: start;
}
.ed-devices,
.ed-tabs {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border: 1px solid var(--dash-hair);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  --ed-pill-x: 0px;
  --ed-pill-w: 0px;
  --ed-pill-move: var(--desk-enter);
}
.ed-tabs::before,
.ed-devices::before {
  content: "";
  position: absolute;
  top: 4px;
  left: var(--ed-pill-x);
  z-index: 0;
  height: calc(100% - 8px);
  width: var(--ed-pill-w);
  border-radius: 999px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  pointer-events: none;
  transform: none;
  transition:
    left var(--ed-pill-move) var(--desk-ease-out),
    width var(--ed-pill-move) var(--desk-ease-out);
}
.ed-tabs {
  width: 100%;
}
.ed-tabs.ed-tabs-ico {
  width: 100%;
  justify-self: stretch;
}
.ed-devices button,
.ed-tabs button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 500;
  overflow: visible;
}
.ed-devices button { flex: 0 0 auto; }
.ed-devices button[aria-pressed="true"],
.ed-tabs button[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  box-shadow: none;
  font-weight: 600;
}
.ed-tabs,
.ed-devices {
  --ed-pill-ease: cubic-bezier(0.34, 1.28, 0.64, 1);
}
.ed-tabs:not(.is-seg-armed)::before,
.ed-devices:not(.is-seg-armed)::before {
  transition: none;
}
.ed-tabs.is-seg-armed::before,
.ed-devices.is-seg-armed::before {
  background: color-mix(in srgb, var(--paper, #f4efe6) 92%, white);
  transition:
    left var(--ed-pill-move, var(--desk-enter)) var(--ed-pill-ease),
    width var(--ed-pill-move, var(--desk-enter)) var(--ed-pill-ease),
    transform var(--ed-pill-move, var(--desk-enter)) var(--ed-pill-ease),
    box-shadow calc(var(--ed-pill-move, var(--desk-enter)) * 0.82) var(--ed-pill-ease),
    background-color 220ms var(--desk-ease-out);
}
.ed-tabs.is-pill-sliding::before,
.ed-devices.is-pill-sliding::before {
  transform: scale(1.018);
  box-shadow:
    var(--dash-inset),
    0 8px 22px color-mix(in srgb, var(--forest, #24352a) 11%, transparent);
}
.ed-devices button,
.ed-tabs button {
  transition:
    color 220ms var(--desk-ease-out),
    opacity 220ms var(--desk-ease-out),
    transform 130ms var(--desk-ease-out);
}
.ed-devices button[aria-pressed="false"],
.ed-tabs button[aria-pressed="false"] {
  opacity: 0.62;
}
.ed-devices button:active,
.ed-tabs button:active {
  transform: scale(0.975);
}
.ed-devices button[aria-pressed="true"]:not(:active),
.ed-tabs button[aria-pressed="true"]:not(:active) {
  transform: translateY(-0.5px);
}
.ed-canvas {
  --frame-ratio: 16 / 10;
  display: grid;
  place-items: center;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.ed-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 64dvh;
}
.ed-preview[data-kind="letter"] { background: transparent; }
.ed-preview[data-kind="letter"][data-env="sage"] { --letter-paper: #5a684c; }
.ed-preview[data-kind="letter"][data-env="pearl"] { --letter-paper: #e8e0d0; }
.ed-preview[data-kind="letter"][data-env="cocoa"] { --letter-paper: #6b4a36; }
.ed-preview[data-kind="letter"][data-env="burgundy"] { --letter-paper: #4a1c1c; }
.ed-preview[data-kind="letter"][data-env="ink"] { --letter-paper: #1a2433; }
.ed-preview[data-kind="letter"][data-env="blush"] { --letter-paper: #e4c4c0; }
.ed-preview[data-kind="website"] { background: color-mix(in srgb, #1c2618 88%, #5a684c); }
.ed-preview[data-kind="rsvp"] { background: transparent; }
.ed-artboard {
  position: absolute;
  left: 0;
  top: 0;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  transform-origin: 0 0;
  box-shadow: 0 18px 48px rgba(16, 12, 10, 0.28);
}
.ed-preview[data-device="mobile"] .ed-artboard {
  width: 390px;
  height: 844px;
  border-radius: 36px;
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, #1c2618 55%, transparent),
    0 18px 48px rgba(16, 12, 10, 0.32);
}
.ed-preview[data-device="tablet"] .ed-artboard {
  width: 768px;
  height: 1024px;
}
.ed-preview[data-kind="letter"][data-device="desktop"] .ed-artboard,
.ed-preview[data-kind="letter"]:not([data-device]) .ed-artboard,
.ed-preview[data-kind="rsvp"][data-device="desktop"] .ed-artboard,
.ed-preview[data-kind="rsvp"]:not([data-device]) .ed-artboard {
  width: 1366px;
  height: 768px;
}
.ed-preview[data-kind="website"][data-device="desktop"] .ed-artboard,
.ed-preview[data-kind="website"]:not([data-device]) .ed-artboard {
  width: 1280px;
  height: 800px;
}
.ed-preview iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  border: 0;
  background: transparent;
}
.ed-preview .ed-artboard iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
.ed-preview[data-kind="letter"] iframe {
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.ed-preview[data-kind="rsvp"] iframe {
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
#wsSiteCanvas iframe { background: #0e1610; }
#wsRsvpCanvas iframe { background: transparent; }
body[data-format="og"] .ed-preview[data-kind="rsvp"] iframe,
body[data-format="og"] #wsRsvpCanvas iframe { background: #fcf7ed; }
.ed-canvas[data-device="desktop"] { --frame-ratio: 16 / 10; padding: 0; }
.ed-canvas[data-device="tablet"] { --frame-ratio: 3 / 4; padding: 18px; }
.ed-canvas[data-device="mobile"] { --frame-ratio: 9 / 19.5; padding: 18px; }.ed-canvas iframe,
.ed-canvas-full iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  aspect-ratio: var(--frame-ratio);
}
.ed-canvas[data-device="tablet"] iframe,
.ed-canvas[data-device="mobile"] iframe {
  border-radius: 22px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.ed-preview.ed-canvas iframe {
  position: absolute;
  min-height: 0;
  max-width: none;
}
.ed-preview.ed-canvas[data-kind="website"] iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}
.ed-preview.ed-canvas[data-kind="letter"] iframe {
  inset: 0;
  width: 100%;
  height: 100%;
}
.ws-letter-now {
  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  border-radius: 24px;
  background: #5a684c;
  color: #f2efe8;
  text-align: center;
  min-height: 220px;
}
.ws-letter-now-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.ws-letter-now-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 32px 24px 28px;
  background: linear-gradient(180deg, color-mix(in srgb, #3e4a36 78%, transparent), color-mix(in srgb, #1c2618 88%, #3e4a36));
}
.ws-letter-now-kicker {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f2efe8 78%, transparent);
}
.ws-letter-now-names {
  margin: 0;
  max-width: 100%;
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.95;
  color: #f2efe8;
}
.ws-letter-now-names i {
  font-style: italic;
  font-weight: 400;
  opacity: 0.8;
}
.ws-letter-now-meta {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: color-mix(in srgb, #f2efe8 72%, transparent);
}
.ed-canvas[data-device="desktop"] iframe { width: 100%; max-width: none; }
body:not([data-format="og"]) .ed-canvas[data-kind="letter"] iframe { background: transparent; }
body:not([data-format="og"]) .ed-canvas[data-kind="rsvp"] iframe { background: transparent; }
body:not([data-format="og"]) .ed-canvas:not([data-kind="letter"]):not([data-kind="rsvp"]) iframe { background: #5a684c; }
.ed-canvas[data-device="tablet"] {
  align-items: center;
}
.ed-canvas[data-device="tablet"] iframe { width: min(768px, 100%); height: min(78dvh, 1024px); }
.ed-canvas[data-device="mobile"] {
  align-items: center;
}
.ed-canvas[data-device="mobile"] iframe,
.ed-canvas[data-device="mobile"] .std-card {
  width: min(390px, 100%);
  height: min(84dvh, 844px);
  border-radius: 28px;
}
.ws-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
.ws-card-grid-templates {
  overflow: auto;
  padding-right: 4px;
}
.ws-letter-picker {
  display: grid;
  gap: 14px;
}
.ws-letter-picker .ws-card-grid-templates {
  max-height: none;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ws-letter-picker .ws-pick-art {
  aspect-ratio: 3 / 4;
}
.ws-letter-design {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 240px;
}
.ws-pick {
  display: grid;
  gap: 6px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  padding: 0 0 8px;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 18%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ws-pick-art {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background: #fffdf8;
}
.ws-pick-art img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.ws-pick-badge {
  display: none;
}
.ws-pick-meta {
  display: grid;
  gap: 2px;
  padding: 0 8px;
}
.ws-pick-meta em,
.ws-pick-meta span {
  font-family: var(--sans);
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
}
.ws-pick-meta strong {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.ws-pick.is-current {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
}
@media (prefers-reduced-motion: reduce) {
  .ed-canvas iframe {
    transition: none;
  }
}
.ed-canvas-copy,
#wsStdCanvas { display: grid; place-items: center; padding: 0; }
#wsStdCanvas iframe {
  width: 100%;
  height: 100%;
  min-height: 64dvh;
  border: 0;
  background: var(--sheet);
}
#wsStdCanvas.ed-canvas-copy { padding: 24px; }
.ed-canvas-full { min-height: calc(100dvh - 120px); }
.std-card {
  width: min(420px, 100%);
  display: grid;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: var(--dash-vellum);
  box-shadow: var(--dash-inset), 0 18px 48px rgba(16, 12, 10, 0.1);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  text-align: center;
}
.std-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.ws-head {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.ws-head > div { min-width: 0; flex: 1 1 auto; }
.ws-head .dash-actions,
.ws-head > .btn,
.ws-head > .ed-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}
.dash-wide { padding: 24px !important; }
.ws-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.ws-stats-ribbon {
  display: block;
  grid-template-columns: none;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset), 0 12px 32px color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-stat-line {
  margin: 0;
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}
.ws-stat-line strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}
.ws-stat-rate {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin-left: auto;
  color: var(--ink);
  white-space: nowrap;
}
.ws-stats-ribbon .ws-stat-line {
  padding: 15px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ws-rsvp-sync-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 18px;
  border-top: 1px solid color-mix(in srgb, var(--forest) 14%, transparent);
  background: color-mix(in srgb, var(--forest) 5%, transparent);
  color: var(--ink);
}
.ws-rsvp-sync-summary.has-new-response {
  background: color-mix(in srgb, var(--forest) 9%, transparent);
}
.ws-stats-ribbon .ws-rsvp-summary-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--forest) 10%, transparent);
  color: var(--forest);
  font: 700 0.88rem/1 var(--sans);
}
.ws-stats-ribbon .ws-rsvp-sync-summary.has-new-response .ws-rsvp-summary-mark {
  background: var(--forest);
  color: #fffaf0;
}
.ws-rsvp-sync-summary.is-checking .ws-rsvp-summary-mark {
  animation: ws-rsvp-sync-turn 1.4s linear infinite;
}
.ws-stats-ribbon .ws-rsvp-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ws-stats-ribbon .ws-rsvp-summary-copy strong {
  display: block;
  overflow: hidden;
  font: 650 0.84rem/1.25 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-stats-ribbon .ws-rsvp-summary-copy small,
.ws-stats-ribbon .ws-rsvp-summary-time {
  display: block;
  color: var(--muted);
  font: 500 0.7rem/1.3 var(--sans);
}
.ws-rsvp-summary-time {
  white-space: nowrap;
}
@keyframes ws-rsvp-sync-turn { to { transform: rotate(1turn); } }
@media (max-width: 560px) {
  .ws-stats-ribbon .ws-stat-line { padding: 13px 15px; }
  .ws-stat-rate { width: 100%; margin-left: 0; }
  .ws-rsvp-sync-summary {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 10px 14px;
  }
  .ws-stats-ribbon .ws-rsvp-summary-time { display: none; }
  .ws-stats-ribbon .ws-rsvp-summary-copy strong,
  .ws-stats-ribbon .ws-rsvp-summary-copy small { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-rsvp-sync-summary.is-checking .ws-rsvp-summary-mark { animation: none; }
}
.ws-filter-more {
  max-width: 0;
  min-width: 0;
  min-height: min-content;
  flex: 0 0 auto;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-width var(--desk-row-enter, 350ms) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity calc(var(--desk-row-enter, 350ms) * 0.75) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.ws-filter-more.is-open {
  max-width: 48rem;
  opacity: 1;
  pointer-events: auto;
}
.ws-filter-more.is-exiting {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--desk-row-exit, 262ms);
  transition-timing-function: var(--desk-ease-in, cubic-bezier(0.7, 0, 0.84, 0));
}
.ws-filter-more-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  width: max-content;
  padding-inline: 2px;
}
.ws-filter-more-inner > * {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 220ms var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--desk-row-enter, 350ms) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.ws-filter-more.is-open .ws-filter-more-inner > *:nth-child(1) { transition-delay: 40ms; opacity: 1; transform: none; }
.ws-filter-more.is-open .ws-filter-more-inner > *:nth-child(2) { transition-delay: 90ms; opacity: 1; transform: none; }
.ws-filter-more.is-open .ws-filter-more-inner > *:nth-child(3) { transition-delay: 140ms; opacity: 1; transform: none; }
.ws-filter-more.is-exiting .ws-filter-more-inner > * {
  opacity: 0;
  transform: translateX(-8px);
  transition-delay: 0ms;
  transition-duration: 180ms;
  transition-timing-function: var(--desk-ease-in, cubic-bezier(0.7, 0, 0.84, 0));
}
#wsFilterToggle.is-on {
  background: var(--dash-glass);
  border-color: var(--dash-hair);
}
.ws-email-fold {
  margin-top: 8px;
  border: 1px solid var(--dash-hair);
  border-radius: 28px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  padding: 4px 18px 18px;
}
.ws-email-fold > :not(summary) {
  margin-top: 14px;
}
.ws-email-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  min-height: 52px;
  padding: 10px 4px;
  color: var(--ink);
}
.ws-email-summary::-webkit-details-marker { display: none; }
.ws-email-summary .kicker { margin: 0; }
.ws-email-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: italic;
}
.ws-email-hint {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.82rem;
}
.ws-email-fold[open] .ws-email-hint { opacity: 0.55; }
.ed-bar .dash-counts-inline,
.dash-counts-inline {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  align-items: center;
}
.ed-bar .dash-counts-inline p,
.dash-counts-inline p {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 28%, transparent);
}
.ed-bar .dash-counts-inline span,
.dash-counts-inline span {
  display: inline;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}
.ed-bar .dash-counts-inline strong,
.dash-counts-inline strong {
  display: inline;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
}
.ws-stats p,
.ws-mini {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 28%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-stats span,
.ws-mini p { display: block; color: var(--muted); font-size: 0.82rem; }
.ws-stats strong { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; }
.ws-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
}
.ws-chips button { flex: 0 0 auto; }
.ws-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  align-self: start;
  /* overflow-x:auto also computes overflow-y:auto → automatic min-size 0,
     so a height-bound guests sheet could crush this row and clip pill bottoms
     flat above HOUSEHOLD (same class of bug as dash-hero). */
  min-height: min-content;
  overflow-x: auto;
  padding-block: 4px;
  margin-block: -4px;
  flex-shrink: 0;
}
.ws-filters > :is(.ws-search, .btn, .ws-filter-more) {
  align-self: center;
}
.ws-filters .ws-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 160px;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-filters select,
.ws-filters .btn { flex: 0 0 auto; }
.ws-filters > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding-block: 0;
  line-height: 1;
  background: var(--dash-glass);
  border: 1px solid var(--dash-hair);
  color: var(--ink);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-search { width: 100%; }
.ws-filters .ws-search input,
#view-dashboard .ws-filters .ws-search input {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.15;
}
.ws-filters select {
  width: auto;
  min-width: 9.5rem;
  min-height: 44px;
  /* inherits Language-style desk select */
}
.ws-drawer {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: var(--dash-vellum);
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}
.ws-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.ws-check input { width: 20px; height: 20px; }
.ws-table-wrap { overflow: auto; }
.ws-group {
  display: grid;
  gap: var(--s4);
  margin: 0;
  border: 1px solid var(--dash-hair);
  background: var(--dash-vellum);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}
.ws-group header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ws-group h2 { margin: 0; font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.ws-group table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ws-group th,
.ws-group td { padding: 10px 8px; text-align: left; vertical-align: top; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.ws-table-wrap {
  display: grid;
  gap: 18px;
}
.ws-house {
  padding: 26px 26px 22px;
  border-radius: 28px;
  background: var(--dash-glass);
}
.ws-house-head {
  align-items: flex-start;
}
.ws-crawl {
  grid-area: crawl;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--dash-hair);
  background: color-mix(in srgb, #ffffff 10%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-crawl-pic {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}
.ws-crawl-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 140px;
  max-height: 220px;
  object-fit: cover;
  object-position: center 58%;
  background: var(--dash-frost);
}
.ws-crawl-pic-k {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--dash-hair);
  background: var(--dash-glass);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ws-crawl-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 16px 14px;
}
.ws-crawl-k {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-crawl-title,
.ws-crawl-line,
#view-dashboard .ws-crawl-title,
#view-dashboard .ws-crawl-line {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink);
}
.ws-crawl-title,
#view-dashboard .ws-crawl-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  font-style: italic;
}
.ws-crawl-line,
#view-dashboard .ws-crawl-line {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}
.ws-crawl-url {
  margin: 0;
  word-break: break-all;
  font-size: 0.75rem;
  color: var(--muted);
}
.ws-house-head > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ws-house-kicker,
.ws-house-count {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-house-head h2 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
}
.ws-people {
  display: grid;
  gap: 12px;
}
.ws-rsvp-answers {
  grid-area: answers;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--dash-hair);
  background: color-mix(in srgb, #ffffff 10%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-rsvp-k {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-rsvp-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
}
.ws-rsvp-row span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-rsvp-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.ws-person {
  display: grid;
  grid-template-columns: minmax(168px, 220px) minmax(0, 1fr) minmax(11rem, 14rem);
  grid-template-areas:
    "who facts tools"
    "send send send"
    "answers answers answers"
    "crawl crawl crawl";
  gap: 16px 24px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--dash-hair);
  border-radius: 22px;
  background: color-mix(in srgb, #ffffff 20%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-person-who {
  grid-area: who;
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ws-table-wrap .ws-name {
  justify-self: start;
  width: auto;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
}
.ws-mail,
.ws-warn,
.ws-role {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.ws-warn { color: var(--env); }
.ws-facts {
  grid-area: facts;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px 16px;
  min-width: 0;
}
.ws-fact {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.ws-fact-k {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ws-fact-v {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ws-fact-v p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.ws-stamp {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 26%, transparent);
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  cursor: pointer;
}
.ws-stamp.is-yes,
.ws-stamp.is-delivered,
.ws-stamp.is-invited {
  background: color-mix(in srgb, var(--forest) 16%, transparent);
  border-color: color-mix(in srgb, var(--forest) 36%, var(--dash-hair));
}
.ws-stamp.is-pending,
.ws-stamp.is-not-sent,
.ws-stamp.is-meal {
  background: color-mix(in srgb, var(--paper) 42%, transparent);
}
.ws-stamp.is-no,
.ws-stamp.is-not-invited,
.ws-stamp.is-bounced {
  background: color-mix(in srgb, var(--env) 12%, transparent);
  border-color: color-mix(in srgb, var(--env) 28%, var(--dash-hair));
}
.ws-quiet {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--dash-hair);
  border-radius: 12px;
  background: color-mix(in srgb, #ffffff 16%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ws-person-tools {
  grid-area: tools;
  display: grid;
  gap: 8px;
  justify-items: stretch;
  align-content: start;
  min-width: 0;
}
.ws-person-tools .desk-select,
.ws-person-tools .ws-move,
.ws-person-tools .btn,
.ws-person-tools .ws-quiet,
.ws-person-tools .ws-send-house {
  width: 100%;
  min-width: 0;
}
.ws-send-house {
  display: grid;
  gap: 6px;
}
.ws-send-house-k {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ws-send-panel {
  grid-area: send;
  display: grid;
  gap: 18px;
  min-width: 0;
  overflow: visible;
  padding: 20px;
  border: 1px solid var(--dash-hair);
  border-radius: 24px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset), 0 18px 44px rgba(62, 47, 33, 0.08);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.ws-send-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}
.ws-send-panel-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ws-send-panel-k {
  margin: 0;
  color: var(--muted);
  font: 600 0.66rem/1 var(--sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ws-send-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font: 500 clamp(1.35rem, 1.8vw, 1.75rem)/1.05 var(--serif);
}
.ws-send-panel-head > p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: right;
}
.ws-send-flow {
  display: grid;
  grid-template-columns: minmax(210px, 250px) 28px minmax(360px, 1fr) 28px minmax(225px, 270px);
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.ws-send-step {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--dash-hair);
  border-radius: 18px;
  background:
    radial-gradient(130% 90% at 8% -25%, rgba(255, 255, 255, 0.42), transparent 56%),
    color-mix(in srgb, var(--paper) 20%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-send-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ws-send-step-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--forest) 72%, transparent);
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font: 650 0.68rem/1 var(--sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 10px rgba(36, 53, 42, 0.16);
}
.ws-send-step-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ws-send-flow-arrow {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--forest) 18%, var(--dash-hair));
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 24%, transparent);
  color: color-mix(in srgb, var(--forest) 72%, transparent);
  font: 600 0.9rem/1 var(--sans);
  box-shadow: var(--dash-inset);
}
.ws-send-intro-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 82px;
  padding: 8px;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 22%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-send-intro-poster {
  display: block;
  width: 46px;
  height: 64px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--paper) 36%, transparent);
}
.ws-send-intro-card .desk-select {
  width: 100%;
  min-width: 0;
}
.ws-send-intro-card .desk-select-trigger {
  width: 100%;
  min-height: 44px;
  padding-inline: 12px 30px;
  text-align: left;
}
.ws-send-pick {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.ws-send-pick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ws-send-k {
  margin: 0;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ws-send-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  opacity: 0.78;
}
.ws-send-opts {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 3px 4px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.ws-send-empty {
  align-self: center;
  max-width: 24rem;
  margin: 0;
  color: var(--ink-soft, #566157);
  font-size: .82rem;
  line-height: 1.35;
}
.ws-send-opts::-webkit-scrollbar { height: 3px; }
.ws-send-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 0 0 54px;
  width: 54px;
  height: 88px;
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms var(--desk-ease-out), opacity 140ms var(--desk-ease-out);
}
.ws-send-opt-ring {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 54px;
  height: 68px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--paper) 38%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-send-opt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.ws-send-opt-code {
  position: static;
  display: block;
  width: 100%;
  height: 14px;
  min-width: 0;
  min-height: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: none;
}
.ws-send-opt.is-on .ws-send-opt-ring {
  border-color: color-mix(in srgb, var(--forest) 78%, transparent);
  outline: 2px solid color-mix(in srgb, var(--forest) 62%, transparent);
  outline-offset: 2px;
  box-shadow: var(--dash-inset), 0 7px 16px rgba(36, 53, 42, 0.18);
}
.ws-send-opt-check {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font: 700 0.58rem/1 var(--sans);
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 160ms ease, transform 180ms var(--desk-ease-out);
}
.ws-send-opt.is-on .ws-send-opt-check {
  opacity: 1;
  transform: scale(1);
}
.ws-general-send-flow.is-invitation-updated .ws-send-surface-step {
  animation: invitation-step-confirm 480ms var(--desk-ease-out) both;
}
.ws-general-send-flow.is-invitation-updated .ws-send-opt:not(.is-on) {
  opacity: 0.58;
  transform: scale(0.965);
}
.ws-general-send-flow.is-invitation-updated .ws-send-opt.is-confirming {
  animation: invitation-choice-confirm 520ms var(--desk-ease-out) both;
}
.ws-general-send-flow.is-invitation-updated .ws-send-opt.is-confirming .ws-send-opt-check {
  animation: invitation-check-confirm 440ms var(--desk-ease-out) both;
}
.ws-general-send-flow.is-invitation-updated .ws-send-link-card {
  animation: invitation-summary-confirm 480ms 50ms var(--desk-ease-out) both;
}
@keyframes invitation-step-confirm {
  0% { border-color: var(--dash-hair); }
  42% { border-color: color-mix(in srgb, var(--forest) 48%, var(--dash-hair)); }
  100% { border-color: var(--dash-hair); }
}
@keyframes invitation-choice-confirm {
  0% { transform: scale(0.94); }
  58% { transform: translateY(-4px) scale(1.06); }
  100% { transform: none; }
}
@keyframes invitation-check-confirm {
  0% { opacity: 0; transform: scale(0.35) rotate(-22deg); }
  62% { opacity: 1; transform: scale(1.18) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes invitation-summary-confirm {
  0% { opacity: 0.48; transform: translateX(-8px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
.ws-send-opt.is-on .ws-send-opt-code {
  background: transparent;
  color: var(--forest);
  font-weight: 600;
}
@media (hover: hover) {
  .ws-send-opt:hover {
    transform: translateY(-2px);
  }
  .ws-send-opt:hover .ws-send-opt-ring {
    border-color: color-mix(in srgb, var(--ink) 28%, transparent);
  }
  .ws-send-opt.is-on:hover .ws-send-opt-ring {
    border-color: color-mix(in srgb, var(--forest) 78%, transparent);
  }
}
.ws-send-opt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}
.ws-send-opt:active {
  opacity: 0.82;
  transform: scale(0.96);
}
.ws-send-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.ws-send-link-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-width: 0;
  height: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--forest) 18%, var(--dash-hair));
  border-radius: 15px;
  background: color-mix(in srgb, #ffffff 22%, transparent);
  box-shadow: var(--dash-inset);
}
.ws-send-link-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.ws-send-link-summary small {
  color: var(--muted);
  font: 500 0.62rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ws-send-link-summary strong {
  overflow: hidden;
  color: var(--ink);
  font: 600 0.78rem/1.3 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-send-copy.btn-solid {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--forest) 42%, transparent);
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 18px rgba(36, 53, 42, 0.18);
  transition: transform 90ms ease, background-color 140ms var(--desk-ease-out), border-color 140ms ease;
}
.ws-send-copy.btn-solid:hover {
  background: color-mix(in srgb, var(--forest) 92%, #ffffff);
  border-color: color-mix(in srgb, var(--forest) 58%, transparent);
  color: var(--paper);
}
.ws-send-copy.btn-solid:active {
  transform: scale(0.98);
  background: var(--forest);
}
.ws-send-copy.btn-solid:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}
.ws-send-remove {
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 140ms ease;
}
.ws-send-remove:hover {
  background: transparent;
  color: var(--ink);
}
.ws-send-remove:active {
  transform: none;
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .ws-send-opt,
  .ws-send-opt:active,
  .ws-send-copy.btn-solid,
  .ws-send-copy.btn-solid:active,
  .ws-send-remove:active { transform: none; transition: none; }
}
.ws-move {
  width: 100%;
  min-height: 40px;
  /* inherits Language-style desk select */
}
@media (min-width: 901px) {
  .ws-send-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .ws-send-opts {
    overflow: visible;
    scroll-snap-type: none;
  }
  .ws-send-remove {
    padding-inline: 6px;
  }
}
@media (max-width: 1420px) {
  .ws-send-flow {
    grid-template-columns: minmax(200px, 240px) 24px minmax(0, 1fr);
    gap: 10px;
  }
  .ws-send-flow-arrow-final { display: none; }
  .ws-send-link-step { grid-column: 1 / -1; }
  .ws-send-link-card {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    align-items: center;
  }
}
@media (max-width: 900px) {
  .ws-send-panel-head {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .ws-send-panel-head > p {
    max-width: 520px;
    text-align: left;
  }
  .ws-person {
    grid-template-columns: 1fr;
    grid-template-areas:
      "who"
      "tools"
      "send"
      "facts"
      "answers"
      "crawl";
  }
  .ws-person-tools {
    grid-template-columns: minmax(0, 1fr) auto auto;
    justify-items: stretch;
    align-items: center;
  }
  .ws-person-tools .btn,
  .ws-person-tools .ws-quiet {
    width: auto;
  }
  .ws-send-flow {
    grid-template-columns: minmax(180px, 220px) 22px minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .ws-person-tools {
    grid-template-columns: 1fr;
  }
  .ws-person-tools .btn,
  .ws-person-tools .ws-quiet {
    width: 100%;
  }
  .ws-send-flow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ws-send-panel {
    padding: 14px;
    border-radius: 20px;
  }
  .ws-send-flow-arrow {
    transform: rotate(90deg);
  }
  .ws-send-flow-arrow-final { display: grid; }
  .ws-send-link-step { grid-column: auto; }
  .ws-send-intro-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .ws-send-intro-poster {
    width: 52px;
    height: 64px;
  }
  .ws-send-actions {
    justify-content: flex-end;
  }
  .ws-send-link-card {
    grid-template-columns: 1fr;
  }
  .ws-send-remove {
    justify-self: end;
  }
}
.ws-event-split { display: grid; gap: 16px; }
.ws-event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-event-list button { width: 100%; display: grid; gap: 4px; text-align: left; border-radius: var(--radius); padding: 14px; }
.ws-event-detail {
  padding: 18px;
  border: 1px solid var(--dash-hair);
  border-radius: var(--radius);
  background: var(--dash-vellum);
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  display: grid;
  gap: 12px;
}
.ws-dl { display: grid; gap: 10px; margin: 0; }
.ws-dl div { display: grid; gap: 2px; }
.ws-dl dt { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ws-dl dd { margin: 0; }
.ws-sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ws-sec-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ws-mini { display: grid; gap: 6px; }
.ws-sec {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  box-shadow: var(--dash-inset), var(--dash-drop, 0 10px 28px rgba(16, 12, 10, 0.08));
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
  transition:
    box-shadow var(--desk-hover) var(--desk-ease-out),
    border-color var(--desk-hover) ease;
}
.ws-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, #ffffff 48%, transparent), transparent 46%);
  opacity: 0.72;
  transition: opacity var(--desk-hover) ease;
}
.ws-sec.is-open,
.ws-sec.is-exiting {
  border-radius: 28px;
  gap: 4px;
}
.ws-sec > header,
.ws-sec-body {
  position: relative;
  z-index: 1;
}
.ws-sec > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-height: 44px;
}
.ws-sec > header [data-ws-open-sec] {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  justify-content: flex-start;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
}
.ws-sec > header [data-ws-open-sec] strong {
  font-weight: 600;
}
.ws-sec > header [data-ws-hide-sec] {
  appearance: none;
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 18%, transparent);
  color: var(--ink);
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(16px) saturate(1.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  font-family: var(--sans);
  font-size: 0.88rem;
}
.ws-sec > header button {
  min-height: 44px;
}
.ws-stage-list .ws-sec > header,
.ws-stage > header {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 88px;
  justify-content: start;
  gap: 8px;
  padding: 0 8px;
}
.ws-stage-list .ws-sec.ws-stage-letter > header {
  grid-template-columns: minmax(0, 1fr) 44px;
}
.ws-stage-grip,
.ws-stage-lock {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  opacity: .55;
  cursor: grab;
}
.ws-stage-lock { cursor: default; }
.ws-stage-grip:active { cursor: grabbing; }
.ws-stage-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ws-stage-tools {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  width: 88px;
  justify-items: center;
  align-items: center;
}
.ws-stage-letter .ws-stage-tools {
  grid-template-columns: 44px;
  width: 44px;
}
.ws-stage-list .ws-stage-tools .ws-tool,
.ws-stage-list .ws-stage-tools [data-ws-open-sec],
.ws-stage-list .ws-stage-tools [data-ws-hide-sec] {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dash-editor .ed-split {
  isolation: isolate;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.dash-editor .ed-preview {
  position: relative;
  z-index: 0;
  isolation: isolate;
  contain: paint;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.dash-editor [data-pane="letter"] .ed-split-flow > .ed-preview,
.dash-editor [data-pane="website"] .ed-preview,
.dash-editor [data-pane="rsvp"] .ed-preview,
.dash-editor[data-pane="card"] .ed-split-flow > .ed-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.dash-editor [data-pane="letter"] .ed-split-flow > .ed-preview,
.dash-editor [data-pane="letter"] #wsLetterCanvas,
.dash-editor [data-pane="letter"] .ed-artboard,
.dash-editor [data-pane="rsvp"] .ed-preview,
.dash-editor [data-pane="rsvp"] #wsRsvpCanvas,
.dash-editor [data-pane="rsvp"] .ed-artboard {
  background: transparent;
  box-shadow: none;
}
#wsLetterCanvas,
#wsSiteCanvas,
#wsRsvpCanvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dash-editor .ed-preview iframe {
  position: absolute;
  z-index: 0;
  max-width: none;
  max-height: none;
  pointer-events: none;
  touch-action: pan-y;
}
.dash-editor [data-pane="letter"] #dashLetterFrame,
.dash-editor [data-pane="website"] #dashSiteFrame,
.dash-editor[data-pane="card"] #dashCardFrame,
.dash-editor #wsSiteCanvas iframe {
  pointer-events: auto;
  touch-action: pan-y;
}
.dash-editor[data-pane="card"] .ed-split-flow > .ed-preview,
.dash-editor[data-pane="card"] #wsCardCanvas,
.dash-editor[data-pane="card"] .ed-artboard {
  background: transparent;
  box-shadow: none;
}
.dash-editor[data-pane="card"] .ed-artboard {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 0;
}
#wsCardCanvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dash-editor[data-pane="card"] #dashCardFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: pan-y;
}
.dash-editor [data-pane="rsvp"] #dashRsvpFrame,
.dash-editor #wsRsvpCanvas iframe {
  pointer-events: auto;
  touch-action: pan-y;
}
.dash-editor .ed-artboard iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
.dash-editor #wsLetterCanvas .ed-artboard {
  isolation: isolate;
}
.dash-editor #dashLetterFrame {
  transition: opacity 180ms ease;
}
.letter-ready-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: #244236;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.94), rgba(250, 244, 232, 0.98) 46%, #f3ead9 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.letter-ready-cover[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.letter-ready-cover strong {
  font: 500 clamp(20px, 2vw, 28px)/1.12 Georgia, serif;
  letter-spacing: -0.02em;
}
.letter-ready-cover > span:not(.letter-ready-spinner) {
  max-width: 34ch;
  color: rgba(36, 66, 54, 0.72);
  font-size: 13px;
  line-height: 1.45;
}
.letter-ready-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(36, 66, 54, 0.18);
  border-top-color: #244236;
  border-radius: 50%;
  animation: letter-ready-spin 720ms linear infinite;
}
.letter-ready-cover.is-error .letter-ready-spinner {
  animation: none;
  border-color: rgba(145, 75, 62, 0.3);
  border-top-color: #914b3e;
}
.letter-ready-cover button {
  min-height: 44px;
  margin-top: 5px;
  padding: 0 18px;
  border: 1px solid rgba(36, 66, 54, 0.28);
  border-radius: 999px;
  color: #244236;
  background: rgba(255, 255, 255, 0.78);
  font: inherit;
  cursor: pointer;
}
@keyframes letter-ready-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .letter-ready-spinner { animation-duration: 1.8s; }
  .dash-editor #dashLetterFrame,
  .letter-ready-cover { transition-duration: 1ms; }
}
.dash-editor .ed-canvas:hover iframe,
.dash-editor .ed-canvas:focus-within iframe,
.dash-editor #dashRsvpFrame {
  pointer-events: auto;
}
.dash-editor .ed-panel {
  --ed-tabs-fade: 0;
  position: relative;
  z-index: 5;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
}
.dash-editor .ed-panel-scroll {
  /* The open letter section is ~6400px of fields in a ~570px viewport. Without
     containment every scroll can invalidate layout and paint outside this box,
     which forces the surrounding frosted-glass layers to re-blur. Contain keeps
     that work inside the panel. */
  contain: layout paint style;
  --ed-fade-top: 12px;
  --ed-fade-bot: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--ed-fade-top),
    #000 calc(100% - var(--ed-fade-bot)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--ed-fade-top),
    #000 calc(100% - var(--ed-fade-bot)),
    transparent 100%
  );
}
.dash-editor .ed-panel-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.dash-editor .ed-bar,
.dash-editor .ed-tabs {
  position: relative;
  top: auto;
  z-index: 2;
  width: 100%;
  pointer-events: auto;
}
.dash-editor .ed-panel .ed-tabs {
  width: 100%;
  margin-inline: 0;
  padding: 4px;
  isolation: isolate;
  overflow: visible;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border: 1px solid var(--dash-hair);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.dash-editor .ed-panel .note {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .dash-editor .ed-panel-scroll {
    --ed-fade-top: 0px;
    --ed-fade-bot: 0px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-editor .ed-panel {
    --ed-tabs-fade: 0;
  }
}
.ws-flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ws-flow-card,
.ws-flow-choice {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #1c1c1c;
  color: #fff;
  border: 1px solid #2c2c2c;
  text-align: left;
}
.ws-flow-card.is-current,
.ws-flow-choice.is-on {
  outline: 1px solid #fff;
  outline-offset: 0;
}
.ws-flow-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
  color: inherit;
}
.ws-flow-art img,
.ws-flow-art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-flow-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.72);
  color: #fff;
  font: 600 9px/1 var(--sans);
  letter-spacing: .08em;
}
.ws-flow-edit,
.ws-flow-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.72);
  color: #fff;
  display: grid;
  place-items: center;
}
.ws-flow-edit svg { display: block; }
.ws-flow-meta {
  padding: 10px 12px 12px;
}
.ws-flow-meta em {
  display: block;
  margin: 0;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  color: #b3b3b3;
}
.ws-flow-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
}
.ws-flow-meta span {
  display: block;
  margin-top: 4px;
  color: #b3b3b3;
  font-size: 12px;
}
.ws-flow-gallery {
  display: grid;
  gap: 12px;
}
.ws-flow-guide {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.ws-flow-choices {
  display: grid;
  gap: 12px;
}
.ws-flow-choice {
  padding: 0;
  cursor: pointer;
}
.ws-flow-choice .ws-flow-art {
  aspect-ratio: 16 / 10;
  pointer-events: none;
}
.ws-flow-back {
  justify-self: start;
}

.ws-sec em {
  margin-left: 8px;
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
}
.ws-sec-body {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 4px 4px;
  transition: grid-template-rows var(--desk-row-enter, 350ms) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.ws-sec.is-open .ws-sec-body {
  grid-template-rows: 1fr;
}
.ws-sec.is-exiting .ws-sec-body {
  grid-template-rows: 0fr;
  transition-duration: var(--desk-row-exit, 262ms);
  transition-timing-function: var(--desk-ease-in, cubic-bezier(0.7, 0, 0.84, 0));
}
.ws-sec-body-inner {
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.ws-sec-body-pad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 12px 16px 16px;
  border-radius: 22px;
  background: color-mix(in srgb, #ffffff 8%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent);
}
.ws-sec-body label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; font-size: 0.88rem; color: var(--muted); }
.ws-story-fields { display: grid; gap: 14px; }
.ws-header-lead { display: grid; gap: 28px; }
.ws-story-field { display: grid; gap: 6px; }
.ws-letter-photo-preview {
  display: block;
  width: min(100%, 220px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
}
.ws-letter-photo-preview[hidden] { display: none; }
.ws-letter-photo-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ws-story-cap {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ws-story-tip {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 99px;
  border: 1px solid var(--dash-hair, #ddd);
  font-size: 10px;
  vertical-align: middle;
}
.ws-story-swatch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
}
.ws-story-swatch input[type="color"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
}
.ws-story-swatch strong { display: block; font-size: 14px; }
.ws-story-swatch small { display: block; color: var(--muted); font-size: 11px; }
.ws-story-switch {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.ws-story-switch input {
  width: 44px;
  height: 26px;
  min-width: 44px;
  min-height: 26px;
  appearance: none;
  border-radius: 99px;
  border: 1px solid var(--dash-hair);
  background: color-mix(in srgb, #ffffff 20%, transparent);
  position: relative;
}
.ws-story-switch input:checked {
  background: #1c1c1c;
  border-color: #1c1c1c;
}
.ws-story-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 99px;
  background: #fff;
  transition: transform .18s ease;
}
.ws-story-switch input:checked::after { transform: translateX(18px); }
.ws-story-stages,
.ws-story-photos { display: grid; gap: 8px; }
.ws-story-stage,
.ws-story-photo {
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 16%, transparent);
  overflow: hidden;
}
.ws-story-rowhead {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ws-story-rowhead .ws-tool {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  margin-right: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
.ws-story-rowhead > button:first-child {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
.ws-story-rowhead > button:first-child strong {
  flex: 1;
  font-size: 14px;
}
.ws-story-chev {
  display: grid;
  place-items: center;
  width: 16px;
  transition: transform .18s ease;
}
.ws-story-stage.is-open > .ws-story-rowhead .ws-story-chev,
.ws-story-photo.is-open > .ws-story-rowhead .ws-story-chev { transform: rotate(180deg); }
.ws-story-stage-body,
.ws-story-photo-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}
.ws-story-help { color: var(--muted); font-size: 12px; }
.ws-story-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #1c1c1c;
  border-radius: 12px;
  overflow: hidden;
}
.ws-story-side button {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.ws-story-side button.is-on {
  background: #1c1c1c;
  color: #fff;
}
.ws-story-drop {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 140px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, #1c1c1c 8%, transparent);
}
.ws-story-drop img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.ws-story-drop em { color: var(--muted); font-size: 13px; }
.ws-story-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.ws-media { display: grid; gap: 10px; }
.ws-media-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 132px;
  padding: 20px 16px;
  border: 1px dashed var(--dash-hair);
  border-radius: 18px;
  text-align: center;
  cursor: pointer;
  background: color-mix(in srgb, #ffffff 22%, transparent);
}
.ws-media-empty input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ws-media-empty strong { font-size: 14px; font-weight: 600; }
.ws-media-empty span { color: var(--muted); font-size: 13px; }
.ws-media-preview {
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, #ffffff 70%, transparent);
}
.ws-media-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  background: #fff;
}
.ws-media-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
.ws-media-tools input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ws-media-tools .btn,
#view-dashboard .ws-media-tools .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
}
.ws-story-add { width: 100%; }

#view-dashboard .ws-sec-body input:not([type="file"]):not([type="hidden"]),
#view-dashboard .ws-sec-body textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: var(--ink);
  font: inherit;
  font-family: var(--sans);
  box-shadow: var(--dash-inset);
  backdrop-filter: blur(14px) saturate(1.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.55);
}
/* Focus is drawn INSIDE the field. The default 2px ring 3px outside the glass
   border read as a second box around it, and the collapsing section's
   overflow clip (.ws-sec-body-inner) cut its lower edge (owner screenshot,
   2026-09-24, "Reception line"). Border + inset line cannot be clipped. */
#view-dashboard .ws-sec-body input:not([type="file"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
#view-dashboard .ws-sec-body textarea:focus,
#view-dashboard .ws-sec-body select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: var(--dash-inset), inset 0 0 0 1px var(--focus);
  background: color-mix(in srgb, #ffffff 30%, transparent);
}
#view-dashboard .ws-sec-body textarea {
  min-height: 88px;
  line-height: 1.5;
  resize: vertical;
}
#view-dashboard .ws-sec-body input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 560px) {
  .dash-editor .ed-panel-scroll {
    padding: 12px;
  }
  .ws-sec-body-pad {
    padding: 10px 12px 14px;
  }
  .ws-sec > header [data-ws-open-sec] {
    padding-inline: 12px;
  }
  #view-dashboard .ws-sec-body input:not([type="file"]):not([type="hidden"]),
  #view-dashboard .ws-sec-body textarea {
    font-size: 16px;
  }
}
#view-dashboard .ws-sec-body .ws-header-lead {
  gap: 28px;
  padding-block: 8px 16px;
}
#view-dashboard .ws-header-lead .ws-story-field {
  gap: 10px;
}
#view-dashboard .ws-story-fields:has(.ws-header-lead) {
  gap: 24px;
}
#view-dashboard .ws-sec-body .ws-header-lead input[data-ws-extra="logo"] {
  height: auto;
  min-height: 72px;
  font-size: 22px;
  padding: 16px 18px;
}
#view-dashboard .ws-header-lead .ws-media-empty {
  min-height: 220px;
}
#view-dashboard .ws-check {
  min-height: 44px;
  padding: 0 4px;
}
#view-dashboard .ws-check input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 1.5px solid var(--forest);
  border-radius: 6px;
  background: color-mix(in srgb, #ffffff 18%, transparent);
  accent-color: var(--forest);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-appearance: none;
  appearance: none;
}
#view-dashboard .ws-check input[type="checkbox"]:checked {
  background-color: var(--forest);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2 L6.6 11.2 L12.5 4.8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  border-color: var(--forest);
}
#wsLetterPanel,
#wsWebsitePanel,
#wsStdPanel {
  display: grid;
  gap: var(--s5);
}
#view-dashboard .ed-panel .note,
#view-dashboard .dash-pane .note {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.9rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#view-dashboard a.btn {
  text-decoration: none;
  color: inherit;
}
#view-dashboard a.btn-solid {
  color: #f4efe4;
}
#view-dashboard .btn:not(.btn-solid),
#wsLetterPanel > .btn:not(.btn-solid),
#wsWebsitePanel > .btn:not(.btn-solid),
#wsAddFaq {
  appearance: none;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 18px;
  padding-block: 0;
  line-height: 1;
  border: 1px solid var(--dash-hair);
  border-radius: 999px;
  background: var(--dash-glass);
  color: var(--ink);
  box-shadow: var(--dash-inset);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
#view-dashboard .ws-sec > header [data-ws-open-sec]:hover,
#view-dashboard .ws-sec > header [data-ws-open-sec]:active {
  background-color: transparent;
  transform: none;
}
#view-dashboard .ws-sec > header [data-ws-hide-sec]:hover,
#view-dashboard .ed-devices button:hover,
#view-dashboard .ed-tabs button:hover {
  transform: none;
  background-color: color-mix(in srgb, #ffffff 16%, transparent);
}
#view-dashboard .ed-devices button[aria-pressed="true"]:hover,
#view-dashboard .ed-tabs button[aria-pressed="true"]:hover {
  background: transparent;
  background-color: transparent;
}
#view-dashboard .ws-sec:hover {
  box-shadow: var(--dash-inset), 0 14px 36px rgba(16, 12, 10, 0.12);
}
#view-dashboard .ws-sec:hover::before {
  opacity: 1;
}
@media (min-width: 960px) {
  .ed-split { grid-template-columns: minmax(400px, 0.95fr) minmax(0, 1.05fr); }
  .ed-split-flow { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .dash-editor .ed-preview { min-height: 0; }
  .ws-event-split { grid-template-columns: 0.9fr 1.1fr; }
  .ws-filters { flex-wrap: nowrap; }
}
body.dash-dark .view-dashboard,
body.dash-dark .view-legal,
body.dash-dark .dash-app,
body.dash-dark .dash-stage {
  background: transparent;
  color: var(--paper);
}
body.dash-dark .view-dashboard,
body.dash-dark .view-legal {
  --dash-hair: color-mix(in srgb, var(--paper) 22%, transparent);
  --dash-inset: inset 0 1px 0 color-mix(in srgb, var(--paper) 18%, transparent);
  --dash-glass: linear-gradient(180deg, color-mix(in srgb, var(--ink) 28%, transparent), color-mix(in srgb, var(--forest) 18%, transparent));
  --dash-vellum: color-mix(in srgb, var(--ink) 42%, transparent);
  --dash-frost: color-mix(in srgb, var(--ink) 48%, transparent);
}
body.dash-dark .dash-nav {
  background: transparent;
  color: var(--paper);
  border-color: var(--dash-hair);
}
body.dash-dark .dash-nav::before {
  background-color: var(--dash-vellum);
  background-image: var(--dash-glass);
}
body.dash-dark .ed-panel,
body.dash-dark .dash-card,
body.dash-dark .dash-setup,
body.dash-dark .dash-hero,
body.dash-dark .dash-empty-card,
body.dash-dark .ws-group,
body.dash-dark .ws-house,
body.dash-dark .ws-person,
body.dash-dark .ws-empty,
body.dash-dark .ws-event-detail,
body.dash-dark .ws-drawer,
body.dash-dark .ws-sec,
body.dash-dark .ws-stats p,
body.dash-dark .ws-mini,
body.dash-dark .dash-pop,
body.dash-dark .std-card,
body.dash-dark .legal-card {
  background: var(--dash-vellum);
  color: var(--paper);
  border-color: var(--dash-hair);
}
body.dash-dark .dash-sheet {
  background: transparent;
  color: var(--paper);
  border-color: var(--dash-hair);
}
body.dash-dark .dash-sheet::before {
  background-color: var(--dash-vellum);
  background-image: var(--dash-glass);
}
body.dash-dark :is(.dash-search, .ws-search),
body.dash-dark .dash-round,
body.dash-dark .dash-go,
body.dash-dark .ed-devices button,
body.dash-dark .ed-tabs button,
body.dash-dark .ws-chips button,
body.dash-dark .ws-group header button,
body.dash-dark .ws-event-list button,
body.dash-dark .ws-sec-list button,
body.dash-dark .ws-table-wrap button {
  background: var(--dash-glass);
  color: var(--paper);
  border-color: var(--dash-hair);
}
body.dash-dark :is(.dash-search, .ws-search) input {
  background: transparent;
  color: var(--paper);
}
body.dash-dark .dash-brand,
body.dash-dark .dash-nav-list a,
body.dash-dark .dash-nav-foot a,
body.dash-dark .dash-ghost,
body.dash-dark .dash-meta,
body.dash-dark .dash-lead,
body.dash-dark .dash-template-kicker,
body.dash-dark .dash-setup-kicker,
body.dash-dark .dash-text-btn,
body.dash-dark .dash-pop span,
body.dash-dark .ws-stats span,
body.dash-dark .ws-mini p,
body.dash-dark .ws-dl dt,
body.dash-dark .ws-sec em {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
body.dash-dark .dash-nav-list a[aria-current="page"] {
  background: transparent;
  color: var(--paper);
}
body.dash-dark .ed-devices button,
body.dash-dark .ed-tabs button {
  background: transparent;
  color: var(--paper);
}
body.dash-dark .ed-devices button[aria-pressed="true"],
body.dash-dark .ed-tabs button[aria-pressed="true"] {
  background: transparent;
  color: var(--paper);
  border-color: transparent;
  box-shadow: none;
}
body.dash-dark .ws-chips button.is-on,
body.dash-dark .ws-event-list button.is-on,
body.dash-dark .dash-setup-btn {
  background: color-mix(in srgb, var(--forest) 72%, transparent);
  color: var(--paper);
  border-color: color-mix(in srgb, var(--forest) 55%, transparent);
}
body.dash-dark #dashMenu span,
body.dash-dark #dashMenu span::before,
body.dash-dark #dashMenu span::after { background: var(--paper); }
body.dash-dark .dash-hero-copy h1,
body.dash-dark .dash-setup h2,
body.dash-dark .dash-card h2,
body.dash-dark .dash-sheet h1,
body.dash-dark .std-card h2,
body.dash-dark .legal-card h1 { color: var(--paper); }
body.dash-dark .dash-facts p,
body.dash-dark .dash-counts p,
body.dash-dark .dash-new input,
body.dash-dark .dash-new textarea,
body.dash-dark .dash-path-url {
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  color: var(--paper);
  border-color: var(--dash-hair);
}

/* desk motion */
/* page shell mount/dismount — one story per pane */
@keyframes desk-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes desk-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes desk-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes desk-exit-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Page shell: opacity only (parent transform kills child backdrop-filter). */
@keyframes desk-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes desk-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* Glass frost: opacity/transform only — blur stays at full frost from frame 1. */
@keyframes desk-backdrop-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    -webkit-backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
    backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
    backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
  }
}
@keyframes desk-backdrop-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
    backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
  }
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    -webkit-backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
    backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
  }
}
@keyframes desk-page-child-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
#dashProject {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
}
/* Home + Guests + Settings must grow with content so .dash-main scrolls
   and frost wraps the full sheet (Project guest-path / Clear included). */
body[data-dash-pane="home"] #dashProject,
body[data-dash-pane="guests"] #dashProject,
body[data-dash-pane="emails"] #dashProject,
body[data-dash-pane="settings"] #dashProject {
  height: auto;
  min-height: 100%;
  grid-template-rows: auto;
}
body[data-dash-pane="home"] .dash-pane[data-pane="home"],
body[data-dash-pane="intro"] .dash-pane[data-pane="intro"],
body[data-dash-pane="guests"] .dash-pane[data-pane="guests"],
body[data-dash-pane="emails"] .dash-pane[data-pane="guests"],
body[data-dash-pane="settings"] .dash-pane[data-pane="settings"] {
  height: auto;
  min-height: min-content;
  align-self: start;
  width: 100%;
}
/* Create has no dashboard home (owner 2026-09-29): on the desk the pane never
   paints, not even before studio.js leaves for the area used last. The view
   boot sets data-dash-site before this markup is parsed. */
body[data-dash-site="desk"] .dash-pane[data-pane="home"] { display: none !important; }

.ws-choice-pane {
  min-height: calc(100vh - 7rem);
  padding: clamp(1.25rem, 3vw, 3rem);
}
.ws-choice-head { max-width: 48rem; margin-bottom: 1.5rem; }
.ws-choice-head h1 { margin: 0.25rem 0 0.45rem; font-size: clamp(2rem, 4vw, 4rem); }
.ws-choice-head > p:last-child { max-width: 42rem; color: color-mix(in srgb, var(--ink) 68%, transparent); }
.ws-choice-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.ws-intro-workspace { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(24rem, 1.35fr); gap: 1.25rem; align-items: start; }
.ws-intro-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .2rem; }
.ws-intro-option {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: .75rem;
  align-items: center;
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--dash-liquid-border);
  border-radius: 1rem;
  background: var(--dash-liquid-base);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--dash-liquid-shadow);
}
.ws-intro-option.is-selected { outline: 2px solid var(--forest); }
.ws-intro-option img { width: 4rem; height: 5rem; object-fit: cover; border-radius: .65rem; background: #f2ead9; }
.ws-intro-option strong { display: block; line-height: 1.15; }
.ws-intro-option small { display: block; margin-top: .3rem; opacity: .62; }
.ws-intro-preview { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.ws-liquid-glass {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--dash-liquid-border);
  background: var(--dash-liquid-base);
  box-shadow: var(--dash-liquid-shadow);
}
.ws-liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 18px 28px rgba(255, 255, 255, 0.12);
}
.ws-intro-preview-stage { overflow: hidden; aspect-ratio: 9 / 16; max-height: calc(100vh - 14rem); border-radius: 1.5rem; }
.ws-intro-preview iframe,
.ws-intro-preview-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; transition: opacity 180ms ease; }
.ws-intro-preview iframe { z-index: 2; opacity: 0; background: #f7f0e3; }
.ws-intro-preview-stage.is-playing.is-ready iframe { opacity: 1; }
.ws-intro-preview-poster { z-index: 1; }
.ws-intro-preview-finished { position: absolute; z-index: 3; left: 50%; bottom: 1rem; translate: -50% 0; margin: 0; padding: .5rem .8rem; border-radius: 999px; background: rgba(252,247,237,.88); color: #173d31; font-size: .72rem; font-weight: 800; opacity: 1; transition: opacity 180ms ease; }
.ws-intro-preview-stage.is-playing .ws-intro-preview-finished { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .ws-invitation-grid, .ws-intro-workspace { grid-template-columns: 1fr; }
  .ws-intro-preview { position: static; }
}
@media (max-width: 560px) { .ws-intro-catalog { grid-template-columns: 1fr; } }
#view-dashboard .dash-pane.is-out {
  display: grid !important;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 8px;
  z-index: 2;
  pointer-events: none;
  animation: desk-page-out var(--dash-pane-out, 180ms) var(--desk-ease-in) both;
}
#view-dashboard .dash-pane.is-out :is(
  .ed-panel,
  .dash-card,
  .dash-hero,
  .dash-setup,
  .ws-house,
  .ws-group,
  .ws-email-fold,
  .ws-stat-line,
  .ws-drawer,
  .std-card
),
#view-dashboard .dash-pane.dash-sheet.is-out::before,
#view-dashboard .dash-pane.is-out > .ws-head,
#view-dashboard .dash-pane.is-out > .ed-bar,
#view-dashboard .dash-pane.is-out > .ed-split,
#view-dashboard .dash-pane.is-out > .ed-split-flow {
  animation: none;
}
#dashEmpty.is-out {
  pointer-events: none !important;
}
#dashEmpty:not([hidden]) {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
#dashEmpty:not([hidden]) #dashNew,
#dashEmpty:not([hidden]) #dashNew input,
#dashEmpty:not([hidden]) #dashNew button {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
body[data-view="dashboard"] .view:not(#view-dashboard),
body[data-view="dashboard"] .view:not(#view-dashboard) * {
  pointer-events: none !important;
}
.dash-nav-scrim:not(.is-open) {
  pointer-events: none !important;
}
.dash-pane:not([hidden]).is-in,
#dashEmpty:not([hidden]).is-in,
body[data-view="privacy"] #view-privacy .legal-card,
body[data-view="terms"] #view-terms .legal-card,
body[data-view="changelog"] #view-changelog .legal-card {
  animation: desk-page-in var(--desk-pane, 420ms) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
#view-dashboard .dash-pane:not([hidden]).is-in {
  animation: desk-page-in var(--dash-pane-in, 240ms) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
#view-dashboard .dash-pane:not([hidden]).is-in.is-settled {
  animation: none;
  opacity: 1;
}
/* Knife-bar: pane fade only. Child rise / frost restage is the loud remount. */
#view-dashboard .dash-pane.is-in:not(.is-settled) :is(
  .ed-panel,
  .dash-card,
  .dash-hero,
  .dash-setup,
  .ws-house,
  .ws-group,
  .ws-email-fold,
  .ws-stat-line,
  .ws-drawer,
  .std-card
),
#view-dashboard .dash-pane.dash-sheet.is-in:not(.is-settled)::before,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ws-head,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ed-bar,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .dash-grid,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ws-stats,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ws-filters,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ws-table-wrap,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ed-split,
#view-dashboard .dash-pane.is-in:not(.is-settled) > .ed-split-flow,
#view-dashboard #wsLetterPanel.is-pane-enter:not(.is-settled),
#view-dashboard #wsWebsitePanel.is-pane-enter:not(.is-settled),
#view-dashboard #wsRsvpPanel.is-pane-enter:not(.is-settled) {
  animation: none;
}
#dashEmpty:not([hidden]).is-in:not(.is-settled) {
  animation: desk-backdrop-in var(--desk-pane, 420ms) var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.dash-pane:not([hidden]).is-in.is-settled,
.dash-pane.is-settled,
#dashEmpty.is-settled,
.dash-pane.is-settled > .ws-head,
.dash-pane.is-settled > .ed-bar,
.dash-pane.is-settled > .dash-grid,
.dash-pane.is-settled > .ws-stats,
.dash-pane.is-settled > .ws-filters,
.dash-pane.is-settled > .ws-table-wrap,
.dash-pane.is-settled > .ed-split,
.dash-pane.is-settled > .ed-split-flow,
.dash-pane.is-settled :is(
  .ed-panel,
  .dash-card,
  .dash-hero,
  .dash-setup,
  .ws-house,
  .ws-group,
  .ws-email-fold,
  .ws-stat-line,
  .ws-drawer,
  .std-card
),
#wsLetterPanel.is-pane-enter.is-settled,
#wsWebsitePanel.is-pane-enter.is-settled,
#wsRsvpPanel.is-pane-enter.is-settled {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}
.dash-pane.is-settled :is(
  .ed-panel,
  .dash-card,
  .dash-hero,
  .dash-setup,
  .ws-house,
  .ws-group,
  .ws-email-fold,
  .ws-stat-line,
  .ws-drawer,
  .std-card
),
.dash-pane.dash-sheet.is-settled::before,
#wsLetterPanel.is-pane-enter.is-settled,
#wsWebsitePanel.is-pane-enter.is-settled,
#wsRsvpPanel.is-pane-enter.is-settled {
  -webkit-backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
  backdrop-filter: var(--dash-blur, blur(22px) saturate(1.7));
}
#wsRsvpPanel.is-pane-exit {
  animation: desk-backdrop-out var(--desk-row-exit, 262ms) var(--desk-ease-in, cubic-bezier(0.7, 0, 0.84, 0)) both;
  will-change: backdrop-filter, opacity, transform;
}

#view-dashboard :is(
  a,
  button,
  [role="tab"],
  label.btn,
  input[type="search"],
  select
):not(.dash-nav-scrim) {
  transition:
    transform var(--desk-hover) var(--desk-ease-out),
    background-color var(--desk-hover) ease,
    opacity var(--desk-hover) ease,
    box-shadow var(--desk-hover) ease,
    border-color var(--desk-hover) ease;
}
#view-dashboard :is(
  a,
  button,
  [role="tab"],
  label.btn,
  select
):not(.dash-nav-scrim):not(.btn-solid):not(.dash-setup-btn):active {
  transform: scale(0.96);
  transition-duration: var(--desk-press);
}
#view-dashboard :is(
  a,
  button,
  [role="tab"],
  label.btn,
  input[type="search"],
  select
):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
#view-dashboard .dash-nav-scrim:active {
  opacity: 0.9;
  transition-duration: var(--desk-press);
}
.view-dashboard .btn-solid:not(.ws-send-copy),
.view-dashboard .dash-setup-btn {
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 4px;
  border-bottom-color: color-mix(in srgb, var(--forest) 72%, var(--ink));
  transition: transform var(--desk-press) ease-out, border-bottom-width var(--desk-press) ease-out, background-color var(--desk-hover) ease;
}
.view-dashboard .btn-solid:not(.ws-send-copy) {
  border-color: var(--forest);
  border-bottom-color: color-mix(in srgb, var(--forest) 72%, var(--ink));
}
.view-dashboard .dash-setup-btn {
  border-color: var(--forest);
  border-bottom-color: color-mix(in srgb, var(--forest) 72%, var(--ink));
}
#view-dashboard :is(.btn-solid, .dash-setup-btn):not(.ws-send-copy):active {
  transform: translateY(3px);
  border-bottom-width: 1px;
  transition-duration: 70ms;
}
.dash-unlock {
  transition: opacity var(--desk-hover) ease, transform var(--desk-hover) var(--desk-ease-out);
}
.dash-unlock:active {
  opacity: 0.82;
  transform: scale(0.96);
}
@media (hover: hover) {
  #view-dashboard :is(
    a,
    button,
    [role="tab"],
    label.btn,
    select
  ):not(.dash-nav-scrim):hover {
    transform: translateY(-1px);
  }
  #view-dashboard .dash-nav-list a:hover,
  #view-dashboard .dash-round:hover {
    background-color: color-mix(in srgb, #ffffff 16%, transparent);
  }
  #view-dashboard .dash-nav-list a:hover {
    transform: none;
  }
  #view-dashboard .btn-solid:not(.ws-send-copy):hover,
  #view-dashboard .dash-setup-btn:hover {
    background-color: #1b2a21;
    transform: translateY(-1px);
  }
  #view-dashboard .dash-unlock:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    background-color: transparent;
  }
  #view-dashboard .dash-nav-list a[aria-current="page"]:hover {
    background: transparent;
  }
  #view-dashboard .dash-search:hover {
    box-shadow: var(--dash-inset), 0 12px 32px rgba(16, 12, 10, 0.12);
    background-color: color-mix(in srgb, var(--paper) 18%, transparent);
  }
  #view-dashboard .ws-filters .ws-search:hover {
    background-color: color-mix(in srgb, #ffffff 16%, transparent);
  }
  #view-dashboard :is(.dash-search, .ws-filters .ws-search) input:hover {
    background: transparent;
    box-shadow: none;
  }
  #view-dashboard .dash-ghost:hover,
  #view-dashboard .dash-text-btn:hover,
  #view-dashboard .dash-back a:hover,
  #view-dashboard .dash-nav-foot a:hover {
    color: var(--ink);
    background-color: color-mix(in srgb, var(--paper) 28%, transparent);
  }
  #view-dashboard .dash-nav-scrim.is-open:hover {
    background: color-mix(in srgb, var(--ink) 24%, transparent);
    transform: none;
  }
  #view-dashboard :is(
    a,
    button,
    [role="tab"],
    label.btn,
    select
  ):not(.dash-nav-scrim):not(.btn-solid):not(.dash-setup-btn):hover:active {
    transform: scale(0.96);
    transition-duration: var(--desk-press);
  }
  #view-dashboard :is(.btn-solid, .dash-setup-btn):not(.dash-nav-scrim):not(.ws-send-copy):hover:active {
    transform: translateY(3px);
    border-bottom-width: 1px;
    transition-duration: 70ms;
  }
  #view-dashboard .dash-unlock:hover:active {
    opacity: 0.82;
    transform: scale(0.96);
  }
  #view-dashboard .ws-send-remove:hover,
  #view-dashboard .ws-send-remove:active {
    transform: none;
  }
}
#view-dashboard .ws-send-copy.btn-solid,
.view-dashboard .ws-send-copy.btn-solid {
  border-width: 1px;
  border-bottom-width: 4px;
  border-color: color-mix(in srgb, var(--forest) 88%, #ffffff);
  border-bottom-color: color-mix(in srgb, var(--forest) 82%, #000000);
  background: var(--forest);
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(36, 53, 42, 0.18);
}
#view-dashboard .ws-send-copy.btn-solid:hover,
#view-dashboard .ws-send-copy.btn-solid:active {
  background: color-mix(in srgb, var(--forest) 92%, #ffffff);
  background-color: color-mix(in srgb, var(--forest) 92%, #ffffff);
  color: var(--paper);
}
#view-dashboard .ws-send-copy.btn-solid:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .ws-filter-more,
  .ws-filter-more.is-open,
  .ws-filter-more.is-exiting,
  .ws-filter-more-inner > * {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
  .dash-pane:not([hidden]).is-in,
  #dashEmpty:not([hidden]).is-in,
  body[data-view="privacy"] #view-privacy .legal-card,
  body[data-view="terms"] #view-terms .legal-card,
  body[data-view="changelog"] #view-changelog .legal-card,
  #wsLetterPanel.is-pane-enter,
  #wsWebsitePanel.is-pane-enter,
  #wsRsvpPanel.is-pane-enter,
  #wsRsvpPanel.is-pane-exit,
  .dash-pane.is-in:not(.is-settled) > .ws-head,
  .dash-pane.is-in:not(.is-settled) > .ed-bar,
  .dash-pane.is-in:not(.is-settled) > .dash-grid,
  .dash-pane.is-in:not(.is-settled) > .ws-stats,
  .dash-pane.is-in:not(.is-settled) > .ws-filters,
  .dash-pane.is-in:not(.is-settled) > .ws-table-wrap,
  .dash-pane.is-in:not(.is-settled) > .ed-split,
  .dash-pane.is-in:not(.is-settled) > .ed-split-flow,
  .dash-pane.is-in:not(.is-settled) :is(
    .ed-panel,
    .dash-card,
    .dash-hero,
    .dash-setup,
    .ws-house,
    .ws-group,
    .ws-email-fold,
    .ws-stat-line,
    .ws-drawer,
    .std-card
  ) {
    animation: desk-fade 220ms ease both !important;
    animation-delay: 0ms !important;
    transform: none !important;
    filter: none !important;
  }
  #view-dashboard .dash-pane.is-out,
  #view-dashboard .dash-pane.is-out :is(
    .ed-panel,
    .dash-card,
    .dash-hero,
    .dash-setup,
    .ws-house,
    .ws-group,
    .ws-email-fold,
    .ws-stat-line,
    .ws-drawer,
    .std-card
  ),
  #view-dashboard .dash-pane.dash-sheet.is-out::before {
    animation-name: desk-exit-fade;
    animation-duration: 160ms;
    transform: none;
    filter: none;
  }
  .ed-tabs::before,
  .ed-devices::before,
  .dash-nav-list::before {
    transition: none;
  }
  .ws-sec-body {
    transition: opacity 200ms ease;
  }
  .ws-sec.is-open .ws-sec-body {
    opacity: 1;
    grid-template-rows: 1fr;
  }
  .ws-sec.is-exiting .ws-sec-body,
  .ws-sec:not(.is-open) .ws-sec-body {
    opacity: 0;
    grid-template-rows: 0fr;
  }
  #view-dashboard :is(
    a,
    button,
    [role="tab"],
    label.btn,
    input[type="search"],
    select
  ),
  .dash-unlock,
  .view-dashboard .btn-solid,
  .view-dashboard .dash-setup-btn,
  .dash-pop,
  .dash-nav-scrim {
    transition-property: opacity, background-color, border-color, box-shadow, outline-color !important;
  }
  #view-dashboard :is(
    a,
    button,
    [role="tab"],
    label.btn,
    input[type="search"],
    select
  ):hover,
  #view-dashboard :is(
    a,
    button,
    [role="tab"],
    label.btn,
    input[type="search"],
    select
  ):active,
  #view-dashboard :is(
    a,
    button,
    [role="tab"],
    label.btn,
    input[type="search"],
    select
  ):hover:active,
  .dash-unlock:hover,
  .dash-unlock:active,
  .view-dashboard .btn-solid:active,
  .view-dashboard .dash-setup-btn:active,
  .dash-pop,
  .dash-pop.is-open,
  .dash-pop.is-exiting {
    transform: none !important;
  }
  .view-dashboard .btn-solid:active,
  .view-dashboard .dash-setup-btn:active {
    border-bottom-width: 4px;
  }
  .dash-pop.is-exiting,
  .dash-nav-scrim.is-exiting {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 959px) {
  .dash-nav {
    transform: none !important;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity !important;
  }
  body.dash-nav-open .dash-nav {
    opacity: 1;
    pointer-events: auto;
  }
  body.dash-nav-exiting .dash-nav {
    opacity: 0;
    transform: none !important;
  }
}

/* studio presence */
@keyframes studio-copy-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.view.is-view-in :is(
  h1,
h2,
.kicker,
.auth-lead,
.dash-lead,
.auth-eyebrow,
section,
article,
figure,
.dash-card,
.dash-setup,
.dash-hero,
.legal-card,
.auth-card,
.auth-panel,
.create-sample,
.shelf-card:where(:not(.ws-gift-stage *)),
.home-stage,
.lib-head,
.know-copy,
.lookbook,
.env-row
):not(.look-card):not(.dash-pane):not(.band-video),
.is-block-in:not(.look-card):not(.dash-pane):not(.band-video) {
  animation: studio-copy-in var(--desk-pane) var(--desk-ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--desk-stagger));
}
.view.is-view-in .look-card,
.view.is-view-in .band-video,
.band-video.is-block-in {
  animation: studio-copy-fade var(--desk-pane) var(--desk-ease-out) both;
}
@keyframes studio-copy-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
:is(
  a,
  button,
  [role="tab"],
  [role="radio"],
  [role="option"],
  label.btn,
  input[type="search"]
):not(.dash-nav-scrim):not(.skip):not(.look-card) {
  transition:
    transform var(--desk-hover) var(--desk-ease-out),
    background-color var(--desk-hover) ease,
    color var(--desk-hover) ease,
    opacity var(--desk-hover) ease;
}
:is(
  a,
  button,
  [role="tab"],
  [role="radio"],
  [role="option"],
  label.btn
):not(.dash-nav-scrim):not(.skip):not(.look-card):not(.btn-solid):not(.dash-setup-btn):not(.price-start):active {
  transform: scale(0.96);
  transition-duration: var(--desk-press);
}
:is(
  a,
  button,
  [role="tab"],
  [role="radio"],
  [role="option"],
  label.btn,
  input[type="search"]
):not(.dash-nav-scrim):not(.skip):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
/* A text field shows focus inside its own edge (owner, 2026-10-02: the dark
   ring around a selected search box "happens a lot across the weddings app").
   The global ring above sits 3px outside, so every scroll or overflow box
   clipped it, and a field already has a border that can carry focus. The
   :not() chain only lifts specificity over the ring rules above and the
   #view-dashboard copy. */
:is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus-visible,
#view-dashboard :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):focus-visible {
  outline: 1.5px solid color-mix(in srgb, var(--focus) 55%, transparent);
  outline-offset: -1.5px;
}
@media (hover: hover) {
  :is(
    a,
    button,
    [role="tab"],
    [role="radio"],
    [role="option"],
    label.btn
  ):not(.dash-nav-scrim):not(.skip):not(.look-card):hover {
    transform: translateY(-1px);
  }
  :is(
    a,
    button,
    [role="tab"],
    [role="radio"],
    [role="option"],
    label.btn
  ):not(.dash-nav-scrim):not(.skip):not(.look-card):not(.btn-solid):not(.dash-setup-btn):not(.price-start):hover:active {
    transform: scale(0.96);
    transition-duration: var(--desk-press);
  }
  :is(.btn-solid, .dash-setup-btn, .price-start):not(.dash-nav-scrim):hover:active {
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    a,
    button,
    [role="tab"],
    [role="radio"],
    [role="option"],
    label.btn
  ):hover,
  :is(
    a,
    button,
    [role="tab"],
    [role="radio"],
    [role="option"],
    label.btn,
    input[type="search"]
  ):active,
  :is(
    a,
    button,
    [role="tab"],
    [role="radio"],
    [role="option"],
    label.btn,
    input[type="search"]
  ):hover:active {
    transform: none !important;
  }
.view.is-view-in :is(
    h1,
h2,
.kicker,
.auth-lead,
.dash-lead,
.auth-eyebrow,
section,
article,
figure,
.dash-card,
.dash-setup,
.dash-hero,
.legal-card,
.auth-card,
.auth-panel,
.create-sample,
.shelf-card:where(:not(.ws-gift-stage *)),
.home-stage,
.lib-head,
.know-copy,
.lookbook,
.env-row
  ):not(.look-card),
.is-block-in:not(.look-card) {
    animation-name: studio-view-fade;
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    transform: none;
  }
  .is-block-in {
    animation-name: studio-view-fade;
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
  }
  .view.is-view-in .look-card {
    animation-name: studio-view-fade;
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
  }
  dialog.guest.is-guest-in,
  dialog.guest.is-guest-in::backdrop {
    animation-name: studio-view-fade;
    animation-duration: 200ms;
    transform: none;
  }
  html:not([data-hydrated]) body[data-view="price"] #view-price > picture.band-video,
  #view-price.view.is-view-in > picture.band-video,
  #view-price.view.is-view-out > picture.band-video {
    animation-name: studio-view-fade;
    animation-duration: 0.01ms !important;
  }
  #view-price .price-card,
  #view-price .price-card * {
    transform: none;
  }
  html:not([data-hydrated]) body[data-view="home"] #view-home,
  html:not([data-hydrated]) body[data-view="library"] #view-library,
  html:not([data-hydrated]) body[data-view="create"] #view-create,
  html:not([data-hydrated]) body[data-view="dashboard"] #view-dashboard,
  html:not([data-hydrated]) body[data-view="price"] #view-price,
  html:not([data-hydrated]) body[data-view="account"] #view-account,
  html:not([data-hydrated]) body[data-view="privacy"] #view-privacy,
  html:not([data-hydrated]) body[data-view="terms"] #view-terms,
  html:not([data-hydrated]) body[data-view="changelog"] #view-changelog,
  .view.is-view-in {
    animation-name: studio-view-fade;
    transform: none;
  }
}

.ws-palette-list, .ws-type-list { display: grid; gap: 8px; }
.ws-palette, .ws-type-preset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--dash-hair);
  border-radius: 16px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.ws-palette.is-on, .ws-type-preset.is-on { box-shadow: inset 0 0 0 1.5px currentColor; }
.ws-palette-name { font-size: 0.92rem; }
.ws-swatches { display: flex; gap: 6px; flex: 0 0 auto; }
.ws-swatches i, .ws-swatch-edit i {
  display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
}
.ws-swatches-edit { padding: 4px 0 8px; }
.ws-swatch-edit { position: relative; width: 22px; height: 22px; }
.ws-swatch-edit input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ws-type-mode { display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--dash-hair); }
.ws-type-mode button { flex: 1; border: 0; background: transparent; color: inherit; padding: 8px 10px; border-radius: 999px; cursor: pointer; }
.ws-type-mode button[aria-pressed="true"] { background: color-mix(in srgb, #ffffff 18%, transparent); font-weight: 600; }
.ws-type-preset { flex-direction: column; align-items: flex-start; gap: 2px; }
.ws-type-preset small { opacity: .62; font-size: 0.78rem; }

/* Invitation collection: paper objects on the studio's garden glass. */
.fw-design-picker { display: grid; gap: 12px; min-width: 0; margin: 4px 0 20px; }
.fw-design-trigger { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 16px; align-items: center; width: 100%; min-height: 154px; padding: 16px; border-radius: 24px; border: 1px solid var(--dash-hair); background: var(--dash-glass); box-shadow: var(--dash-inset); color: var(--ink); text-align: left; cursor: pointer; }
.fw-design-fan { display: block; position: relative; width: 112px; height: 116px; }
.fw-design-fan img { position: absolute; width: 76px; height: 102px; left: calc(12px + var(--paper)*10px); top: calc(6px + var(--paper)*1px); object-fit: contain; border-radius: 6px; padding: 4px; background: #fffaf0; box-shadow: 0 5px 12px #25352320; transform: rotate(calc(-11deg + var(--paper)*12deg)); z-index: calc(3 - var(--paper)); transition: transform 280ms cubic-bezier(.16,1,.3,1); }
.fw-design-copy { display: grid; gap: 8px; }
.fw-design-copy small,.fw-design-card-copy small { font: 500 10px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .14em; }
.fw-design-copy strong { font: 400 27px/1.05 var(--serif,"Cormorant Garamond",serif); }
.fw-design-copy > span { font: 500 12px/1.4 var(--sans); }
.fw-design-copy > span span { margin-left: 8px; }
.fw-guest-launch { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; padding: 10px 16px; border: 1px solid var(--dash-hair); border-radius: 999px; background: var(--dash-glass); color: var(--ink); box-shadow: var(--dash-inset); font: 500 12px/1.4 var(--sans); cursor: pointer; }
.fw-guest-launch > span:first-child { font-size: 24px; line-height: 1; }
.fw-guest-launch > span:last-child { margin-left: auto; }
.fw-editor-dialog { box-sizing: border-box; width: min(1040px,calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 32px; border: 1px solid var(--dash-hair,#ffffffb3); border-radius: 32px; color: var(--ink,#1c2218); background: linear-gradient(125deg,#fff6e9,#e9eee3); box-shadow: inset 0 1px 0 #ffffffb3,0 30px 100px #14251e40; backdrop-filter: none; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.fw-editor-dialog::backdrop { background: #15271d80; }
.fw-editor-dialog[open] { animation: fwDialogIn 280ms cubic-bezier(.16,1,.3,1) both; }
.fw-editor-dialog[open]::backdrop { animation: fwDialogFade 280ms ease-out both; }
.fw-editor-dialog.is-closing { animation: fwDialogOut 210ms cubic-bezier(.7,0,.84,0) both; pointer-events: none; }
.fw-editor-dialog.is-closing::backdrop { animation: fwDialogFade 210ms ease-in reverse both; }
.fw-dialog-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.fw-dialog-heading .kicker { margin: 0 0 8px; font: 500 10px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.fw-dialog-heading h2 { margin: 0; font: 400 clamp(32px,4vw,48px)/1.05 var(--serif,"Cormorant Garamond",serif); letter-spacing: -.03em; }
.fw-dialog-heading h2 em { font-weight: 400; }
.fw-dialog-heading p:not(.kicker) { margin: 12px 0 0; max-width: 510px; font: 400 13px/1.5 var(--sans); opacity: .76; }
.fw-dialog-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #ffffffb3; border-radius: 50%; background: #ffffff60; color: inherit; font: 300 28px/1 var(--sans); cursor: pointer; }
.fw-design-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px 16px; }
.fw-design-card { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; animation: fwDialogIn 350ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--card-i)*35ms); border-radius: 18px; }
.fw-design-art { display: block; position: relative; aspect-ratio: 1; padding: 6px; border: 1px solid #ffffffa8; border-radius: 18px; background: #ffffff48; transition: transform 180ms cubic-bezier(.16,1,.3,1); }
.fw-design-art img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 5px 7px #25352320; }
.fw-design-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--forest,#24352a); color: #fffaf0; opacity: 0; }
.fw-design-card.is-selected .fw-design-art { box-shadow: inset 0 0 0 2px var(--forest,#24352a); background: #ffffff88; }
.fw-design-card.is-selected .fw-design-check { opacity: 1; }
.fw-design-card-copy { display: grid; gap: 4px; padding: 12px 4px 0; }
.fw-design-card-copy strong { font: 400 26px/1.1 var(--serif,"Cormorant Garamond",serif); }
.fw-design-card-copy > span { font: 400 11px/1.4 var(--sans); opacity: .7; }
.fw-collection-foot { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #24352a18; font: 400 12px/1.5 var(--sans); opacity: .7; }
.fw-guest-experience { width: min(1460px,calc(100vw - 40px)); height: calc(100dvh - 40px); max-height: none; padding: 24px; overflow: hidden; }
.fw-guest-experience[open] { display: flex; flex-direction: column; }
.fw-guest-experience .fw-dialog-heading { flex: 0 0 auto; margin-bottom: 16px; }
.fw-guest-experience .fw-dialog-heading h2 { font-size: 32px; }
.fw-guest-experience .fw-dialog-heading p:not(.kicker) { margin-top: 6px; }
.fw-guest-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 0 0 auto; margin-bottom: 16px; }
.fw-guest-devices { display: flex; padding: 4px; border: 1px solid #ffffffb3; border-radius: 999px; background: #ffffff30; }
.fw-guest-devices button,.fw-guest-replay { border: 0; background: transparent; color: inherit; min-height: 44px; padding: 8px 18px; border-radius: 999px; font: 500 12px/1 var(--sans); cursor: pointer; }
.fw-guest-devices button[aria-pressed="true"] { background: #ffffffa0; box-shadow: 0 2px 8px #25352312; }
.fw-guest-replay { border: 1px solid #ffffffb3; background: #ffffff40; }
.fw-guest-stage { flex: 1 1 auto; min-height: 0; width: 100%; position: relative; overflow: hidden; border-radius: 20px; background: #24352a12; }
.fw-guest-stage iframe { position: absolute; top: 50%; left: 50%; border: 0; transform-origin: center; background: #fffaf0; border-radius: 10px; }
.fw-guest-status { flex: 0 0 auto; margin: 12px 0 0; text-align: center; font: 400 11px/1.4 var(--sans); }
.fw-editor-dialog button:focus-visible,.fw-design-picker button:focus-visible { outline: 2px solid var(--forest,#24352a); outline-offset: 4px; }
.fw-editor-dialog button:active,.fw-design-picker button:active { transform: scale(.98); }
@media (hover:hover) {
  .fw-design-trigger:hover .fw-design-fan img { transform: translateY(-3px) rotate(calc(-16deg + var(--paper)*16deg)); }
  .fw-design-card:hover .fw-design-art { transform: translateY(-4px); background: #ffffff80; }
  .fw-guest-launch:hover,.fw-dialog-close:hover,.fw-guest-replay:hover { background: #ffffff80; }
}
@media (max-width:800px) {
  .fw-design-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:540px) {
  .fw-editor-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 20px; border-radius: 24px; }
  .fw-dialog-heading { gap: 8px; margin-bottom: 20px; }
  .fw-dialog-heading h2 { font-size: 34px; }
  .fw-design-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
  .fw-design-art { padding: 8px; aspect-ratio: 1; }
  .fw-design-card-copy strong { font-size: 25px; }
  .fw-design-card-copy > span { font-size: 10px; }
  .fw-guest-experience { height: calc(100dvh - 20px); padding: 16px; }
  .fw-guest-experience .fw-dialog-heading h2 { font-size: 30px; }
  .fw-guest-toolbar { gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .fw-guest-devices button { padding: 8px 13px; }
  .fw-guest-replay { padding: 8px 12px; }
  .fw-guest-status { font-size: 10px; }
}
@keyframes fwDialogIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fwDialogOut { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes fwDialogFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion:reduce) {
  .fw-editor-dialog[open],.fw-editor-dialog.is-closing,.fw-design-card { animation: fwDialogFade 100ms linear both; }
  .fw-editor-dialog.is-closing { animation-direction: reverse; }
  .fw-design-fan img,.fw-design-art { transition: none; }
  .fw-editor-dialog button:active,.fw-design-picker button:active,.fw-design-card:hover .fw-design-art,.fw-design-trigger:hover .fw-design-fan img { transform: none; }
}

/* Modal scrolling must not move the editor underneath it. */
html:has(.fw-editor-dialog[open]) { overflow: hidden; }

/* A scrolling editor is one paper surface, not hundreds of nested blur passes.
   Override motion keyframes too: their fill-mode otherwise restores the blur. */
#view-dashboard .dash-editor,
#view-dashboard .dash-editor *,
#view-dashboard .dash-editor *::before,
#view-dashboard .dash-editor *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#view-dashboard .dash-editor .ed-panel {
  background: linear-gradient(135deg, #fff6e9f5, #e9eee3f5);
}
#view-dashboard .dash-editor .ed-panel-scroll {
  mask-image: none;
  -webkit-mask-image: none;
}
/* Hidden editing canvases must not composite underneath a modal. Preserve their
   document and draft state; the separate guest player stays visible. */
body:has(.fw-editor-dialog[open]) .dash-editor iframe { visibility: hidden; }

/* General sharing is a paper composition: a mood card, a collection, a seal. */
#wsGeneralSend { padding: clamp(20px,3vw,40px); background: #f7f2e6; border-radius: 28px; color: #24352a; }
#wsGeneralSend, #wsGeneralSend *, #wsGeneralSend *::before, #wsGeneralSend *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#wsGeneralSend .ws-general-send-head { display: block; margin-bottom: 32px; }
#wsGeneralSend .ws-general-send-head h2 { font: 400 clamp(34px,3.8vw,56px)/1.04 var(--serif); max-width: 650px; margin: 12px 0; letter-spacing: -.035em; }
#wsGeneralSend .ws-general-send-head > p { max-width: none; margin: 12px 0 0; font-size: 14px; }
#wsGeneralSend .ws-general-send-flow { grid-template-columns: minmax(200px,.7fr) minmax(0,1.7fr); gap: 24px; }
#wsGeneralSend .ws-send-flow-arrow { display: none; }
#wsGeneralSend .ws-send-step { padding: 24px; background: #fffdf7; border: 1px solid #d9ddcc; border-radius: 22px; gap: 22px; box-shadow: none; }
#wsGeneralSend .ws-send-step-head { align-items: flex-start; gap: 12px; }
#wsGeneralSend .ws-send-step-number { background: transparent; border: 0; box-shadow: none; color: #69765c; font: italic 28px/1 var(--serif); }
#wsGeneralSend .ws-send-k { letter-spacing: 0; text-transform: none; font: 400 25px/1.1 var(--serif); }
#wsGeneralSend .ws-send-hint { margin-top: 6px; font-size: 12px; line-height: 1.5; }
#wsGeneralSend .ws-send-intro-card { grid-template-columns: 1fr; border: 0; padding: 0; background: none; box-shadow: none; align-content: start; gap: 18px; }
#wsGeneralSend .ws-send-intro-poster { width: 100%; height: 190px; object-fit: contain; border: 0; border-radius: 12px; background: #f2eddf; }
#wsGeneralSend .desk-select-trigger { background: #f1eadb; border-color: #d9ddcc; }
#wsGeneralSend .ws-send-opts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 14px; overflow: visible; padding: 4px; align-content: start; }
#wsGeneralSend .ws-send-opt { width: 100%; height: auto; min-width: 0; gap: 10px; }
#wsGeneralSend .ws-send-opt-ring { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; background: #f8f5ed; }
#wsGeneralSend .ws-send-opt img { object-fit: contain; object-position: center; }
#wsGeneralSend .ws-send-opt-code { height: auto; text-transform: none; letter-spacing: 0; font: 500 13px/1.3 var(--sans); color: #24352a; }
#wsGeneralSend .ws-send-link-step { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; background: #263c2d; color: #fff8e9; border: 0; }
#wsGeneralSend .ws-send-link-step .ws-send-step-number, #wsGeneralSend .ws-send-link-step .ws-send-hint { color: #d9dfc7; }
#wsGeneralSend .ws-send-link-card { display: flex; flex: 1; justify-content: flex-end; align-items: center; gap: 24px; background: transparent; border: 0; box-shadow: none; padding: 0; }
#wsGeneralSend .ws-send-link-summary { color: #fff8e9; }
#wsGeneralSend .ws-send-link-summary small { color: #d9dfc7; }
#wsGeneralSend .ws-send-copy { width: auto; flex-shrink: 0; min-height: 52px; padding: 14px 24px; background: #f6eedc; color: #24352a; border: 0; box-shadow: none; text-transform: none; letter-spacing: 0; }
#wsGeneralSend .ws-send-copy span { margin-left: 14px; }
@media(max-width:1100px) { #wsGeneralSend .ws-send-link-step, #wsGeneralSend .ws-send-link-card { flex-direction: column; align-items: stretch; } }
@media(max-width:700px) { #wsGeneralSend .ws-general-send-flow { grid-template-columns: minmax(0,1fr); } #wsGeneralSend .ws-send-step { padding: 18px; } #wsGeneralSend .ws-send-opts { grid-template-columns: repeat(2,minmax(0,1fr)); } #wsGeneralSend .ws-send-intro-poster { height: 180px; } }

#wsGeneralSend .ws-general-send-head > p { text-align: left; }
#wsGeneralSend .ws-send-link-step .ws-send-k,
#wsGeneralSend .ws-send-link-summary strong { color: #fff8e9 !important; }
#wsGeneralSend .ws-send-link-step .ws-send-copy { background: #f6eedc !important; color: #24352a !important; }

/* Portrait landing: editorial paper, real invitation previews, native scrolling. */
.mobile-landing { display: none; }
@media (max-width: 1024px) {
  body[data-view="home"] { background: #f7f3e9; }
  body[data-view="home"] .top { position: relative; top: auto; left: auto; width: 100%; max-width: none; transform: none; margin: 0; padding: 12px 20px; background: #f7f3e9; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
  body[data-view="home"] .top-mouth { min-height: 48px; padding: 0; background: none; border: 0; box-shadow: none; }
  body[data-view="home"] .top-collapse, body[data-view="home"] .guest-disc { display: none; }
  body[data-view="home"] .brand { gap: 8px; }
  body[data-view="home"] .brand-mark { display: block; width: 32px; height: 32px; border-radius: 9px; overflow: hidden; }
  body[data-view="home"] .brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
  body[data-view="home"] .brand { display: flex; align-items: center; gap: 9px; }
  body[data-view="home"] .brand strong { font-size: 28px; }
  body[data-view="home"] .top-signin { min-width: 88px; min-height: 44px; padding: 12px 18px; border: 1px solid #c7c9b7; border-radius: 30px; background: transparent; font-size: 11px; letter-spacing: .08em; }
  body[data-view="home"] #view-home { padding: 0; overflow: clip; background: #f7f3e9; }
  body[data-view="home"] #view-home > .band:not(.band-know) { display: none; }
  .mobile-landing { display: block; color: #293b2c; font-family: "DM Sans", sans-serif; }
  .mobile-landing * { box-sizing: border-box; }
  .mobile-landing a { color: inherit; text-decoration: none; }
  .mobile-landing h1, .mobile-landing h2, .mobile-landing h3, .mobile-landing p { margin: 0; }
  .mobile-landing h1, .mobile-landing h2, .mobile-landing h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; text-transform: none; }
  .mobile-landing em { font-weight: 400; }
  .mobile-landing .ml-eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .17em; text-transform: uppercase; font-weight: 600; }
  .ml-hero { padding: 24px 24px 40px; text-align: center; }
  .mobile-landing h1 { margin: 14px -8px 16px; font-size: clamp(43px, 11.7vw, 70px); line-height: .97; letter-spacing: -.045em; }
  .mobile-landing .ml-intro { font-size: 13px; line-height: 1.7; color: #5d665a; }
  .ml-hero-art { position: relative; display: block; width: min(100%, 370px); margin: 26px auto 22px; padding: 12px 12px 0; border: 1px solid #d8d6c7; background: #fffdf7; border-radius: 48% 48% 8px 8px / 21% 21% 8px 8px; box-shadow: 0 12px 26px #493d2310; overflow: hidden; }
  .ml-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
  .ml-art-note { position: absolute; top: 20px; left: 0; right: 0; font: italic 19px "Cormorant Garamond", serif; }
  .ml-open { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e4e0d2; padding: 15px 12px; font-size: 12px; }
  .mobile-landing .ml-primary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 16px 24px; border-radius: 32px; background: #2e4835; color: #fffdf4; font-size: 14px; font-weight: 500; }
  .mobile-landing .ml-small { margin-top: 12px; font-size: 11px; color: #697060; }
  .ml-collection { padding: 42px 0; background: #ebeedd; border-top: 1px solid #d9deca; border-bottom: 1px solid #d9deca; scroll-margin-top: 20px; }
  .ml-section-heading { padding: 0 24px 26px; }
  .mobile-landing h2 { font-size: clamp(36px, 9.7vw, 52px); letter-spacing: -.035em; line-height: 1.02; margin: 14px 0; }
  .ml-section-heading > p:last-child { font-size: 13px; line-height: 1.65; color: #5b6555; }
  .ml-designs { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 0 24px 22px; scrollbar-width: thin; scrollbar-color: #8d9b80 transparent; }
  .ml-design { flex: 0 0 77%; min-width: 0; scroll-snap-align: start; }
  .ml-design-art { padding: 8px; border: 1px solid #d6d9c8; border-radius: 140px 140px 8px 8px; overflow: hidden; background: #fffcf4; }
  .ml-design-art img { width: 100%; height: auto; aspect-ratio: 1; display: block; object-fit: cover; mix-blend-mode: multiply; }
  .ml-design-caption { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px 0; }
  .ml-design-caption strong { display: block; font: 32px "Cormorant Garamond", serif; }
  .ml-design-caption small { display: block; font-size: 11px; color: #68715e; margin-top: 3px; }
  .ml-design-caption > span:last-child { font-size: 24px; }
  .ml-text-link { display: flex; justify-content: space-between; margin: 24px 24px 0; padding: 12px 0; border-bottom: 1px solid #adb99f; font-size: 13px; }
  .ml-story { padding: 48px 24px; }
  .ml-steps { padding: 0; margin: 30px 0; list-style: none; }
  .ml-steps li { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid #dddccf; }
  .ml-steps li > span { font-size: 11px; padding-top: 7px; color: #7f886c; }
  .mobile-landing h3 { font-size: 27px; line-height: 1.1; margin-bottom: 8px; }
  .ml-steps p { font-size: 13px; line-height: 1.65; color: #626b5b; max-width: 32ch; }
  .ml-finale { padding: 40px 24px; text-align: center; color: #fff8eb; background: #334938; }
  .ml-flourish { display: block; color: #d8bf91; font-size: 44px; margin-bottom: 22px; }
  .ml-finale h2 { margin: 20px 0 28px; }
  .ml-finale .ml-primary { color: #293b2c; background: #f4eddc; }
  .ml-footer-links { display: flex; justify-content: center; gap: 26px; margin-top: 24px; font-size: 12px; }
  .ml-footer-links a { padding: 10px 0; }
  body[data-view="home"] .band-know { padding: 42px 24px; min-height: 0; background: #f7f3e9; }
  body[data-view="home"] .band-know .band-video { display: none; }
  body[data-view="home"] .know-band, body[data-view="home"] .know-sheet { padding: 0; width: 100%; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
  body[data-view="home"] .know-sheet { display: block; }
  /* One column up to 1024 px, so the sticky copy must let go here too, or the
     lede rides over "01 What do I pay?" at tablet width. */
  body[data-view="home"] .know-copy { position: static; padding: 0 0 24px; }
  body[data-view="home"] .know-copy h2 { font-size: 38px; }
  body[data-view="home"] .know-copy .btn { display: none; }
  body[data-view="home"] .know-item { border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; border: 0; border-top: 1px solid #d8d9cb; }
  body[data-view="home"] .know-item summary { min-height: 64px; padding: 18px 0; }
  .mobile-landing a:focus-visible { outline: 3px solid #b06a50; outline-offset: 4px; }
}

@media (max-width: 1024px) {
  .ml-hero-art .ml-video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #eee9da; }
  .mobile-landing .ml-motion-toggle { display: block; min-height: 44px; padding: 10px 14px; margin: -14px auto 12px; color: #52624c; border: 0; background: transparent; font: 11px "DM Sans", sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  .ml-moment { margin: 0; padding: 26px 24px 0; }
  .ml-moment .ml-video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 150px 150px 8px 8px; background: #eee9da; }
  .ml-moment-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font: italic 18px "Cormorant Garamond", serif; }
  .ml-moment-caption .ml-motion-toggle { margin: 0; flex-shrink: 0; }
  .mobile-landing button:focus-visible { outline: 3px solid #b06a50; outline-offset: 2px; }
}

/* Let artwork bleed past the arch; keep captions outside the cropped viewport. */
@media (max-width: 1024px) {
  .mobile-landing { --ml-media-zoom: 1.1; }
  .ml-hero-art, .ml-design-art { padding: 0; }
  .ml-media-window { display: block; overflow: hidden; isolation: isolate; }
  .ml-hero-art .ml-media-window { aspect-ratio: 1; }
  .ml-moment .ml-media-window { aspect-ratio: 4 / 3; border-radius: 150px 150px 8px 8px; }
  .ml-media-window .ml-video, .ml-design-art img, .ml-hero-art img {
    transform: scale(var(--ml-media-zoom));
    transform-origin: center;
  }
  .ml-moment .ml-media-window .ml-video { border-radius: 0; }
  .ml-hero-art .ml-open { position: relative; padding-inline: 20px; background: #fffdf7; }
}

/* A drawn garden crest carries the cream page into the closing green section. */
@media (max-width: 1024px) {
  .ml-finale { position: relative; margin-top: 72px; padding-top: 8px; }
  .ml-finale-wave { position: absolute; width: 100%; height: 80px; left: 0; top: -79px; color: #334938; pointer-events: none; }
  .ml-botanical { display: block; width: min(250px, 85%); height: auto; margin: -5px auto 26px; color: #d8bf91; overflow: visible; }
  .ml-sprig { transform-box: view-box; transform-origin: 140px 150px; }
  .ml-sprig-left { animation: ml-sway-left 7s ease-in-out infinite alternate; }
  .ml-sprig-right { animation: ml-sway-right 8s ease-in-out infinite alternate; }
  @keyframes ml-sway-left { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
  @keyframes ml-sway-right { from { transform: rotate(2deg); } to { transform: rotate(-2deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .ml-sprig-left, .ml-sprig-right { animation: none; }
}

.ml-section-art { display: none; }
@media (max-width: 1024px) {
  body[data-view="home"] .ml-section-art { display: block; width: 96px; height: 58px; margin: 0 0 20px; color: #8b7953; pointer-events: none; }
  body[data-view="home"] .ml-art-bloom { width: 64px; height: 39px; margin: -8px auto 14px; }
  body[data-view="home"] .ml-art-garden { width: 100px; height: 60px; margin: 0 auto 18px; }
}

@media (max-width: 1024px) {
  .ml-showcase { min-width: 0; margin: 22px -12px 20px; }
  .ml-intro-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; scroll-padding-inline: 12px; padding: 0 12px; overscroll-behavior-x: contain; }
  .ml-intro-rail::-webkit-scrollbar { display: none; }
  .ml-intro-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
  .ml-intro-slide .ml-hero-art { margin: 0 auto 16px; width: 100%; max-width: 420px; }
  .ml-intro-stage { position: relative; width: 100%; aspect-ratio: 1; border-radius: 48% 48% 0 0 / 21% 21% 0 0; overflow: hidden; background: #eee9da; }
  .ml-intro-stage > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
  .ml-intro-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
  .ml-intro-play { position: absolute; inset: 0; display: flex; align-items: end; justify-content: center; padding: 20px; background: transparent; border: 0; cursor: pointer; color: #fffaf0; }
  .ml-intro-play span { border-radius: 24px; padding: 12px 18px; background: #293b2ce8; font: 12px "DM Sans",sans-serif; }
  .ml-intro-play[hidden] { display: none; }
  .ml-intro-caption { min-height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; font-size: 12px; text-align: left; }
  .ml-intro-replay { min-height: 44px; display: block; margin: -14px auto 12px; border: 0; padding: 10px 14px; background: none; color: #52624c; font: 11px "DM Sans",sans-serif; text-decoration: underline; text-underline-offset: 4px; }
  .ml-intro-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 12px; }
  .ml-intro-nav > button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #c5cab6; border-radius: 50%; background: transparent; color: #334938; cursor: pointer; }
  .ml-intro-nav svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.3; fill: none; }
  .ml-intro-count { display: block; font: 10px "DM Sans",sans-serif; letter-spacing: .14em; color: #7a816e; }
  .ml-intro-name { display: block; margin-top: 4px; font: 25px "Cormorant Garamond",serif; }
  .ml-intro-dots { display: flex; justify-content: center; gap: 0; margin-top: 5px; }
  .ml-intro-dots button { position: relative; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; }
  .ml-intro-dots button::after { content: ''; position: absolute; width: 6px; height: 6px; border: 1px solid #7f886f; border-radius: 50%; left: 15px; top: 15px; }
  .ml-intro-dots button[aria-current="true"]::after { background: #334938; transform: scale(1.4); }
  .mobile-landing .ml-intro-hint { font-size: 10px; letter-spacing: .04em; color: #747e67; }
  .ml-showcase-flourish { display: block; width: 180px; height: 26px; margin: 12px auto 0; stroke: #a18b60; stroke-width: 1; }
}
@media (min-width: 720px) and (max-width: 1024px) {
  .ml-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 36px; padding: 24px 36px 40px; align-items: center; text-align: left; }
  .ml-hero-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .ml-hero-actions { grid-column: 1; grid-row: 2; align-self: start; margin-top: 26px; }
  .ml-showcase { grid-column: 2; grid-row: 1 / 3; margin: 0; text-align: center; }
  .mobile-landing h1 { font-size: clamp(44px,6.3vw,64px); margin-inline: 0; }
  body[data-view="home"] .ml-art-bloom { margin-left: 0; }
  .ml-intro-stage, .ml-hero-art .ml-media-window { aspect-ratio: 4 / 3; }
  .ml-hero-art .ml-media-window .ml-video { height: 100%; aspect-ratio: auto; }
  .ml-design { flex-basis: 36%; }
  .ml-story, .ml-section-heading { padding-inline: 36px; }
  .ml-moment { max-width: 620px; margin-inline: auto; }
  .ml-finale > h2 { max-width: 650px; margin-inline: auto; }
  .ml-finale .ml-primary { max-width: 430px; margin-inline: auto; }
}

/* Send, the dashboard's Unlock and the header's one button (Dashboard / Get it)
   are the app's normal flat beige (owner, 2026-09-27): sand edge and slab,
   deep-teal words, no gold gradient, glow ring or travelling sheen. */
:is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock) {
  position: relative;
  min-width: clamp(160px, 16vw, 240px);
  min-height: 52px;
  padding: 0 36px;
  color: #F8F4EC !important;
  -webkit-text-fill-color: #F8F4EC;
  font-weight: 750;
  background: #2d4a32;
  border: 1px solid #1f3423;
  border-bottom: 4px solid #1f3423;
  box-shadow: 0 3px 0 #1f3423;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
:is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock):hover,
:is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 #1f3423, 0 8px 18px rgba(20, 36, 24, 0.24);
}
:is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock):focus-visible {
  outline: 2px solid #2d4a32;
  outline-offset: 5px;
}
:is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock):active {
  transform: translateY(1px) scale(.98);
  border-bottom-width: 4px;
}
/* The header's one button (Dashboard / Get it): transparent, thin navy
   outline (owner 2026-09-27). */
.top-actions .top-signin {
  position: relative;
  min-height: 44px;
  padding: 0 24px;
  color: #172b46;
  -webkit-text-fill-color: #172b46;
  font-weight: 750;
  background: transparent;
  border: 1px solid #172b4659;
  box-shadow: none;
  transition: transform 180ms ease, background-color 180ms ease;
}
@media (hover: hover) {
  .top-actions .top-signin:hover {
    background: #172b460f;
    transform: translateY(-2px);
  }
}
.top-actions .top-signin:focus-visible {
  outline: 2px solid #172b46;
  outline-offset: 5px;
}
.top-actions .top-signin:active {
  transform: translateY(1px) scale(.98);
}
@media (prefers-reduced-motion: reduce) {
  :is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock),
  .top-actions .top-signin { transition: none; }
  :is(.ed-bar-actions .js-ws-send, #view-dashboard .dash-unlock):is(:hover, :focus-visible, :active),
  .top-actions .top-signin:is(:hover, :active) { transform: none; }
}

/* A send tile shows the whole design: the card or letter preview, contained
   on the tile's paper so a portrait card and a landscape letter both read. */
.ws-send-opt-ring img.ws-send-thumb,
#wsGeneralSend .ws-send-opt-ring img.ws-send-thumb {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  padding: 6%; box-sizing: border-box; transform: none;
}
/* Guest & Send's surface picker: the letter or card fills its tile, framed on
   the envelope and names, so a design reads at a glance (owner 2026-09-26). */
#wsGeneralSend .ws-send-opt-ring img.ws-send-thumb {
  object-fit: cover; object-position: 50% 48%; padding: 0; transform: scale(1.18);
}
/* Fallback only: a design with no preview keeps the tinted envelope. */
.ws-send-opt-ring img.ws-envelope-thumb,
#wsGeneralSend .ws-send-opt-ring img.ws-envelope-thumb {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  padding: 10%; box-sizing: border-box; transform: none;
}
.ws-envelope-thumb[data-envelope-color="g01-pink"] { filter: sepia(.35) hue-rotate(285deg) saturate(.75); }
.ws-envelope-thumb[data-envelope-color="g01-beige"] { filter: sepia(.4) saturate(.35) brightness(1.1); }
.ws-envelope-thumb[data-envelope-color="e05"] { filter: sepia(.9) saturate(.85) brightness(.8); }
.ws-envelope-thumb[data-envelope-color="e09"] { filter: hue-rotate(140deg) saturate(.7) brightness(.72); }
.ws-envelope-thumb[data-envelope-color="e03"] { filter: sepia(1) saturate(5) hue-rotate(300deg) brightness(.48) contrast(1.35); }
.ws-ready-link { display: grid; gap: 10px; font-size: 15px; line-height: 1.5; }
.ws-ready-link input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 14px; }

/* The finished URL and status each need their own row inside the send card. */
#wsGeneralSend .ws-send-link-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
#wsGeneralSend .ws-send-link-step > *,
#wsGeneralSend .ws-send-link-card > * { min-width: 0; max-width: 100%; }
#wsGeneralSend .ws-send-link-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; width: 100%; }
#wsGeneralSend .ws-send-link-summary { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
#wsGeneralSend .ws-ready-link { grid-column: 1 / -1; grid-row: 2; margin: 0; color: #24352a; }
#wsGeneralSend .ws-ready-link input { display: block; min-height: 48px; padding: 12px 16px; border-radius: 12px; background: #fffaf0; color: #24352a; border: 1px solid #d9dfc7; }
#wsGeneralSend .ws-send-copy { grid-column: 2; grid-row: 1; align-self: center; white-space: normal; }
#view-dashboard #wsGeneralSend [data-ws-general-link-status] { grid-column: 1 / -1; margin: 0; color: #24352a; overflow-wrap: anywhere; white-space: normal; line-height: 1.5; }
#wsGeneralSend [data-ws-general-link-status]:empty { display: none; }
@media (max-width: 700px) {
  #wsGeneralSend .ws-send-link-card { grid-template-columns: minmax(0, 1fr); }
  #wsGeneralSend .ws-send-copy { grid-column: 1; width: 100%; }
}

/* Keep every guest invitation choice within its step as the catalog grows. */
.ws-person .ws-send-surface-step .ws-send-opts {
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 14px 12px;
  padding: 6px;
  overflow: visible;
  scroll-snap-type: none;
}

/* Guest cards no longer expose the legacy household assignment control. */
#view-dashboard .ws-send-house,
#view-dashboard .ws-person-tools .is-household-select { display: none !important; }

/* Compact visibility switches; preserve a 44px clickable label. */
#view-dashboard .ws-story-switch { min-height:44px; justify-content:space-between; }
#view-dashboard .ws-story-switch input[type="checkbox"] {
  flex:0 0 44px !important; width:44px !important; min-width:44px !important; max-width:44px !important;
  height:26px !important; min-height:26px !important; padding:0 !important; margin:0;
  appearance:none; border-radius:999px; background:#a6aaa0; border:1px solid #747b70; box-shadow:none;
}
#view-dashboard .ws-story-switch input[type="checkbox"]:checked { background:#2d4933; border-color:#2d4933; }
#view-dashboard .ws-story-switch input[type="checkbox"]:focus-visible { outline:2px solid #2d4933; outline-offset:3px; }

/* Compact invitation collection: two rows, shared website and letter controls. */
#wsGeneralSend { padding: clamp(16px,2vw,24px); background: linear-gradient(125deg,#fff7e9e8,#f5dfd2cf,#e3e8d6dc); border: 1px solid #ffffffc9; border-radius: 24px; }
#wsGeneralSend .ws-general-send-head { margin-bottom: 18px; }
#wsGeneralSend .ws-general-send-head h2 { font-size: clamp(28px,3vw,38px); margin: 6px 0; }
#wsGeneralSend .ws-send-panel-k { display: none; }
#wsGeneralSend .ws-general-send-head > p { max-width: 65ch; line-height: 1.5; margin-top: 8px; }
#wsGeneralSend .ws-general-send-flow { grid-template-columns: minmax(160px,.55fr) minmax(0,2fr); gap: 14px; }
#wsGeneralSend .ws-send-step { padding: 16px; gap: 14px; background: #fffaf080; border-color: #ffffffc9; border-radius: 18px; }
#wsGeneralSend .ws-send-step-number { display: none; }
#wsGeneralSend .ws-send-k { font-size: 22px; }
#wsGeneralSend .ws-send-intro-card { gap: 12px; }
#wsGeneralSend .ws-send-intro-poster { height: 100px; background: transparent; }
#wsGeneralSend .ws-send-opts { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
#wsGeneralSend .ws-send-opt-ring { height: 120px; aspect-ratio: auto; }
#wsGeneralSend .ws-send-opt { min-height: 44px; gap: 6px; }
#wsGeneralSend .ws-send-opt-code { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
#wsGeneralSend .ws-send-link-step { background: #fffaf09c; color: #24352a; }
#wsGeneralSend .ws-send-link-step > .ws-send-step-head { display: none; }
#wsGeneralSend .ws-send-link-summary,
#wsGeneralSend .ws-send-link-summary small,
#wsGeneralSend .ws-send-link-summary strong { color: #24352a !important; }
#wsGeneralSend .ws-send-copy { min-height: 44px; padding: 12px 20px; background: var(--forest,#24352a); color: #fff8ed; white-space: normal; }
#wsGeneralSend [data-ws-general-link-status]:empty { display: none; }
#wsGeneralSend .ws-ready-link { grid-column: 1/-1; }
#wsGeneralSend .ws-send-opt:focus-visible,
.fw-design-card:focus-visible { outline: 2px solid var(--forest,#24352a); outline-offset: 4px; }
.fw-design-collection .fw-design-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.fw-design-collection .fw-design-art { height: clamp(96px,15vh,150px); aspect-ratio: auto; padding: 6px; }
.fw-design-collection .fw-design-card-copy { padding-top: 8px; gap: 3px; }
.fw-design-collection .fw-design-card-copy strong { font-size: 21px; }
.fw-design-collection .fw-design-card-copy > span,
.fw-design-collection .fw-collection-foot { display: none; }
.fw-design-collection .fw-dialog-heading h2 { font-size: clamp(28px,3vw,38px); }
@media(max-width:700px) {
  #wsGeneralSend .ws-general-send-flow { grid-template-columns: minmax(0,1fr); }
  #wsGeneralSend .ws-send-intro-card { grid-template-columns: 60px minmax(0,1fr); align-items: center; }
  #wsGeneralSend .ws-send-intro-poster { width: 60px; height: 60px; }
  #wsGeneralSend .ws-send-opts,
  .fw-design-collection .fw-design-grid { grid-template-columns: none; grid-template-rows: repeat(2,auto); grid-auto-flow: column; grid-auto-columns: minmax(112px,38%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 6px; }
  #wsGeneralSend .ws-send-opt,
  .fw-design-collection .fw-design-card { scroll-snap-align: start; }
  #wsGeneralSend .ws-send-link-card { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #wsGeneralSend .ws-send-copy { width: 100%; }
  .fw-design-collection .fw-design-art { height: 100px; }
}

/* Guest cards: one status, populated response details, no unused tools column. */
#wsGuestTable .ws-person {
  grid-template-columns: minmax(180px,.8fr) minmax(0,2fr);
  grid-template-areas: "who facts" "answers answers" "send send";
  gap: 16px; padding: 18px; align-items: start;
}
#wsGuestTable .ws-facts { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px 18px; align-items: start; }
#wsGuestTable .ws-fact { gap: 5px; align-content: start; }
#wsGuestTable .ws-fact-v { min-height: 0; align-items: start; }
#wsGuestTable .ws-name { min-height: 44px; font-size: 16px; padding: 8px 14px; }
#wsGuestTable .ws-mail { overflow-wrap: anywhere; }
#wsGuestTable .ws-rsvp-answers { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 12px 0; border: 0; border-top: 1px solid #ffffffb0; background: transparent; box-shadow: none; }
#wsGuestTable .ws-rsvp-k { flex-basis: 100%; }
#wsGuestTable .ws-rsvp-row { display: grid; grid-template-columns: auto; gap: 4px; max-width: 100%; overflow-wrap: anywhere; }
#wsGuestTable .ws-send-panel { padding: 14px; gap: 12px; border-radius: 16px; }
#wsGuestTable .ws-send-panel-head { margin: 0; }
#wsGuestTable .ws-send-panel-head h3 { margin: 0; font-size: 21px; }
#wsGuestTable .ws-send-flow { grid-template-columns: minmax(150px,.8fr) minmax(0,1.6fr) minmax(145px,.8fr); gap: 14px; }
#wsGuestTable .ws-send-flow-arrow, #wsGuestTable .ws-send-step-number, #wsGuestTable .ws-send-hint { display: none; }
#wsGuestTable .ws-send-step { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; gap: 8px; }
#wsGuestTable .ws-send-k { font-size: 12px; }
#wsGuestTable .ws-send-intro-card { grid-template-columns: 44px minmax(0,1fr); gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none; }
#wsGuestTable .ws-send-intro-poster { width: 44px; height: 54px; object-fit: contain; }
#wsGuestTable .ws-send-opts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 4px; }
#wsGuestTable .ws-send-opt { width: 100%; height: auto; min-height: 44px; gap: 4px; }
#wsGuestTable .ws-send-opt-ring { width: 100%; height: 52px; }
#wsGuestTable .ws-send-opt-code { height: auto; font-size: 10px; letter-spacing: 0; }
#wsGuestTable .ws-send-link-card { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 8px; }
#wsGuestTable .ws-send-copy { min-height: 44px; padding: 10px 16px; white-space: normal; }
#wsGuestTable .ws-send-actions { margin: 0; padding: 0; }
#wsGuestTable .ws-send-remove { min-height: 44px; }
#wsGuestTable .desk-select-trigger { min-height: 44px; padding: 8px 12px; font-size: 13px; }
@media(max-width:800px) {
  #wsGuestTable .ws-person { grid-template-columns: minmax(0,1fr); grid-template-areas: "who" "facts" "answers" "send"; padding: 14px; }
  #wsGuestTable .ws-send-flow { grid-template-columns: minmax(0,1fr); }
  #wsGuestTable .ws-send-link-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}

/* Keep artwork and selected outlines inset within each invitation choice. */
#wsGuestTable .ws-send-opt,
#wsGeneralSend .ws-send-opt {
  box-sizing: border-box; min-width: 0; max-width: 100%;
  padding: 10px 10px 8px; border-radius: 18px; gap: 8px;
}
#wsGuestTable .ws-send-opt-ring,
#wsGeneralSend .ws-send-opt-ring {
  box-sizing: border-box; flex-shrink: 0; min-width: 0; max-width: 100%;
  border-radius: 12px; overflow: hidden;
}
#wsGuestTable .ws-send-opt img,
#wsGeneralSend .ws-send-opt img {
  box-sizing: border-box; display: block; max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center;
}
#wsGuestTable .ws-send-opt.is-on .ws-send-opt-ring,
#wsGeneralSend .ws-send-opt.is-on .ws-send-opt-ring { outline-offset: 2px; }
#wsGuestTable .ws-send-opt-code,
#wsGeneralSend .ws-send-opt-code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* The Opening select beside a guest's designs (customer report 2026-09-25,
   "cái nút này"). The card was a 44px poster track plus the select. An intro
   without a poster leaves its <img> [hidden], so auto-placement dropped the
   select into the 44px track while the trigger's own padding kept the white
   button 62px wide: the button spilled out of its green ring (a "C" behind a
   white circle), and align-items:center floated it halfway down the design
   grid. The select now always takes the last track, the poster track goes
   when there is no poster, the select wraps under the poster when the column
   is narrow, and the card sits right under its heading.
   The desk marks a posterless card .is-posterless (introCardClass); :has()
   is only the backup, in its own rule so a WebView without :has() never
   drops the class rule with it. */
.ws-send-intro-card > .desk-select { grid-column: -2 / -1; }
.ws-send-intro-card.is-posterless,
#wsGeneralSend .ws-send-intro-card.is-posterless { grid-template-columns: minmax(0, 1fr); }
.ws-send-intro-card:has(> .ws-send-intro-poster[hidden]) { grid-template-columns: minmax(0, 1fr); }
#wsGuestTable .ws-send-intro-card { display: flex; flex-wrap: wrap; align-items: center; align-self: start; }
#wsGuestTable .ws-send-intro-poster { flex: 0 0 44px; }
#wsGuestTable .ws-send-intro-card > .desk-select { flex: 1 1 128px; min-width: min(100%, 128px); }
/* Tiles wide enough for their names: "WEBSIT E" broke mid-word at 1024. */
#wsGuestTable .ws-send-opts { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
#wsGuestTable .ws-send-opt-code { overflow-wrap: break-word; }
/* When each guest link was made, beside the link it dates. */
.ws-link-created,
.dash-link-created { color: color-mix(in srgb, var(--ink) 66%, transparent); font-size: 0.78rem; line-height: 1.4; }
.dash-link-created { flex-basis: 100%; }
#wsGuestTable .ws-recipient-link .ws-link-created { margin-right: auto; }
#wsGeneralSend .ws-invitation-result .ws-link-created { display: block; margin-top: 10px; }

/* Shared link completion bar: summary and action share one compact row. */
#wsGeneralSend .ws-send-link-step { min-height: 0; height: auto; padding: 16px 20px; gap: 0; }
#wsGeneralSend .ws-send-link-card { height: auto; min-height: 0; align-content: start; align-items: center; gap: 12px 20px; }
#wsGeneralSend .ws-send-link-summary strong { white-space: normal; font-size: 15px; }
#wsGeneralSend .ws-send-copy { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; width: auto; min-height: 44px; margin: 0; padding: 12px 20px; }
#wsGeneralSend .ws-send-copy span { margin: 0; display: inline; }
@media(max-width:700px) {
  #wsGeneralSend .ws-send-link-step { padding: 16px; }
  #wsGeneralSend .ws-send-copy { grid-column: 1; grid-row: 2; width: 100%; }
  #wsGeneralSend .ws-ready-link { grid-row: 3; }
}

/* Guest workspace uses one glass surface; sections are separated by spacing. */
#view-dashboard .dash-sheet[data-pane="guests"] { row-gap: 16px; align-content: start; }
#view-dashboard [data-pane="guests"] > .ws-head { align-items: center; margin: 0; }
#view-dashboard [data-pane="guests"] > .ws-head .kicker { display: none; }
#view-dashboard [data-pane="guests"] > .ws-head h1 { margin: 0; font-size: clamp(30px,3vw,42px); }
#view-dashboard #wsSharedFacts { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#wsSharedFacts .ws-shared-project { grid-template-columns: minmax(0,1fr) auto; padding: 0 0 18px; gap: 12px 20px; }
#wsSharedFacts .ws-shared-mark,
#wsSharedFacts .ws-shared-copy > .kicker,
#wsSharedFacts .ws-shared-note { display: none; }
#wsSharedFacts .ws-shared-names { margin: 0 0 6px; font-size: 26px; line-height: 1.2; }
#wsSharedFacts .ws-shared-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
#wsSharedFacts .ws-shared-chip { padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; font-size: 13px; }
#wsSharedFacts .ws-shared-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
#wsSharedFacts .ws-shared-actions .btn { width: auto; min-height: 44px; padding: 10px 16px; font-size: 13px; }
#view-dashboard #wsSharedFacts #wsGeneralSend { padding: 18px 0 0; border: 0; border-top: 1px solid #ffffffa6; border-radius: 0; background: transparent; box-shadow: none; gap: 12px; }
#wsSharedFacts #wsGeneralSend .ws-general-send-head { margin: 0; }
#wsSharedFacts #wsGeneralSend .ws-general-send-head h2 { font-size: 25px; margin: 0; }
#wsSharedFacts #wsGeneralSend .ws-general-send-head > p { margin-top: 6px; font-size: 13px; max-width: 70ch; }
#wsSharedFacts #wsGeneralSend .ws-send-step { padding: 12px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#wsSharedFacts #wsGeneralSend .ws-send-k { font: 600 13px/1.4 var(--sans); }
#wsSharedFacts #wsGeneralSend .ws-send-hint { display: none; }
#wsSharedFacts #wsGeneralSend .ws-send-link-step { border-top: 1px solid #ffffffa6; padding: 16px 0 0; }
@media(max-width:700px) {
  #wsSharedFacts .ws-shared-project { grid-template-columns: minmax(0,1fr); }
  #wsSharedFacts .ws-shared-actions { justify-content: flex-start; }
}

/* Home follows the compact guest workspace: two useful overview columns. */
#view-dashboard .dash-pane[data-pane="home"] { gap: 16px; align-content: start; }
#view-dashboard [data-pane="home"] .dash-hero { display: block; padding: 22px; min-height: 0; border-radius: 22px; }
#view-dashboard [data-pane="home"] .dash-hero-photo { display: none; }
#view-dashboard [data-pane="home"] .dash-hero-copy { padding: 0; gap: 12px; }
#view-dashboard [data-pane="home"] .dash-hero-copy h1 { margin: 0; font-size: clamp(32px,4vw,46px); }
#view-dashboard [data-pane="home"] .dash-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
#view-dashboard [data-pane="home"] .dash-facts p { margin: 0; }
#view-dashboard [data-pane="home"] .dash-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
#view-dashboard [data-pane="home"] .dash-card { min-width: 0; padding: 20px; gap: 12px; border-radius: 22px; }
#view-dashboard [data-pane="home"] .dash-card p { margin: 0; }
#view-dashboard [data-pane="home"] .dash-card h2 { font-size: 26px; }
#view-dashboard [data-pane="home"] .dash-counts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#view-dashboard [data-pane="home"] .dash-path-url { overflow-wrap: anywhere; }
#view-dashboard [data-pane="home"] .dash-checklist { padding: 12px 0; border: 0; background: transparent; box-shadow: none; }
#view-dashboard [data-pane="home"] .dash-checklist-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 0; list-style: none; }
#view-dashboard [data-pane="home"] .dash-checklist-list li { display: grid; gap: 4px; padding: 0; background: transparent; border: 0; box-shadow: none; }
#view-dashboard [data-pane="home"] .dash-checklist-list a { display: inline-flex; align-items: center; min-height: 44px; }
#view-dashboard [data-pane="home"] .dash-checklist-list span { font-size: 12px; }
#view-dashboard [data-pane="home"] .dash-setup { padding: 16px 20px; }
#view-dashboard [data-pane="home"] .dash-setup h2 { font-size: 22px; margin: 6px 0 12px; }
#view-dashboard [data-pane="home"] .dash-invitation-tracking { max-height: none; height: auto; overflow: visible; }
@media(max-width:700px) {
  #view-dashboard [data-pane="home"] .dash-grid { grid-template-columns: minmax(0,1fr); }
  #view-dashboard [data-pane="home"] .dash-checklist-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #view-dashboard [data-pane="home"] .dash-card, #view-dashboard [data-pane="home"] .dash-hero { padding: 16px; }
}

/* Two opening choices; playback appears only after a choice is pressed. */
#view-dashboard [data-pane="intro"] .ws-choice-head { padding: 0; background: transparent; border: 0; box-shadow: none; margin-bottom: 18px; }
#view-dashboard [data-pane="intro"] .ws-choice-head h1 { font-size: clamp(30px,4vw,42px); margin: 8px 0; }
#view-dashboard [data-pane="intro"] .ws-intro-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
#view-dashboard #wsIntroCatalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; width: 100%; }
#view-dashboard #wsIntroCatalog .ws-intro-option { min-width: 0; padding: 12px; }
#view-dashboard #wsIntroCatalog .ws-intro-option img { width: 100%; height: clamp(160px,32vh,300px); object-fit: contain; }
#view-dashboard #wsIntroPreview[hidden] { display: none !important; }
#view-dashboard #wsIntroPreview { width: 100%; min-width: 0; position: static; }
#view-dashboard #wsIntroPreview .ws-choice-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Clearer Home glass: preserve garden detail without saturated frost. */
#view-dashboard .dash-pane[data-pane="home"] {
  --dash-blur: blur(2px);
  --dash-vellum: rgba(255,249,237,.64);
  --dash-glass: linear-gradient(135deg,rgba(255,250,240,.64),rgba(255,250,240,.48));
}
#view-dashboard [data-pane="home"] .dash-setup,
#view-dashboard [data-pane="home"] .dash-hero,
#view-dashboard [data-pane="home"] .dash-card,
#view-dashboard [data-pane="home"] .dash-checklist {
  background: rgba(255,249,237,.64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 4px 14px #263c2d0a;
}
#view-dashboard [data-pane="home"] .dash-checklist { padding: 14px 18px; border-radius: 18px; }
#view-dashboard [data-pane="home"] .dash-facts p,
#view-dashboard [data-pane="home"] .dash-counts p {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border: 0; padding: 0;
}

/* Intro panels share Home's clear ivory glass, with contained text. */
#view-dashboard [data-pane="intro"] :is(.ws-choice-head,.ws-intro-option,.ws-intro-preview) {
  box-sizing: border-box; min-width: 0; max-width: 100%;
  background: transparent; box-shadow: inset 0 1px 0 #ffffffb3,0 4px 14px #263c2d0a;
}
#view-dashboard [data-pane="intro"] :is(.ws-choice-head,.ws-intro-option,.ws-intro-preview)::before {
  background: rgba(255,249,237,.64); background-image: none;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: none;
}
#view-dashboard [data-pane="intro"] .ws-choice-head { padding: 20px 24px; border: 1px solid #ffffffb3; }
#view-dashboard [data-pane="intro"] .ws-choice-head > p { margin: 0; }
#view-dashboard [data-pane="intro"] :is(h1,h2,strong,small,p,.ws-intro-option-copy) {
  min-width: 0; max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere;
}
#view-dashboard #wsIntroCatalog .ws-intro-option-copy { padding: 14px 8px 10px; }
@media(max-width:600px) {
  #view-dashboard [data-pane="intro"] .ws-choice-head { padding: 16px; }
  #view-dashboard #wsIntroCatalog { gap: 12px; }
  #view-dashboard #wsIntroCatalog .ws-intro-option { padding: 8px; }
  #view-dashboard #wsIntroCatalog .ws-intro-option-copy { padding: 12px 4px 8px; }
}

/* Guest & Send and Settings match Home's neutral, lightly frosted glass. */
#view-dashboard .dash-pane:is([data-pane="guests"],[data-pane="settings"]) {
  --dash-blur: blur(2px);
  --dash-vellum: rgba(255,249,237,.64);
  --dash-glass: linear-gradient(135deg,rgba(255,250,240,.64),rgba(255,250,240,.48));
  --dash-frost: rgba(255,249,237,.2);
  --dash-drop: 0 4px 14px #263c2d0a;
}
#view-dashboard .dash-sheet:is([data-pane="guests"],[data-pane="settings"])::before {
  background: rgba(255,249,237,.64); background-image: none;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 0 #ffffffb3;
}
#view-dashboard .dash-pane:is([data-pane="guests"],[data-pane="settings"]) :is(.ws-person,.ws-send-panel,.ws-stats,.ws-account-card) {
  background: rgba(255,249,237,.2); background-image: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 #ffffff80;
}

/* Intro-only modal stays over the picker and adapts to the viewing device.
   Layout and material sit on the un-gated selector on purpose: dialog.close()
   removes [open] the instant it is called, so anything scoped to [open] would
   snap back to the in-flow picker card halfway through the dismiss. Only the
   motion state below differs between the open and closed styles. */
#view-dashboard #wsIntroPreview:not([open]) { display: none; }
#view-dashboard #wsIntroPreview {
  position: fixed; inset: 0; margin: auto; box-sizing: border-box;
  width: min(960px,calc(100vw - 32px)); max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px); overflow: auto;
  padding: 20px; display: grid; gap: 12px;
  background: #fff9edf5; color: #24352a; border: 1px solid #fff; border-radius: 22px;
}
#wsIntroPreview::backdrop { background: #17251dc2; }

/* One motion, in and out.
   A native dialog leaves the top layer the moment close() runs, which is why
   this surface used to vanish with no dismiss. Transitioning `display` and
   `overlay` with `transition-behavior: allow-discrete` keeps the card and its
   backdrop painted until the fade finishes; @starting-style supplies the
   matching "from" frame so the entrance is the same move reversed.
   Durations are the house desk tokens: 280ms in, 210ms out. */
#view-dashboard #wsIntroPreview,
#view-dashboard #wsIntroPreview::backdrop {
  /* ::backdrop only inherits from the dialog in newer engines, so the desk
     duration token carries its literal fallback here.
     The exit curve is deliberately not --desk-ease-in: that is easeInCirc,
     shaped for pane slides that leave the viewport, and on a fade it holds the
     card fully opaque for most of the 210ms and then blinks out. An even
     curve lets the card recede the whole way. */
  transition-property: opacity, scale, translate, display, overlay;
  transition-duration: var(--desk-exit, 210ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  transition-behavior: allow-discrete;
}
#view-dashboard #wsIntroPreview[open],
#view-dashboard #wsIntroPreview[open]::backdrop {
  transition-duration: var(--desk-enter, 280ms);
  transition-timing-function: var(--desk-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Closed / exit state. */
#view-dashboard #wsIntroPreview { opacity: 0; scale: .97; translate: 0 10px; }
#view-dashboard #wsIntroPreview::backdrop { opacity: 0; }
/* Open state. */
#view-dashboard #wsIntroPreview[open] { opacity: 1; scale: 1; translate: 0 0; }
#view-dashboard #wsIntroPreview[open]::backdrop { opacity: 1; }
/* Entrance "from" frame, applied only on the first style pass after open. */
@starting-style {
  #view-dashboard #wsIntroPreview[open] { opacity: 0; scale: .97; translate: 0 10px; }
  #view-dashboard #wsIntroPreview[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* No motion: the card and backdrop swap state in one frame. `transition: none`
     also clears transition-behavior, so display flips discretely as before. */
  #view-dashboard #wsIntroPreview,
  #view-dashboard #wsIntroPreview::backdrop,
  #view-dashboard #wsIntroPreview[open],
  #view-dashboard #wsIntroPreview[open]::backdrop {
    transition: none;
    scale: 1;
    translate: 0 0;
  }
  #view-dashboard #wsIntroPreview[open],
  #view-dashboard #wsIntroPreview[open]::backdrop { opacity: 1; }
}
#view-dashboard #wsIntroPreview .ws-intro-preview-head h2 { font-size: 25px; margin: 4px 0; }
#view-dashboard #wsIntroPreview .ws-intro-preview-head p { margin: 0; }
#view-dashboard #wsIntroPreview #wsIntroPreviewStage {
  position: relative; width: min(100%,calc(58dvh * 1.6)); height: auto;
  aspect-ratio: 16/10; min-height: 0; max-height: none; margin: 0 auto;
}
#view-dashboard #wsIntroPreview #wsIntroFrame,
#view-dashboard #wsIntroPreview #wsIntroPoster {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  border: 0; object-fit: contain;
}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait) {
  #view-dashboard #wsIntroPreview #wsIntroPreviewStage { aspect-ratio: 3/4; width: min(100%,calc(58dvh * .75)); }
}
@media(max-width:600px) {
  #view-dashboard #wsIntroPreview[open] { padding: 14px; }
  #view-dashboard #wsIntroPreview #wsIntroPreviewStage { aspect-ratio: 9/16; width: min(100%,calc(58dvh * .5625)); }
}

/* Large, frosted intro preview; leave room for playback controls. */
#view-dashboard #wsIntroPreview[open] {
  width: min(1440px,calc(100vw - 32px));
  background: rgba(255,249,237,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
#wsIntroPreview::backdrop { background: #17251d73; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#view-dashboard #wsIntroPreview #wsIntroPreviewStage { width: min(100%,calc(68dvh * 1.6)); }
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait) {
  #view-dashboard #wsIntroPreview #wsIntroPreviewStage { width: min(100%,calc(64dvh * .75)); }
}
@media(max-width:600px) {
  #view-dashboard #wsIntroPreview #wsIntroPreviewStage { width: min(100%,calc(62dvh * .5625)); }
}

/* Dark green section dividers remain legible over the garden glass. */
#view-dashboard { --section-divider: #2d4933; }
#view-dashboard #wsSharedFacts #wsGeneralSend,
#view-dashboard #wsSharedFacts #wsGeneralSend .ws-send-link-step,
#view-dashboard #wsGuestTable .ws-rsvp-answers,
#view-dashboard .ws-rsvp-sync-summary,
#view-dashboard .ws-group td,
#view-dashboard .ws-create-section { border-top-color: var(--section-divider); }
#view-dashboard .dash-list li,
#view-dashboard .dash-event-preview li { border-bottom-color: var(--section-divider); }
#view-dashboard hr { border: 0; border-top: 1px solid var(--section-divider); }

/* Compact dashboard toolbar after removing workspace search. */
#view-dashboard .dash-top .dash-unlock { margin-left: auto; }
@media(max-width:719px) {
  #view-dashboard .dash-top { grid-template-columns: 44px minmax(0,1fr) 44px; }
  #view-dashboard #dashAvatar { grid-column: 3; }
}

/* Signed-in account: compact project summary and readable ownership rows. */
body[data-signed-in="1"] #view-account .auth-hero { max-width: 1100px; padding: 20px 24px; margin-bottom: 20px; background: rgba(255,249,237,.64); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
body[data-signed-in="1"] #view-account .auth-hero h1 { font-size: clamp(32px,4vw,44px); margin: 8px 0; }
body[data-signed-in="1"] #view-account .auth-hero p { margin: 0; }
body[data-signed-in="1"] #view-account .auth-panel { display: grid; grid-template-columns: minmax(0,1fr); max-width: 1100px; background: rgba(255,249,237,.76); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
body[data-signed-in="1"] #view-account .auth-copy { min-height: 0; padding: 24px; background: transparent; border: 0; border-bottom: 1px solid #2d4933; }
body[data-signed-in="1"] #view-account .auth-copy::before,
body[data-signed-in="1"] #view-account .auth-copy::after { display: none; }
body[data-signed-in="1"] #view-account #projectPitch { width: 100%; max-width: none; }
body[data-signed-in="1"] #view-account #projectPitch h2 { font-size: clamp(28px,4vw,38px); margin: 8px 0; }
body[data-signed-in="1"] #view-account .auth-card { min-width: 0; padding: 24px; background: transparent; border: 0; }
body[data-signed-in="1"] #view-account .auth-brand { display: none; }
body[data-signed-in="1"] #view-account .project-owned-card { padding: 16px 0; border: 0; border-top: 1px solid #2d4933; border-radius: 0; background: transparent; box-shadow: none; }
body[data-signed-in="1"] #view-account .project-letter-stamps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; padding: 0; }
body[data-signed-in="1"] #view-account .project-letter-stamps li { min-width: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #2d49334d; background: transparent; box-shadow: none; border-radius: 0; }
body[data-signed-in="1"] #view-account .project-letter-stamp-when { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 4px 0 0; }
body[data-signed-in="1"] #view-account .project-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
body[data-signed-in="1"] #view-account :is(p,strong,a,button) { overflow-wrap: anywhere; max-width: 100%; }
@media(max-width:600px) {
 body[data-signed-in="1"] #view-account :is(.auth-hero,.auth-copy,.auth-card) { padding: 16px; }
 body[data-signed-in="1"] #view-account .project-letter-stamps { grid-template-columns: minmax(0,1fr); }
}

body[data-signed-in="1"] #view-account .project-letter-stamps[hidden] { display: none !important; }

/* One click to watch; a corner close control replaces the playback toolbar. */
#view-dashboard #wsIntroPreview { background: rgba(255,249,237,.44); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#view-dashboard #wsIntroPreview::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
#view-dashboard #wsIntroPreview .ws-intro-preview-head { padding-right: 52px; }
#view-dashboard #wsIntroPreview #wsCloseIntroPreview { position: absolute; top: 14px; right: 14px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font: 400 28px/1 var(--sans); background: #fff9edb3; color: #24352a; }


/* Account overview: one compact header and two balanced desktop columns. */
body[data-signed-in="1"] #view-account .auth-gate-veil {
  justify-content: flex-start; gap: 16px; padding-top: 24px;
}
body[data-signed-in="1"] #view-account .auth-hero {
  width: min(100%,1100px); margin-bottom: 0; padding: 18px 24px;
  text-align: left; border-color: #2d493366;
}
body[data-signed-in="1"] #view-account .auth-eyebrow { display: none; }
body[data-signed-in="1"] #view-account .auth-hero h1 { margin: 0 0 6px; font-size: clamp(30px,3vw,38px); }
body[data-signed-in="1"] #view-account .auth-lead { max-width: none; font-size: 15px; }
body[data-signed-in="1"] #view-account .auth-panel {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: 1px solid #2d493366;
  border-radius: 24px;
}
body[data-signed-in="1"] #view-account .auth-copy {
  justify-content: flex-start; border-bottom: 0; border-right: 1px solid #2d4933;
}
body[data-signed-in="1"] #view-account #projectLine { font-size: 15px; line-height: 1.6; margin: 14px 0 0; }
body[data-signed-in="1"] #view-account .auth-badge { background: transparent; border: 0; padding: 0; margin: 0 0 12px; }
body[data-signed-in="1"] #view-account .project-desk { gap: 10px; }
body[data-signed-in="1"] #view-account #authWho { font-weight: 600; }
body[data-signed-in="1"] #view-account #projectSaved { font-size: 13px; color: #4d5e50; }
body[data-signed-in="1"] #view-account .project-purchases { margin-top: 10px; padding-top: 16px; border-top: 1px solid #2d4933; }
body[data-signed-in="1"] #view-account .project-purchases-head { margin-bottom: 10px; }
body[data-signed-in="1"] #view-account .project-owned-card { padding: 12px 0; }
body[data-signed-in="1"] #view-account .project-owned-head strong { font-size: 20px; }
body[data-signed-in="1"] #view-account .project-designs { margin-top: 12px; }
body[data-signed-in="1"] #view-account .project-designs[hidden] { display: none; }
body[data-signed-in="1"] #view-account .project-designs summary { cursor: pointer; color: #2d4933; font-size: 14px; font-weight: 600; padding: 10px 0; min-height: 44px; }
body[data-signed-in="1"] #view-account .project-designs summary:focus-visible { outline: 2px solid #2d4933; outline-offset: 3px; border-radius: 4px; }
body[data-signed-in="1"] #view-account .project-purchase-note { font-size: 13px; line-height: 1.5; }
body[data-signed-in="1"] #view-account .auth-signout { justify-self: start; width: auto; margin-top: 8px; padding: 10px 0; min-height: 44px; border: 0; border-radius: 0; text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:800px) {
  body[data-signed-in="1"] #view-account .auth-panel { grid-template-columns: minmax(0,1fr); }
  body[data-signed-in="1"] #view-account .auth-copy { border-right: 0; border-bottom: 1px solid #2d4933; }
}
@media(max-width:600px) {
  body[data-signed-in="1"] #view-account .auth-hero { padding: 16px; }
  body[data-signed-in="1"] #view-account .auth-gate-veil { gap: 12px; padding-top: 16px; }
}

/* Anchor the close control directly to the dialog, outside the footer flow. */
#view-dashboard #wsIntroPreview > #wsCloseIntroPreview { inset: 14px 14px auto auto; margin: 0; transform: none; translate: none; }

/* Announce preview progress without a visible footer or extra grid row. */
#view-dashboard #wsIntroPreview #wsIntroStatus {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Account identity, invitation state and actions share a compact rhythm. */
body[data-signed-in="1"] #view-account .project-account-summary { display: grid; gap: 4px; min-width: 0; }
body[data-signed-in="1"] #view-account .project-account-summary .project-kicker { font-size: 11px; margin-bottom: 4px; }
body[data-signed-in="1"] #view-account #authWho { font-size: 20px; line-height: 1.3; }
body[data-signed-in="1"] #view-account #projectAccountEmail { font-size: 14px; color: #4d5e50; }
body[data-signed-in="1"] #view-account #projectAccountEmail:empty { display: none; }
body[data-signed-in="1"] #view-account .project-account-state { display: grid; gap: 4px; margin-top: 12px; padding-left: 12px; border-left: 2px solid #2d4933; }
body[data-signed-in="1"] #view-account #projectStatus { font-size: 14px; }
body[data-signed-in="1"] #view-account #projectSaved:empty { display: none; }
body[data-signed-in="1"] #view-account .project-purchases-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 0; }
body[data-signed-in="1"] #view-account .project-purchases-head .project-kicker { font-size: 11px; }
body[data-signed-in="1"] #view-account .project-purchases > .project-owned-card:first-of-type { border-top: 0; }
body[data-signed-in="1"] #view-account .project-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
body[data-signed-in="1"] #view-account .project-account-actions .btn { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 18px; margin: 0; font: 600 14px/1.4 var(--sans); text-decoration: none; letter-spacing: 0; text-transform: none; }
body[data-signed-in="1"] #view-account .project-account-actions .auth-signout { width: auto; border: 1px solid #2d493380; border-radius: 999px; background: #fff9ed80; color: #2d4933; }
body[data-signed-in="1"] #view-account .project-account-actions .auth-signout:hover { background: #fff9ed; border-color: #2d4933; }
body[data-signed-in="1"] #view-account .project-account-actions .btn:focus-visible { outline: 2px solid #2d4933; outline-offset: 3px; }

/* Owned designs: a full-width disclosure with a clear directional control. */
body[data-signed-in="1"] #view-account .project-designs summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; padding: 8px 12px; border: 1px solid #2d49335c;
  border-radius: 14px; background: #fff9ed66; min-height: 48px;
}
body[data-signed-in="1"] #view-account .project-designs summary::-webkit-details-marker { display: none; }
body[data-signed-in="1"] #view-account .project-designs summary::marker { content: ""; }
body[data-signed-in="1"] #view-account .project-designs summary:hover { background: #fff9edb3; border-color: #2d4933; }
body[data-signed-in="1"] #view-account .project-designs-chevron {
  display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 50%; background: #2d493312; color: #2d4933;
}
body[data-signed-in="1"] #view-account .project-designs-chevron svg { transition: transform 160ms ease; }
body[data-signed-in="1"] #view-account .project-designs[open] .project-designs-chevron svg { transform: rotate(180deg); }
@media(prefers-reduced-motion:reduce) {
  body[data-signed-in="1"] #view-account .project-designs-chevron svg { transition: none; }
}

/* Flowers account structure, adapted to the wedding collection. */
body[data-signed-in="1"] #view-account .project-account-summary {
  grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 14px;
  padding-bottom: 4px;
}
body[data-signed-in="1"] #view-account .project-account-avatar {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: #2d4933; color: #fff9ed;
  border: 1px solid #2d4933; font: 500 25px/1 var(--serif);
}
body[data-signed-in="1"] #view-account .project-account-identity { display: grid; gap: 3px; min-width: 0; }
body[data-signed-in="1"] #view-account .project-account-summary .project-kicker { margin: 0; font-size: 10px; letter-spacing: .1em; }
body[data-signed-in="1"] #view-account .project-account-identity #authWho { font-size: 20px; }
body[data-signed-in="1"] #view-account .project-purchases-head { padding-bottom: 12px; }
body[data-signed-in="1"] #view-account .project-owned-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media(max-width:400px) {
  body[data-signed-in="1"] #view-account .project-account-summary { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
  body[data-signed-in="1"] #view-account .project-account-avatar { width: 42px; height: 42px; font-size: 22px; }
}

/* Recipient setup belongs beside the final link action. */
#view-dashboard #wsGeneralSend .ws-send-recipient {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px; min-width: 0; margin: 8px 0; padding: 16px 0;
  border: 0; border-top: 1px solid #2d4933;
}
#view-dashboard #wsGeneralSend .ws-send-recipient legend { font-weight: 600; padding: 0 12px 0 0; }
#view-dashboard #wsGeneralSend .ws-send-recipient label { display: grid; gap: 6px; min-width: 0; font-size: 13px; }
#view-dashboard #wsGeneralSend .ws-send-recipient input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #2d493380; border-radius: 12px; background: #fff9edcc; color: #24352a; }
#view-dashboard #wsGeneralSend .ws-send-recipient .note { grid-column: 1 / -1; margin: 0; }
@media(max-width:600px) { #view-dashboard #wsGeneralSend .ws-send-recipient { grid-template-columns: minmax(0,1fr); } }

/* Keep the still visible while the browser prepares its first video frame. */
video.film-managed { opacity: 0; transition: opacity 180ms ease; }
video.film-managed.film-ready { opacity: 1; }
.view-home video.band-video.film-managed { animation: none; }
.ml-media-window { background-size: cover; background-position: center; }
@media (prefers-reduced-motion: reduce) {
  video.film-managed { transition: none; }
}

/* Keep each recipient and their RSVP together in a distinct, numbered card. */
#wsGuestTable .ws-numbered-person { grid-template-areas: "number number" "who facts" "answers answers" "send send"; border: 1px solid #34543b; border-radius: 20px; padding: clamp(16px, 2vw, 28px); margin-block: 18px; min-width: 0; background: rgba(255,248,234,.78); }
#wsGuestTable .ws-recipient-number { grid-area: number; margin: 0 0 12px; color: #34543b; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#wsGuestTable .ws-recipient-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#wsGuestTable .ws-recipient-options { margin-top: 16px; min-width: 0; }
#wsGuestTable .ws-recipient-options > summary { cursor: pointer; color: #34543b; padding-block: 12px; font-weight: 600; }
#wsGuestTable .ws-mail, #wsGuestTable .ws-name { overflow-wrap: anywhere; }

@media (max-width:800px) { #wsGuestTable .ws-numbered-person { grid-template-areas: "number" "who" "facts" "answers" "send"; } }

/* Landing artwork stays painted while scrolling; only foreground copy enters. */
body[data-view="home"], body[data-view="home"] #view-home { background-color: #f6eddf; }
.view-home > .band:not(.band-field) { background-color: #f6eddf; }
.view-home picture.band-video,
.view-home.is-view-in picture.band-video,
.view-home picture.band-video.is-block-in { animation: none; opacity: 1; }

/* Structural home layers never join the delayed foreground entrance. */
#view-home, #view-home.view.is-view-in, #view-home > .band,
#view-home > .band.is-block-in, #view-home .mobile-landing > section {
  animation: none; opacity: 1; transform: none;
}

/* Each letter section holds ~37 field rows of roughly even height, and only a
   screen's worth is ever visible. content-visibility lets the browser skip
   rendering the rest until it needs them; contain-intrinsic-size keeps the
   scrollbar honest by remembering each row's real height once measured. */
.dash-editor .ws-sec-body-pad > label {
  content-visibility: auto;
  contain-intrinsic-size: auto 74px;
}
/* Library pages share one frame size; the entire letter fits inside it. */
.shelf-card:where(:not(.ws-gift-stage *)) { min-width: 0; }
.shelf-showcase { min-width: 0; }
.shelf-reel {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 16px;
  background: #fffdf8;
}
.shelf-reel::-webkit-scrollbar { display: none; }
.shelf-slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 1440 / 2200;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
}
.shelf-slide-image {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.shelf-slide-image[hidden] { display: none; }
.shelf-slide-status {
  padding: 24px;
  text-align: center;
  color: #5a6d5c;
  font-size: .85rem;
}
.shelf-slide-status[hidden] { display: none; }
.shelf-slide-controls {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.shelf-slide-controls button,
.shelf-slide-dots button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  color: #1c3a28;
  background: transparent;
  cursor: pointer;
}
.shelf-slide-controls button { font-size: 1.8rem; border-radius: 50%; }
.shelf-slide-controls button:disabled { opacity: .3; cursor: default; }
.shelf-slide-caption { text-align: center; font-size: .76rem; color: #1c3a28; }
.shelf-slide-dots { display: flex; justify-content: center; }
.shelf-slide-dots button { display: grid; place-items: center; border-radius: 50%; }
.shelf-slide-dots button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1c3a28;
  opacity: .25;
}
.shelf-slide-dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.4); }
.shelf-reel:focus-visible,
.shelf-slide-controls button:focus-visible,
.shelf-slide-dots button:focus-visible { outline: 2px solid #1c3a28; outline-offset: 2px; }
.shelf-swipe-hint { margin: 0; text-align: center; color: #5a6d5c; font-size: .72rem; }

/* Library invitation categories */
.lib-categories {
  position: relative;
  z-index: 2;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: #fffdf8;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.lib-categories button {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.lib-categories button[aria-selected="true"] { background: var(--ink); color: #fffdf8; }
.lib-categories button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#lib-wedding-panel { position: relative; z-index: 2; }
#lib-wedding-panel[hidden], #lib-card-panel[hidden] { display: none; }
.lib-card-panel {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 16px auto 64px;
  padding: 64px 28px;
  background: #fffdf8;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 12px 40px rgb(16 12 10 / 8%);
}
.lib-card-panel h3 { font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; margin: 16px 0; }
.lib-card-panel p { line-height: 1.6; }
.lib-card-coming { margin-top: 32px; font-size: .85rem; opacity: .65; }
@media (max-width: 480px) { .lib-categories button { padding-inline: 14px; font-size: .8rem; } }

/* Invitation cards share the wedding shelf, with an editor one step inside. */
#lib-card-panel { max-width:none;margin:0;padding:0;background:transparent;box-shadow:none;text-align:initial; }
#card-gallery[hidden],#card-editor[hidden],#card-gallery-status[hidden],#card-gallery-retry[hidden] { display:none; }
.card-gallery-note { text-align:center;padding:0 20px;margin:0 auto 28px;max-width:600px;color:var(--ink); }
#card-gallery-status { text-align:center; }
#card-gallery-retry { display:block;margin:20px auto; }
.invitation-design-cover { display:block;width:100%;border:0;padding:0;background:#fffdf8;aspect-ratio:4/5;border-radius:16px;overflow:hidden;cursor:pointer; }
.invitation-design-cover img { width:100%;height:100%;object-fit:contain;display:block; }
.invitation-design-cover:focus-visible { outline:3px solid var(--ink);outline-offset:4px; }
.invitation-design .shelf-actions { grid-template-columns:1fr; }
#card-editor { max-width:1100px;margin:0 auto 48px; }
.card-editor-bar { display:flex;align-items:center;gap:24px;padding:16px;flex-wrap:wrap; }
#card-editor-title { margin:0;font-size:2rem; }
#card-editor-frame { display:block;width:100%;height:1100px;border:0;border-radius:18px;background:#f5f2ec; }
@media(max-width:700px){#card-editor-frame{height:1500px}.card-editor-bar{gap:12px} }

/* ── the first paint is the pane ─────────────────────────────────────────
   A direct /dashboard/<pane> address is named by the layout's view boot
   before the markup is parsed (data-dash-pane, with data-dash-pane-boot until
   studio.js paints). Until then the markup's own default, the home pane,
   stays off and the named pane shows, so the first paint is the pane the
   address asked for: no home pane, then a switch (Redmi, 2026-09-30). */
body[data-dash-pane-boot] .dash-pane[data-pane="home"] { display: none !important; }
/* The page ground under the desk from the first paint: the base html/body
   ground is the landing's dark green, which showed as a dark frame before the
   desk's own plate painted. */
html:has(> body[data-view="dashboard"]),
body[data-view="dashboard"] { background-color: var(--desk); }
/* No entrance for a pane that is already the first paint. */
html:not([data-hydrated]) body[data-dash-pane-boot] #view-dashboard { animation: none; }
body[data-dash-pane-boot][data-dash-pane="intro"] .dash-pane[data-pane="intro"],
body[data-dash-pane-boot][data-dash-pane="letter"] .dash-pane[data-pane="letter"],
body[data-dash-pane-boot][data-dash-pane="website"] .dash-pane[data-pane="website"],
body[data-dash-pane-boot][data-dash-pane="card"] .dash-pane[data-pane="card"],
body[data-dash-pane-boot][data-dash-pane="guests"] .dash-pane[data-pane="guests"],
body[data-dash-pane-boot][data-dash-pane="account"] .dash-pane[data-pane="account"],
body[data-dash-pane-boot][data-dash-pane="privacy"] .dash-pane[data-pane="privacy"],
body[data-dash-pane-boot][data-dash-pane="terms"] .dash-pane[data-pane="terms"],
body[data-dash-pane-boot][data-dash-pane="changelog"] .dash-pane[data-pane="changelog"],
body[data-dash-pane-boot][data-dash-pane="preview"] .dash-pane[data-pane="preview"],
body[data-dash-pane-boot][data-dash-pane="gifts"] .dash-pane[data-pane="gifts"],
body[data-dash-pane-boot][data-dash-pane="giftsMine"] .dash-pane[data-pane="giftsMine"],
body[data-dash-pane-boot][data-dash-pane="giftsBouquets"] .dash-pane[data-pane="giftsBouquets"] {
  display: grid !important;
}

/* ── the host's half of the desk curtain ────────────────────────────────────
   The framed compose app paints its own curtain in its very first frame. What
   it cannot cover is the moment before that: the iframe is mounted and has not
   loaded a byte, and the stage behind it is bare. So the host draws the same
   curtain over the mother container, and opens it on compose's own ready
   message — one curtain from the viewer's side, handed from host to frame
   without either one showing through.

   Same velvet, same easing, same reduced-motion rule as
   gift-compose/src/styles/desk-curtain.css. The plates are copies in this app's
   public folder: the two apps have separate builds, and a cross-build import
   would be a worse coupling than two files. */
.ws-gift-curtain {
  --gc-open: 1500ms;
  --gc-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --gc-open-ease: cubic-bezier(0.55, 0, 0.2, 1);
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: auto;
}
.ws-gift-curtain[data-state='opening'] { pointer-events: none; }
.ws-gift-curtain[hidden] { display: none; }

.ws-gift-curtain-stage {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 45%, #1b3a22 0%, #06120a 100%);
  opacity: 1;
  transition: opacity 500ms var(--gc-ease);
}
.ws-gift-curtain[data-state='opening'] .ws-gift-curtain-stage {
  opacity: 0;
  transition: opacity 1000ms var(--gc-open-ease) 300ms;
}

.ws-gift-curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  will-change: transform;
  transition: opacity 240ms var(--gc-ease);
}
/* The plates are <img>s (studio.js raiseGiftCurtain, app/studio-markup.ts),
   so the host can decode these very images before it shows them. The panels
   have no colour of their own: until the plates are decoded only the stage
   cover shows, and the drapes fade in over it. Never a plain curtain. */
.ws-gift-curtain-drape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.ws-gift-curtain[data-drapes='pending'] .ws-gift-curtain-panel { opacity: 0; }
.ws-gift-curtain-panel--left {
  left: 0;
  transform-origin: left top;
}
.ws-gift-curtain-panel--right {
  left: 50%;
  transform-origin: right top;
}
.ws-gift-curtain[data-state='opening'] .ws-gift-curtain-panel--left {
  animation: ws-gift-curtain-open-left var(--gc-open) var(--gc-open-ease) 120ms both;
}
.ws-gift-curtain[data-state='opening'] .ws-gift-curtain-panel--right {
  animation: ws-gift-curtain-open-right var(--gc-open) var(--gc-open-ease) 120ms both;
}
@keyframes ws-gift-curtain-open-left {
  0% { transform: none; }
  30% { transform: translateX(-16%) skewX(2.5deg) scaleX(0.97); }
  100% { transform: translateX(-106%) skewX(5deg) scaleX(0.86); }
}
@keyframes ws-gift-curtain-open-right {
  0% { transform: none; }
  30% { transform: translateX(16%) skewX(-2.5deg) scaleX(0.97); }
  100% { transform: translateX(106%) skewX(-5deg) scaleX(0.86); }
}

/* The quiet line, on the host's side of the handover. */
.ws-gift-curtain-note {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%) translateY(6px);
  margin: 0;
  max-width: min(80%, 30rem);
  padding: 0 1rem;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  font-style: italic;
  color: rgba(239, 227, 200, 0.82);
  text-shadow: 0 1px 10px rgba(6, 18, 10, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--gc-ease), transform 600ms var(--gc-ease);
}
.ws-gift-curtain[data-slow='1'] .ws-gift-curtain-note {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ws-gift-curtain[data-state='opening'] .ws-gift-curtain-note { opacity: 0; }

/* Reduced motion: the drapes do not travel, the curtain fades. The app-wide
   blanket rule above kills animations, so state has to read through opacity.
   This is the same narrow exception the rail and the shelves already carry. */
@media (prefers-reduced-motion: reduce) {
  .ws-gift-curtain .ws-gift-curtain-panel,
  .ws-gift-curtain[data-state] .ws-gift-curtain-panel {
    animation: none !important;
    transform: none !important;
    transition: opacity 240ms ease !important;
  }
  .ws-gift-curtain-stage,
  .ws-gift-curtain-note {
    transition: opacity 240ms ease !important;
  }
  .ws-gift-curtain[data-state='opening'] .ws-gift-curtain-panel,
  .ws-gift-curtain[data-state='opening'] .ws-gift-curtain-stage { opacity: 0; }
}

/* ── the shell holds still under a playing preview ─────────────────────────
   studio.js sets html[data-shell-hold] while a framed composer on a budget
   phone is playing a step preview. Every looping decoration in the shell
   pauses where it is (studio.js does it, so entrances still finish) and the
   glass stops blurring what is behind it; both come back the moment the
   preview stops. The preview itself is in its own document and is untouched. */
html[data-shell-hold] *,
html[data-shell-hold] *::before,
html[data-shell-hold] *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* The composer's frame (and the preview inside it) paints as part of this
   page: same-site frames share one renderer. Held, the stage is its own
   layout and paint boundary, so the gift's per-frame changes stop there. */
html[data-shell-hold] .ws-gift-stage { contain: layout paint; }

/* ── Digital gifts account ──────────────────────────────────────────────
   The Account pane on the gifts world: who is signed in, Blooming, the two
   shelves and sign out, in the desk's glass with the door's gold pill
   (see body[data-dash-world="gifts"] #view-account above and
   lib/gifts/styles/desk-signin.css). The wedding account (#projectDesk) is
   the wedding world's; on this side of the house it stays out of the way. */
body[data-dash-world="gifts"] #projectDesk { display: none !important; }
.gifts-account[hidden] { display: none !important; }
.gifts-account {
  display: grid;
  gap: 16px;
  max-width: 760px;
  /* The pane pads its header, not its body: line the cards up with the
     "Your account" heading above them. */
  margin: 16px 38px 32px;
}
@media (max-width: 720px) {
  .gifts-account { margin-inline: 16px; }
}
.gifts-account-who,
.gifts-account-blooming {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--dash-hair);
  border-radius: 22px;
  background-color: color-mix(in srgb, var(--paper) 46%, transparent);
  background-image:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  box-shadow: var(--dash-inset), var(--dash-drop);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.gifts-account-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid #1f3423;
  border-radius: 999px;
  background: #2d4a32;
  box-shadow: 0 3px 0 #1f3423;
  color: #F8F4EC;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.4rem;
}
.gifts-account-identity,
.gifts-account-blooming-copy { display: grid; gap: 2px; min-width: 0; }
.gifts-account-identity p,
.gifts-account-blooming-copy p { margin: 0; }
.gifts-account-kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.gifts-account-name {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.35rem;
  color: var(--ink);
}
.gifts-account-email,
.gifts-account-provider,
.gifts-account-status {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.gifts-account-status { color: var(--ink); }
.gifts-account-blooming { justify-content: space-between; flex-wrap: wrap; }
.gifts-account-gold {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid #1f3423;
  border-bottom: 4px solid #1f3423;
  border-radius: 999px;
  background: #2d4a32;
  box-shadow: 0 3px 0 #1f3423;
  color: #F8F4EC;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow var(--desk-hover) var(--desk-ease-out);
}
.gifts-account-gold:empty { display: none; }
@media (hover: hover) {
  .gifts-account-gold:hover { box-shadow: 0 3px 0 #1f3423, 0 8px 18px rgba(20, 36, 24, 0.24); }
}
.gifts-account-gold:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gifts-account-shelves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gifts-account-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 14px 20px;
  border: 1px solid var(--dash-hair);
  border-radius: 18px;
  background-color: color-mix(in srgb, var(--paper) 38%, transparent);
  background-image: var(--dash-glass);
  box-shadow: var(--dash-inset);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--desk-hover) var(--desk-ease-out);
}
.gifts-account-shelf::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
@media (hover: hover) {
  .gifts-account-shelf:hover { background-color: color-mix(in srgb, var(--paper) 62%, transparent); }
}
.gifts-account-shelf:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gifts-account-actions { display: flex; justify-content: flex-start; }
@media (max-width: 560px) {
  .gifts-account-shelves { grid-template-columns: 1fr; }
}

/* ── Wedding invites owned, and the account on the wedding world ──────────
   #giftsAccount now shows on both worlds. On the wedding world #projectDesk
   already says who is signed in, offers sign out and lays out the wedding
   collection, so those three step aside here and this adds Blooming and the
   gift shelves beneath it. */
body:not([data-dash-world="gifts"]) .gifts-account-who,
body:not([data-dash-world="gifts"]) .gifts-account-wedding,
body:not([data-dash-world="gifts"]) .gifts-account-actions { display: none; }
.gifts-account-wedding {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--dash-hair);
  border-radius: 22px;
  background-color: color-mix(in srgb, var(--paper) 46%, transparent);
  background-image:
    radial-gradient(160% 90% at 18% -40%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(185deg, rgba(255, 248, 236, 0.16) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 248, 236, 0.10) 100%);
  box-shadow: var(--dash-inset), var(--dash-drop);
  backdrop-filter: var(--dash-blur);
  -webkit-backdrop-filter: var(--dash-blur);
}
.gifts-account-wedding p { margin: 0; }
.gifts-account-wedding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gifts-account-manage {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
}
.gifts-account-manage:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.gifts-account-owned {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gifts-account-owned[hidden],
.gifts-account-empty[hidden],
.gifts-account-project[hidden] { display: none; }
.gifts-account-owned li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--dash-hair);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 40%, transparent);
}
.gifts-account-owned-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.1rem;
  color: var(--ink);
}
.gifts-account-owned-meta { color: var(--muted); font-size: 0.85rem; text-align: right; }
.gifts-account-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.gifts-account-project { color: var(--muted); font-size: 0.9rem; }

/* Settings merged into Guest & Send (owner, 2026-09-24): the old Settings
   pane now sits at the foot of the guests page as its own block. */
#view-dashboard .dash-settings-merged {
  display: grid;
  gap: 12px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--dash-hair);
  position: relative;
}
#view-dashboard .dash-settings-merged h2 {
  margin: 0;
  font-family: var(--serif, inherit);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
}

/* Inside the Flowers app wedding payment is hidden: no price, no Unlock or
   Pay, no checkout link (owner, 2026-09-29). app/layout.tsx sets the marker
   before the markup paints; lib/app-web-checkout.ts explains the rest. */
html[data-app-pay="hidden"] [data-wedding-price],
html[data-app-pay="hidden"] .wso {
  display: none !important;
}
/* Android in the app: the sheet only says where to unlock (no price or
   checkout), so it shows (owner, 2026-10-01). */
html[data-app-pay="hidden"] .wso.wso--app-notice {
  display: grid !important;
}

/* Budget GPUs with a live preview on screen: no backdrop blur anywhere on the
   page (StepLivePreview sets the attribute; Redmi 13: 13 -> 34 fps). */
html[data-preview-tier="low"] *,
html[data-preview-tier="low"] *::before,
html[data-preview-tier="low"] *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* With the blur off, a surface that relied on it to hide what is behind
   (the menu, the step bar, the preview's pill, the dark lock panels) gets a
   solid version of its own colour instead of turning see-through. */
html[data-preview-tier="low"] .dash-nav::before {
  background-color: color-mix(in srgb, var(--paper) 96%, transparent) !important;
}
html[data-preview-tier="low"] body.dash-dark .dash-nav::before {
  background-color: color-mix(in srgb, var(--dash-vellum) 60%, #141e1a) !important;
}
html[data-preview-tier="low"] .simple-gift-wizard-chrome,
html[data-preview-tier="low"] .step-live-preview__pill {
  background-color: rgba(248, 242, 231, 0.96) !important;
  background-image: none !important;
}
html[data-preview-tier="low"] [data-compose-theme="dark"] .simple-gift-wizard-chrome,
html[data-preview-tier="low"] [data-compose-theme="dark"] .step-live-preview__pill {
  background-color: rgba(20, 30, 26, 0.96) !important;
}
html[data-preview-tier="low"] .simple-gift-lock-panel {
  background: rgba(22, 32, 28, 0.92) !important;
}
html[data-preview-tier="low"] [data-compose-theme="light"] .simple-gift-lock-panel {
  background: rgba(var(--compose-panel-a-rgb, 255, 248, 238), 0.96) !important;
}

/* Background gallery: full previews outside the constrained letter editor rail. */
.ws-background-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#243423}
.ws-background-heading>span{font-size:12px;color:#586451}
.ws-background-launch{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:12px;border:1px solid #bac3b2;border-radius:16px;background:#fffdf7;color:#243423;cursor:pointer;font:inherit}
.ws-background-thumb{display:block;width:100px;aspect-ratio:4/3;flex-shrink:0;border-radius:9px;background:#eee5d4 center/cover}
.ws-background-launch strong{display:block;font-size:15px;line-height:1.4}
.ws-background-action{display:block;margin-top:8px;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.ws-background-gallery{box-sizing:border-box;width:min(940px,calc(100vw - 32px));max-height:85dvh;padding:0;border:1px solid #d6dbcf;border-radius:24px;background:#faf8f1;color:#243423;box-shadow:0 24px 100px #15211655;overflow:auto}
.ws-background-gallery::backdrop{background:#16221788;backdrop-filter:blur(5px)}
.ws-background-gallery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;position:sticky;top:0;z-index:1;background:#faf8f1;border-bottom:1px solid #dce0d5}
.ws-background-gallery-head h2{margin:0;font:500 28px/1.2 Georgia,serif;color:#243423}
.ws-background-gallery-head p{margin:8px 0 0;font:14px/1.5 sans-serif;color:#586451}
.ws-background-gallery-head button{width:40px;height:40px;flex-shrink:0;border:1px solid #c6cdbd;border-radius:50%;background:#fffdf7;color:#243423;cursor:pointer;font-size:18px}
.ws-background-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:24px}
.ws-background-choice{display:block;min-width:0;padding:5px;border:2px solid #d9ded2;border-radius:14px;background:#fffdf7;color:#243423;text-align:left;cursor:pointer;font:inherit;overflow:hidden}
.ws-background-choice:hover{border-color:#75866c}
.ws-background-choice[aria-pressed="true"]{border-color:#2f4b32;box-shadow:0 0 0 2px #2f4b3222;background:#edf2e8}
.ws-background-image{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;background:#eee5d4 center/cover}
.ws-background-label{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:8px 6px;font:500 14px/1.35 sans-serif}
.ws-background-check{visibility:hidden;flex-shrink:0;border-radius:50%;padding:3px 6px;background:#2f4b32;color:#fff}
.ws-background-choice[aria-pressed="true"] .ws-background-check{visibility:visible}
.ws-background-launch:focus-visible,.ws-background-choice:focus-visible,.ws-background-gallery-head button:focus-visible{outline:3px solid #617851;outline-offset:3px}
@media(max-width:600px){.ws-background-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}.ws-background-gallery-head{padding:18px}.ws-background-gallery-head h2{font-size:23px}.ws-background-label{font-size:13px}}

/* A miniature framed gallery makes the background-picker entry recognizable. */
.ws-background-collage{box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:112px;flex-shrink:0;padding:7px;border-radius:12px;background:#e9e5d8;transform:rotate(-3deg)}
.ws-background-collage>span{display:block;aspect-ratio:4/3;border:3px solid #fffdf7;border-radius:3px;background-position:center;background-size:cover;box-shadow:0 1px 3px #27342433}
.ws-background-collage>span:nth-child(2){transform:rotate(4deg)}
.ws-background-collage>span:nth-child(3){transform:rotate(-3deg)}