/*
  Always Celebrate
  Design brief
  - Audience: families and friends gathering photos, many of them not tech-confident, on phones.
  - Tone: warm, loud-in-a-good-way, handmade.
  - The one idea: a paper party. Pennant bunting across every page, polaroid photos, and "sticker" shapes
    with ink outlines and hard offset shadows. A host's colors repaint all of it.
  - Type: Fraunces (soft serif) for headlines, Figtree for everything you read or tap. Hosts can swap the headline face.
  - Motion: bunting sway, one floating motif, confetti when something good happens. All off for reduced motion.
  Color tokens (--bg, --ink, --p, --s, --a and friends) come from /theme/*.css, built per celebration in both light and dark.
*/

@font-face { font-family: 'Figtree'; src: url('/fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolagegrotesque.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/fonts/caveat.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fonts/cormorant.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
/* More lettering hosts can choose. Browsers only download the ones a page actually uses. Single-weight fonts cover every weight,
   so headlines never get a smudgy fake bold. Sources: Google Fonts (SIL Open Font License, or Apache 2.0 for Chewy and Permanent Marker). */
@font-face { font-family: 'Pacifico'; src: url('/fonts/pacifico.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lobster'; src: url('/fonts/lobster.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Dancing Script'; src: url('/fonts/dancingscript.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Great Vibes'; src: url('/fonts/greatvibes.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sacramento'; src: url('/fonts/sacramento.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/lora.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Abril Fatface'; src: url('/fonts/abrilfatface.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url('/fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('/fonts/comfortaa.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/fonts/quicksand.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Chewy'; src: url('/fonts/chewy.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url('/fonts/bungee.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Righteous'; src: url('/fonts/righteous.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amatic SC'; src: url('/fonts/amaticsc-400.woff2') format('woff2'); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amatic SC'; src: url('/fonts/amaticsc-700.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Patrick Hand'; src: url('/fonts/patrickhand.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('/fonts/permanentmarker.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Shadows Into Light'; src: url('/fonts/shadowsintolight.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Fallbacks only. /theme/*.css always supplies the real values for both light and dark. */
  --bg: #FFF8FB; --surface: #FFFCFD; --surface-2: #FFEDF2; --ink: #1D1A3A; --ink-soft: #4A4670; --line: #1D1A3A;
  --p: #FF3D6E; --p-ink: #1D1A3A; --p-text: #D6124A; --p-tint: #FFDCE5;
  --s: #FFC23D; --s-ink: #1D1A3A; --s-text: #8A6200;
  --a: #12B5CB; --a-ink: #1D1A3A; --a-text: #0B7686;
  --shadow: #1D1A3A;
  --ds: 1;

  --bad: #B3261E; --bad-ink: #fff; --ok: #1E7A3C;

  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  --bw: 2.5px;
  --r-sm: 10px; --r: 16px; --r-lg: 24px;
  --gutter: clamp(1rem, 4.5vw, 2.25rem);
  --measure: 62ch;

  --fs-0: clamp(1.0625rem, 1.02rem + .2vw, 1.1875rem);
  --fs-1: clamp(1.2rem, 1.12rem + .4vw, 1.4rem);
  --fs-2: clamp(1.45rem, 1.25rem + 1vw, 1.9rem);
  --fs-3: clamp(1.75rem, 1.4rem + 1.7vw, 2.6rem);
  --fs-4: clamp(2.1rem, 1.5rem + 3vw, 3.5rem);
  --fs-5: clamp(2.6rem, 1.5rem + 5.2vw, 5.4rem);

  --tabbar-h: 4.1rem;
  --guestbar-h: 4.7rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bad: #FF8A80; --bad-ink: #2a0a08; --ok: #7BD99A; }
}
:root[data-theme="dark"] { color-scheme: dark; --bad: #FF8A80; --bad-ink: #2a0a08; --ok: #7BD99A; }
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html[data-text="large"] { font-size: 125%; }
.icon-btn[aria-pressed="true"] { background: var(--s); color: var(--s-ink); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--s); color: var(--s-ink); }

img, svg { max-width: 100%; }
a { color: var(--p-text); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p + p { margin-top: .8em; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--a-text); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.offscreen { position: fixed; left: -9999px; top: 0; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.is-hidden { display: none !important; }
.no-print {}

.skip { position: absolute; left: .75rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--bg); padding: .7rem 1rem; border-radius: 10px; font-weight: 700; }
.skip:focus { top: .75rem; }

.icon { width: 1.3em; height: 1.3em; flex: none; vertical-align: -.25em; }

/* ---- Type ------------------------------------------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--fs-5) * var(--ds));
  line-height: 1.02;
  letter-spacing: var(--head-ls, -.015em);
  color: var(--head-c, inherit);
  text-wrap: balance;
}
.page-head .display, .dash-head .display, .form-intro .display { font-size: calc(var(--fs-4) * var(--ds)); }
.center-card .display { font-size: calc(var(--fs-3) * var(--ds)); }

.eyebrow {
  font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-text); margin-bottom: .75rem;
}
.lead { font-size: var(--fs-1); line-height: 1.45; max-width: 52ch; margin-top: 1.1rem; color: var(--ink); }
.hint { font-size: .92rem; color: var(--ink-soft); margin-top: .45rem; }
.fine { font-size: .95rem; color: var(--ink-soft); margin-top: 1.1rem; }
.optional { font-weight: 500; color: var(--ink-soft); }

.section-title {
  font-family: var(--font-display);
  font-size: calc(var(--fs-3) * var(--ds));
  line-height: 1.08;
  letter-spacing: var(--head-ls, -.01em);
  color: var(--head-c, inherit);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.section-title.sm { font-size: calc(var(--fs-1) * var(--ds)); margin-bottom: .7rem; }

/* ---- Frame: header, bunting, footer ------------------------------------------------------------ */

.motif-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.topbar, main, .footer, .tabbar { position: relative; z-index: 1; }

.topbar { padding-top: env(safe-area-inset-top); background: var(--bg); border-bottom: var(--bw) solid var(--line); }
.topbar-inner { max-width: 74rem; margin: 0 auto; padding: .7rem var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.brand img { border-radius: 9px; flex: none; }
.brand-word { text-transform: uppercase; font-weight: 800; letter-spacing: .01em; }
.brand-sub { color: var(--brand-celebrate, #9c2a74); }
html[data-theme="dark"] .brand-sub { color: #e46bb8; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .brand-sub { color: #e46bb8; } }
.mainnav { display: flex; gap: .1rem; margin-left: .25rem; }
.mainnav a { padding: .5rem .7rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 600; }
.mainnav a:hover { background: var(--surface-2); }
.mainnav a[aria-current="page"] { background: var(--p); color: var(--p-ink); box-shadow: inset 0 0 0 var(--bw) var(--line); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.inline-form { display: inline; margin: 0; }

.icon-btn {
  display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: var(--bw) solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
  transition: transform .12s ease-out;
}
.icon-btn:hover { transform: rotate(-8deg) scale(1.05); }
.icon-btn[aria-current="page"] { background: var(--s); color: var(--s-ink); }
.icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: inline; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .icon-sun { display: inline; }
  :root:not([data-theme="light"]) .icon-btn .icon-moon { display: none; }
}

.bunting { position: relative; z-index: 2; height: 34px; pointer-events: none; }
.bunting svg, .sheet-bunting svg { display: block; overflow: visible; }
.bunting-string { fill: none; stroke: var(--line); stroke-width: 2.5; }
.flag { stroke: var(--line); stroke-width: 2.5; stroke-linejoin: round; }
.flag.f1 { fill: var(--p); } .flag.f2 { fill: var(--s); } .flag.f3 { fill: var(--a); }
.flag-sway { transform-box: fill-box; transform-origin: 50% 0; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

main { flex: 1 0 auto; width: 100%; max-width: 74rem; margin: 0 auto; padding: 1.25rem var(--gutter) 4rem; }
main:focus { outline: none; }

.footer { border-top: var(--bw) solid var(--line); background: var(--bg); }
.footer-inner { max-width: 74rem; margin: 0 auto; padding: 1.4rem var(--gutter) calc(1.4rem + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: .95rem; color: var(--ink-soft); }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer a, .linklike { color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; cursor: pointer; }

.tabbar { display: none; }

.flash { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1.1rem; margin: 0 0 1.25rem; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); font-weight: 600; }
.flash .icon { margin-top: .15em; }
.flash-ok { background: var(--a); color: var(--a-ink); }
.flash-bad { background: var(--bad); color: var(--bad-ink); }
.flash-warn { background: var(--s); color: var(--s-ink); }

/* ---- Buttons ----------------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .6rem 1.2rem;
  font: 700 1rem/1.15 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: var(--bw) solid var(--line); border-radius: 14px; box-shadow: 0 calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow);
  transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(3px); box-shadow: 0 calc(1px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.btn-primary { background: var(--p); color: var(--p-ink); }
.btn-secondary { background: var(--s); color: var(--s-ink); }
.btn-quiet { background: transparent; box-shadow: none; }
.btn-quiet:hover { background: var(--surface-2); box-shadow: none; transform: none; }
.btn-quiet:active { transform: translateY(1px); box-shadow: none; }
.btn-danger { background: var(--bad); color: var(--bad-ink); }
.btn.danger { color: var(--bad); }
.btn-sm { min-height: 2.6rem; padding: .35rem .9rem; font-size: .95rem; border-radius: 12px; box-shadow: 0 calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.btn-lg { min-height: 3.5rem; padding: .8rem 1.6rem; font-size: 1.12rem; border-radius: 16px; }
.btn-xl { min-height: 4.5rem; padding: 1rem 1.75rem; font-size: 1.3rem; border-radius: 20px; box-shadow: 0 calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.1rem; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.link-arrow:hover { text-decoration: underline; }

/* ---- Cards, forms ------------------------------------------------------------------------------- */

.card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: calc(5px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow); padding: clamp(1.1rem, 3vw, 1.75rem); }

.center-card { max-width: 36rem; margin: 2rem auto; text-align: left; }
.center-card > * + * { margin-top: 1rem; }
.big-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--s); color: var(--s-ink); border: var(--bw) solid var(--line); box-shadow: calc(3px * var(--shx, 1)) calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.big-icon .icon { width: 1.9rem; height: 1.9rem; }
.error-card .hero-cta { margin-top: 1.5rem; }
.error-card .code-row { flex: 1 1 15rem; min-width: 0; }
.code-row .btn { flex: none; }

.form-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; padding-top: 1.5rem; }
.form-page .slim { grid-column: 2; }
.form-intro .lead { max-width: 34ch; }
.form-card > * + * { margin-top: 0; }
.field { margin-bottom: 1.15rem; }
.field-label { display: block; font-weight: 700; margin-bottom: .4rem; }
.field.inline { display: flex; flex-direction: column; margin: 0; }
.input {
  width: 100%; min-height: 3.25rem; padding: .7rem .95rem;
  font: inherit; color: var(--ink); background: var(--bg);
  border: var(--bw) solid var(--line); border-radius: 12px;
}
.input::placeholder { color: var(--ink-soft); opacity: .8; }
.input:focus-visible { outline: 3px solid var(--a-text); outline-offset: 2px; }
textarea.input { min-height: 5rem; resize: vertical; line-height: 1.45; }
.input-lg { min-height: 3.9rem; font-size: 1.3rem; }
.select { width: auto; min-width: 11rem; padding-right: 2rem; }
.pw { position: relative; }
.pw .input { padding-right: 3.4rem; }
.pw-toggle { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; border-radius: 50%; }
.pw-toggle[aria-pressed="true"] { background: var(--s); color: var(--s-ink); }
.check { display: flex; gap: .65rem; align-items: flex-start; margin: .4rem 0 1.1rem; cursor: pointer; }
.check input { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; flex: none; accent-color: var(--p); }
.form-error { display: flex; gap: .6rem; padding: .8rem 1rem; margin-bottom: 1.1rem; border: var(--bw) solid var(--bad); border-radius: 12px; background: var(--surface); color: var(--bad); font-weight: 600; }
.form-error ul { margin: 0; padding-left: 1.1rem; }
.form-error .icon { margin-top: .15em; }
.form-stack > * + * { margin-top: 0; }

/* ---- Home ----------------------------------------------------------------------------------------- */

.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 6vw, 4.5rem); }
.hero-copy .display { max-width: 12ch; }
.hero-copy .lead { max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; align-items: center; }

.hero-art { position: relative; width: 100%; max-width: 34rem; justify-self: center; aspect-ratio: 1 / 1.02; }
.polaroids { position: absolute; inset: 0; }
.polaroids .polaroid { position: absolute; margin: 0; padding-bottom: 1.7rem; }
.polaroids .tilt-a { left: 0; top: 12%; width: 52%; transform: rotate(-6deg); }
.polaroids .tilt-b { right: 0; top: 0; width: 50%; transform: rotate(5deg); }
.polaroids .tilt-c { left: 24%; top: 36%; width: 50%; transform: rotate(-1.5deg); z-index: 1; }
.code-ticket {
  position: absolute; right: 0; bottom: 2%; width: min(78%, 22rem); z-index: 2;
  background: var(--s); color: var(--s-ink);
  border: var(--bw) solid var(--line); border-radius: 18px; box-shadow: calc(5px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow);
  padding: 1rem 1.1rem 1.05rem; transform: rotate(2.5deg);
}
.code-ticket label { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin-bottom: .55rem; }
.code-ticket .hint { color: var(--s-ink); opacity: .85; }
.code-row { display: flex; gap: .55rem; }
.code-input {
  flex: 1; min-width: 0; min-height: 3.1rem; padding: .5rem .8rem;
  font: 800 1.2rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--surface); border: var(--bw) solid var(--line); border-radius: 12px;
}
.code-input::placeholder { letter-spacing: .08em; color: var(--ink-soft); font-weight: 600; }
.code-ticket .btn { min-height: 3.1rem; }

.ill { display: block; width: 100%; height: auto; border-radius: 2px; }
.ill-sky { fill: var(--p-tint); }
.ill-sun { fill: var(--s); stroke: var(--line); stroke-width: 3; }
.ill-hill-a { fill: var(--a); stroke: var(--line); stroke-width: 3; }
.ill-hill-b { fill: var(--p); stroke: var(--line); stroke-width: 3; }
.ill-cake-1 { fill: var(--p); stroke: var(--line); stroke-width: 3; }
.ill-cake-2 { fill: var(--a); stroke: var(--line); stroke-width: 3; }
.ill-icing { fill: var(--surface); stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.ill-candle { fill: var(--s); stroke: var(--line); stroke-width: 2.5; }
.ill-flame { fill: var(--s); stroke: var(--line); stroke-width: 2; }
.ill-string { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; }
.ill-b1 { fill: var(--p); stroke: var(--line); stroke-width: 3; }
.ill-b2 { fill: var(--s); stroke: var(--line); stroke-width: 3; }
.ill-b3 { fill: var(--a); stroke: var(--line); stroke-width: 3; }

.how, .looks, .safety { padding: clamp(2rem, 6vw, 4rem) 0; }
.how .section-title::after, .looks .section-title::after, .safety .section-title::after {
  content: ""; display: block; width: 5.5rem; height: .8rem; margin-top: .7rem; background: var(--s);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 13'><path d='M2 7c6-8 10-8 14 0s10 8 14 0 10-8 14 0 10 8 14 0 10-8 14 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat left center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 13'><path d='M2 7c6-8 10-8 14 0s10 8 14 0 10-8 14 0 10 8 14 0 10-8 14 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>") no-repeat left center / contain;
}

.steps { list-style: none; padding: 0; display: grid; gap: 1.25rem; max-width: 56rem; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: calc(5px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow); padding: 1.3rem 1.5rem; }
.step h3 { font-family: var(--font-display); font-size: calc(var(--fs-2) * var(--ds)); line-height: 1.12; margin-bottom: .4rem; }
.step p { max-width: 54ch; }
.step-num { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: var(--bw) solid var(--line); font: 800 1.8rem/1 var(--font-display); box-shadow: calc(3px * var(--shx, 1)) calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.step-1 .step-num { background: var(--p); color: var(--p-ink); }
.step-2 .step-num { background: var(--s); color: var(--s-ink); }
.step-3 .step-num { background: var(--a); color: var(--a-ink); }
.step-4 .step-num { background: var(--surface-2); color: var(--ink); }
.step-2, .step-4 { margin-left: clamp(0rem, 9vw, 7rem); }
.step-3 { margin-left: clamp(0rem, 4vw, 3rem); }

.looks-head { max-width: 46rem; }
.preset-strip { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.preset-card { display: grid; gap: .35rem; align-content: start; padding: 1rem 1.1rem 1.15rem; background: var(--pb); color: #1D1A3A; border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.preset-card strong { font-family: var(--font-display); font-size: 1.25rem; }
.preset-card span:last-child { font-size: .95rem; line-height: 1.4; }
.preset-swatch { display: flex; gap: .35rem; margin-bottom: .35rem; }
.preset-swatch i { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid #1D1A3A; }
.preset-swatch i:nth-child(1) { background: var(--pp); }
.preset-swatch i:nth-child(2) { background: var(--ps); }
.preset-swatch i:nth-child(3) { background: var(--pa); }
.preset-card:nth-child(odd) { transform: rotate(-.7deg); }
.preset-card:nth-child(even) { transform: rotate(.6deg); }

.rules { max-width: 56rem; }
.rules > div { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); gap: .5rem 2rem; padding: 1.05rem 0; border-top: var(--bw) solid var(--line); }
.rules > div:last-child { border-bottom: var(--bw) solid var(--line); }
.rules dt { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--fs-1) * var(--ds)); line-height: 1.2; }
.rules dd { max-width: 54ch; }

.closer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2rem; padding: clamp(1.5rem, 5vw, 2.75rem); background: var(--p); color: var(--p-ink); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: calc(6px * var(--shx, 1)) calc(6px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.closer .display { font-size: calc(var(--fs-4) * var(--ds)); }
.closer p { flex-basis: 100%; margin-top: -.5rem; font-size: var(--fs-1); }
.closer .btn-primary { background: var(--surface); color: var(--ink); }

/* ---- Background patterns the host can pick. Faint on purpose: text sits on top of them. ------------------------------------ */

/* Strength (--pat-k), size (--pat-s) and color (--pat-c) come from the host's settings in the theme stylesheet. */
html[data-pattern="dots"] :is(body, .look-sample), .pat-dots { background-image: radial-gradient(color-mix(in srgb, var(--pat-c, var(--ink)) min(100%, 16% * var(--pat-k, 1)), transparent) 1.5px, transparent 1.8px); background-size: calc(24px * var(--pat-s, 1)) calc(24px * var(--pat-s, 1)); }
html[data-pattern="confetti"] :is(body, .look-sample), .pat-confetti {
  background-image:
    radial-gradient(color-mix(in srgb, var(--pat-c, var(--p)) min(100%, 34% * var(--pat-k, 1)), transparent) 3px, transparent 3.6px),
    radial-gradient(color-mix(in srgb, var(--pat-c, var(--s)) min(100%, 44% * var(--pat-k, 1)), transparent) 3px, transparent 3.6px),
    radial-gradient(color-mix(in srgb, var(--pat-c, var(--a)) min(100%, 34% * var(--pat-k, 1)), transparent) 2.5px, transparent 3.1px);
  background-size: calc(64px * var(--pat-s, 1)) calc(64px * var(--pat-s, 1));
  background-position: 0 0, calc(22px * var(--pat-s, 1)) calc(36px * var(--pat-s, 1)), calc(44px * var(--pat-s, 1)) calc(14px * var(--pat-s, 1));
}
html[data-pattern="grid"] :is(body, .look-sample), .pat-grid { background-image: linear-gradient(color-mix(in srgb, var(--pat-c, var(--ink)) min(100%, 9% * var(--pat-k, 1)), transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--pat-c, var(--ink)) min(100%, 9% * var(--pat-k, 1)), transparent) 1px, transparent 1px); background-size: calc(28px * var(--pat-s, 1)) calc(28px * var(--pat-s, 1)); }
html[data-pattern="gingham"] :is(body, .look-sample), .pat-gingham {
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--pat-c, var(--p)) min(100%, 11% * var(--pat-k, 1)), transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--pat-c, var(--p)) min(100%, 11% * var(--pat-k, 1)), transparent) 50%, transparent 50%);
  background-size: calc(36px * var(--pat-s, 1)) calc(36px * var(--pat-s, 1));
}
html[data-pattern="stripes"] :is(body, .look-sample), .pat-stripes { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--pat-c, var(--p)) min(100%, 9% * var(--pat-k, 1)), transparent) 0 calc(36px * var(--pat-s, 1)), transparent calc(36px * var(--pat-s, 1)) calc(72px * var(--pat-s, 1))); }
html[data-pattern="diagonal"] :is(body, .look-sample), .pat-diagonal { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--pat-c, var(--a)) min(100%, 10% * var(--pat-k, 1)), transparent) 0 calc(18px * var(--pat-s, 1)), transparent calc(18px * var(--pat-s, 1)) calc(36px * var(--pat-s, 1))); }
html[data-pattern="zigzag"] :is(body, .look-sample), .pat-zigzag {
  --zz: color-mix(in srgb, var(--pat-c, var(--p)) min(100%, 10% * var(--pat-k, 1)), transparent);
  background-image: linear-gradient(135deg, var(--zz) 25%, transparent 25%), linear-gradient(225deg, var(--zz) 25%, transparent 25%),
    linear-gradient(315deg, var(--zz) 25%, transparent 25%), linear-gradient(45deg, var(--zz) 25%, transparent 25%);
  background-size: calc(40px * var(--pat-s, 1)) calc(40px * var(--pat-s, 1));
  background-position: calc(-20px * var(--pat-s, 1)) 0, calc(-20px * var(--pat-s, 1)) 0, 0 0, 0 0;
}
html[data-pattern="waves"] :is(body, .look-sample), .pat-waves { background-image: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--pat-c, var(--p)) min(100%, 12% * var(--pat-k, 1)), transparent) 0 52%, transparent 53%); background-size: calc(40px * var(--pat-s, 1)) calc(22px * var(--pat-s, 1)); }
html[data-pattern="sunburst"] :is(body, .look-sample), .pat-sunburst { background-image: repeating-conic-gradient(from 0deg at 50% -8%, color-mix(in srgb, var(--pat-c, var(--s)) min(100%, 22% * var(--pat-k, 1)), transparent) 0 calc(6deg * var(--pat-s, 1)), transparent 0 calc(12deg * var(--pat-s, 1))); background-attachment: fixed; }
html[data-pattern="rainbow"] :is(body, .look-sample), .pat-rainbow {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, #FF5D73 min(100%, 16% * var(--pat-k, 1)), transparent), color-mix(in srgb, #FFB84D min(100%, 16% * var(--pat-k, 1)), transparent),
    color-mix(in srgb, #FFE45C min(100%, 18% * var(--pat-k, 1)), transparent), color-mix(in srgb, #5ED38A min(100%, 15% * var(--pat-k, 1)), transparent),
    color-mix(in srgb, #4FB8FF min(100%, 15% * var(--pat-k, 1)), transparent), color-mix(in srgb, #9B7BFF min(100%, 16% * var(--pat-k, 1)), transparent));
  background-attachment: fixed;
}
html[data-pattern="glow"] :is(body, .look-sample), .pat-glow {
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--p) min(100%, 22% * var(--pat-k, 1)), transparent), transparent calc(38% * var(--pat-s, 1))),
    radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--s) min(100%, 30% * var(--pat-k, 1)), transparent), transparent calc(40% * var(--pat-s, 1))),
    radial-gradient(circle at 42% 92%, color-mix(in srgb, var(--a) min(100%, 22% * var(--pat-k, 1)), transparent), transparent calc(44% * var(--pat-s, 1)));
  background-attachment: fixed;
}
html[data-pattern="gradient"] :is(body, .look-sample), .pat-gradient {
  background-image: linear-gradient(var(--ga, 160deg),
    color-mix(in srgb, var(--g1, var(--p-tint)) min(100%, 100% * var(--pat-k, 1)), var(--bg)),
    color-mix(in srgb, var(--g2, color-mix(in srgb, var(--s) 30%, var(--bg))) min(100%, 100% * var(--pat-k, 1)), var(--bg)));
  background-attachment: fixed;
}
/* Shapes are drawn with a mask so they can take the theme's colors. */
html:is([data-pattern="hearts"], [data-pattern="stars"]) :is(body, .look-sample)::after, :is(.pat-hearts, .pat-stars)::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: min(1, .14 * var(--pat-k, 1));
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: calc(52px * var(--pat-s, 1)) auto; mask-size: calc(52px * var(--pat-s, 1)) auto;
}
html[data-pattern="hearts"] :is(body, .look-sample)::after, .pat-hearts::after {
  background: var(--pat-c, var(--p));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M16 30c-7-5.5-10-9.5-10-13.5 0-3 2.4-5 5-5 2 0 3.8 1.2 5 3.2 1.2-2 3-3.2 5-3.2 2.6 0 5 2 5 5 0 4-3 8-10 13.5z'/%3E%3Cpath transform='translate(24 22) scale(.7)' d='M16 30c-7-5.5-10-9.5-10-13.5 0-3 2.4-5 5-5 2 0 3.8 1.2 5 3.2 1.2-2 3-3.2 5-3.2 2.6 0 5 2 5 5 0 4-3 8-10 13.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M16 30c-7-5.5-10-9.5-10-13.5 0-3 2.4-5 5-5 2 0 3.8 1.2 5 3.2 1.2-2 3-3.2 5-3.2 2.6 0 5 2 5 5 0 4-3 8-10 13.5z'/%3E%3Cpath transform='translate(24 22) scale(.7)' d='M16 30c-7-5.5-10-9.5-10-13.5 0-3 2.4-5 5-5 2 0 3.8 1.2 5 3.2 1.2-2 3-3.2 5-3.2 2.6 0 5 2 5 5 0 4-3 8-10 13.5z'/%3E%3C/svg%3E");
}
html[data-pattern="stars"] :is(body, .look-sample)::after, .pat-stars::after {
  background: var(--pat-c, var(--p-text));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M14 6l2.6 6.1 6.6.6-5 4.4 1.5 6.4L14 20.2l-5.7 3.3 1.5-6.4-5-4.4 6.6-.6z'/%3E%3Cpath d='M38 30l1.6 3.8 4.1.4-3.1 2.7.9 4-3.5-2.1-3.5 2.1.9-4-3.1-2.7 4.1-.4z'/%3E%3Ccircle cx='40' cy='10' r='1.6'/%3E%3Ccircle cx='10' cy='42' r='1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M14 6l2.6 6.1 6.6.6-5 4.4 1.5 6.4L14 20.2l-5.7 3.3 1.5-6.4-5-4.4 6.6-.6z'/%3E%3Cpath d='M38 30l1.6 3.8 4.1.4-3.1 2.7.9 4-3.5-2.1-3.5 2.1.9-4-3.1-2.7 4.1-.4z'/%3E%3Ccircle cx='40' cy='10' r='1.6'/%3E%3Ccircle cx='10' cy='42' r='1.4'/%3E%3C/svg%3E");
}

/* ---- Polaroids and walls --------------------------------------------------------------------------- */

.polaroid { position: relative; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 6px; padding: .6rem .6rem 0; box-shadow: calc(4px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow); transition: transform .2s ease-out, box-shadow .2s ease-out; }
.polaroid img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--surface-2); }
.polaroid .ill { border-radius: 2px; }
.polaroid figcaption { padding: .55rem .15rem .7rem; font-family: var(--font-display); font-size: calc(1.05rem * var(--ds)); line-height: 1.25; }
.polaroid figcaption .note { display: block; font-family: var(--font-body); font-size: .92rem; color: var(--ink-soft); margin-top: .15rem; }
.tilt-1 { transform: rotate(calc(var(--tilt, 1deg) * -1.6)); } .tilt-2 { transform: rotate(calc(var(--tilt, 1deg) * 1.2)); } .tilt-3 { transform: rotate(calc(var(--tilt, 1deg) * -.6)); }
.tilt-4 { transform: rotate(calc(var(--tilt, 1deg) * 1.8)); } .tilt-5 { transform: rotate(calc(var(--tilt, 1deg) * .4)); }
.wall .polaroid:hover, .strip .polaroid:hover { transform: rotate(0) translateY(-3px); box-shadow: calc(6px * var(--shx, 1)) calc(8px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.polaroid.is-new { animation: pop-in .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.polaroid.is-removing { opacity: 0; transform: scale(.85) rotate(4deg); transition: opacity .25s, transform .25s; }
@keyframes pop-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; } }

.wall { list-style: none; padding: 0; columns: 2 11rem; column-gap: 1.4rem; margin-top: 1rem; }
.wall > .polaroid { break-inside: avoid; margin: 0 0 1.5rem; display: block; }
.wall > .polaroid:not(:has(figcaption)):not(:has(.tile-actions)) { padding-bottom: .6rem; }
.wall-host { columns: 3 13rem; }
.tile-open { display: block; }
.tile-remove { position: absolute; top: .1rem; right: .1rem; margin: 0; }
.tile-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); cursor: pointer; text-decoration: none;
  transition: transform .12s ease-out, background-color .15s;
}
.tile-btn:hover { background: var(--s); color: var(--s-ink); transform: scale(1.06); }
.tile-actions { display: flex; justify-content: flex-end; gap: .45rem; padding: 0 .1rem .7rem; }
.tile-actions form { margin: 0; }
.tile-actions .tile-btn { width: 2.75rem; height: 2.75rem; }
.tile-actions .tile-btn:last-child:hover { background: var(--bad); color: var(--bad-ink); }

.strip { list-style: none; padding: .75rem .35rem 1.6rem; display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x proximity; }
.strip .polaroid { flex: 0 0 11.5rem; scroll-snap-align: start; margin: 0; }
.strip .polaroid a { display: block; }

.empty { color: var(--ink-soft); }
.empty-card { display: grid; gap: 1rem; justify-items: start; padding: 1.4rem; border: var(--bw) dashed var(--line); border-radius: var(--r-lg); background: var(--surface); }
.empty-card.big { padding: 2.5rem 1.6rem; }

/* ---- Guest: welcome and send --------------------------------------------------------------------------- */

.welcome { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(.5rem, 3vw, 2rem) 0; }
.welcome-art { justify-self: center; width: 100%; max-width: 20rem; }
.portrait { margin: 0; transform: rotate(calc(var(--tilt, 1deg) * -1.67)); padding-bottom: 0; }
.portrait img { aspect-ratio: 1; object-fit: cover; }
.portrait.cover-round, .portrait.cover-arch { padding: .55rem; }
.portrait.cover-round { border-radius: 50%; overflow: hidden; }
.portrait.cover-round img, .portrait.cover-round .ill { border-radius: 50%; }
.portrait.cover-arch { border-radius: 999px 999px 10px 10px; overflow: hidden; }
.portrait.cover-arch img, .portrait.cover-arch .ill { border-radius: 999px 999px 4px 4px; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait.cover-round figcaption, .portrait.cover-arch figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.welcome-copy .display { font-size: calc(var(--fs-4) * var(--ds)); max-width: 14ch; }
.greeting { margin-top: 1rem; font-size: var(--fs-1); max-width: 40ch; white-space: pre-line; }
.name-card { margin-top: 1.75rem; max-width: 30rem; }
.name-card .field-label { font-family: var(--font-display); font-size: calc(var(--fs-1) * var(--ds)); }
.name-card .btn { margin-top: 1.1rem; }

/* Kids join in with a grown-up: the age question, and the child's first name, which shows only once the box is ticked. */
.age-question { border: 0; margin: 0 0 1.1rem; padding: 0; min-width: 0; }
.age-question legend { padding: 0; margin-bottom: .45rem; }
.name-card:has(input[name="age"][value="under13"]:checked) .after-age { display: none; }
.with-child { margin-top: 1rem; }
.with-child:not(:has(input[name="withChild"]:checked)) .child-name { display: none; }
.grownup-card p { margin: .5rem 0 0; }
.grownup-note { margin: 0 0 .9rem; }

.send { max-width: 46rem; margin: 0 auto; }
.send-head { padding: .5rem 0 1.4rem; }
.send-head .display { font-size: calc(var(--fs-4) * var(--ds)); }
.picker { display: grid; gap: .5rem; }
.picker-btn { width: 100%; cursor: pointer; background: var(--p); color: var(--p-ink); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input:focus-visible + .picker-btn { outline: 3px solid var(--a-text); outline-offset: 4px; }
.picker.is-off .picker-btn { opacity: .5; pointer-events: none; }
.note-box { margin-top: .5rem; }
.note-box summary { cursor: pointer; font-weight: 700; padding: .55rem 0; min-height: 2.75rem; display: flex; align-items: center; gap: .6rem; list-style: none; }
.note-box summary::-webkit-details-marker { display: none; }
.note-box summary .icon { width: 1.6rem; height: 1.6rem; padding: .25rem; border: 2px solid var(--line); border-radius: 50%; background: var(--s); color: var(--s-ink); transition: transform .2s ease-out; }
.note-box[open] summary .icon { transform: rotate(45deg); }
.note-box textarea { margin-top: .4rem; }

.queue { list-style: none; padding: 0; margin-top: 1rem; }
.qitem { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem; margin-bottom: .6rem; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; transition: opacity .4s, transform .4s; }
.qitem.is-leaving { opacity: 0; transform: translateY(-8px); }
.qthumb { width: 3.4rem; height: 3.4rem; border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.qthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qbody { display: grid; gap: .25rem; min-width: 0; }
.qname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qstatus { font-size: .92rem; color: var(--ink-soft); }
.qitem.is-error { border-color: var(--bad); }
.qitem.is-error .qstatus { color: var(--bad); font-weight: 700; }
.qitem.is-done .qstatus { color: var(--ok); font-weight: 700; }
.qitem.is-waiting { border-style: dashed; border-color: var(--a-text); }
.qitem.is-waiting .qstatus { color: var(--a-text); font-weight: 700; }
progress { width: 100%; height: .6rem; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
progress::-webkit-progress-bar { background: var(--surface-2); }
progress::-webkit-progress-value { background: var(--p); transition: width .15s; }
progress::-moz-progress-bar { background: var(--p); }

.mine { margin-top: 2.25rem; }
.count { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; margin-left: .35rem; border-radius: 999px; background: var(--a); color: var(--a-ink); border: 2px solid var(--line); font: 800 .95rem/1 var(--font-body); vertical-align: .15em; }

.invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; margin-top: 2rem; }
/* The QR image already carries its own white quiet zone, so the frame adds no padding: the white fits the code exactly. */
.qr-frame { background: #fff; padding: 0; overflow: hidden; border: var(--bw) solid var(--line); border-radius: 14px; width: 9.5rem; aspect-ratio: 1; box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.qr-frame svg { display: block; width: 100%; height: 100%; }
.qr-frame.big { width: min(100%, 20rem); margin: 0 auto; }
.switch { margin-top: 1.5rem; color: var(--ink-soft); font-size: .98rem; }

/* ---- Host ------------------------------------------------------------------------------------------------- */

.dash-head, .page-head { padding: .5rem 0 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.invite-card > * + * { margin-top: .5rem; }
.code-tiles { display: inline-flex; align-items: center; gap: clamp(.12rem, .8vw, .3rem); margin: .4rem 0 .3rem; max-width: 100%; }
.code-tile { display: grid; place-items: center; width: clamp(1.5rem, 7.6vw, 2.6rem); height: clamp(2.1rem, 10vw, 3.35rem); border: var(--bw) solid var(--line); border-radius: 8px; box-shadow: 0 calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); font: 800 clamp(1.1rem, 5.2vw, 1.85rem)/1 var(--font-body); background: var(--s); color: var(--s-ink); }
.code-tile:nth-child(3n+1) { background: var(--p); color: var(--p-ink); }
.code-tile:nth-child(3n+2) { background: var(--s); color: var(--s-ink); }
.code-tile:nth-child(3n) { background: var(--a); color: var(--a-ink); }
.code-gap { width: .55rem; }
.qr-card .code-tile { width: clamp(1.5rem, 7.2vw, 2.15rem); height: clamp(2.1rem, 9.6vw, 2.9rem); font-size: clamp(1.1rem, 5vw, 1.6rem); }
.status { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin-bottom: 1rem; }
.status-dot { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--line); background: var(--ok); flex: none; }
.is-paused .status-dot { background: var(--s); }
.stats { display: flex; gap: 2rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 2px dashed var(--line); }
.stats dt { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.stats dd { font: 800 2.4rem/1.05 var(--font-display); }
.latest { margin-top: 2.5rem; }
.section-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; padding: 1rem 1.1rem; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); }
.pager { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }

.guest-list { list-style: none; padding: 0; }
.guest-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.5rem; margin-bottom: 1rem; padding: 1rem 1.25rem; box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.guest-row.is-blocked { background: var(--surface-2); }
.guest-name { font-family: var(--font-display); font-size: calc(var(--fs-1) * var(--ds)); display: block; }
.guest-meta { color: var(--ink-soft); font-size: .95rem; }
.guest-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.guest-actions form { margin: 0; }
.tag { display: inline-block; padding: .05rem .55rem; margin-left: .4rem; border: 2px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tag-bad { background: var(--bad); color: var(--bad-ink); }

.theme-form { max-width: 52rem; }
.panel { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: 1.25rem 1.4rem 1.4rem; margin: 0 0 1.25rem; min-width: 0; box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
fieldset.panel legend { padding: 0 .5rem; margin-left: -.5rem; }
.preset-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .85rem; }
.preset-option { position: relative; display: block; }
.preset-option input { position: absolute; opacity: 0; inset: 0; }
.preset-face { display: grid; gap: .45rem; padding: .85rem; min-height: 5.5rem; background: var(--pb); color: #1D1A3A; border: var(--bw) solid var(--line); border-radius: 14px; cursor: pointer; }
.preset-face strong { font-family: var(--font-display); }
.preset-option input:checked + .preset-face { outline: 4px solid var(--ink); outline-offset: 2px; box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.preset-option input:focus-visible + .preset-face { outline: 4px solid var(--a-text); outline-offset: 3px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; }
.color-field { display: grid; gap: .4rem; font-weight: 700; }
.color-field input[type="color"] { width: 100%; height: 3.6rem; padding: 3px; background: var(--bg); border: var(--bw) solid var(--line); border-radius: 12px; cursor: pointer; }
fieldset.occasion-field { border: 0; padding: 0; min-width: 0; }
.chip-pick { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 2.9rem; padding: .35rem 1.1rem; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--bg); font-weight: 700; cursor: pointer; }
.chip input:checked + span { background: var(--p); color: var(--p-ink); box-shadow: 0 calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.chip input:focus-visible + span { outline: 3px solid var(--a-text); outline-offset: 3px; }
.font-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .85rem; }
.font-option { position: relative; display: grid; gap: .2rem; padding: .9rem 1rem; border: var(--bw) solid var(--line); border-radius: 14px; background: var(--bg); cursor: pointer; }
.font-option input { position: absolute; opacity: 0; inset: 0; }
.font-option:has(input:checked) { background: var(--p-tint); outline: 3px solid var(--ink); outline-offset: 2px; }
.font-option:has(input:focus-visible) { outline: 4px solid var(--a-text); }
.font-sample { font-size: 1.7rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-name { font-size: .9rem; color: var(--ink-soft); }
.cover-row { display: flex; gap: 1rem; align-items: center; }
.cover-thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border: var(--bw) solid var(--line); border-radius: 8px; flex: none; }
/* Unsaved changes: a full-width strip slides up after the first change (thumb reach on a phone), and on a wide screen a compact bar
   sits at the top right of the form, or beside the book sample. Hidden until there is something to save. */
.save-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: var(--bw) solid var(--line);
  box-shadow: 0 -6px 18px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease-out, visibility 0s linear .25s;
}
.save-bar.is-shown { transform: none; visibility: visible; transition: transform .25s ease-out; }
.save-bar-note { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; }
.save-bar-note::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 3px var(--p-tint); }
.save-bar-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.save-bar-sample { display: none; }
html.has-unsaved main { padding-bottom: 9rem; }
@media (max-width: 30rem) {
  .save-bar-actions { width: 100%; }
  .save-bar-actions .btn { flex: 1; }
}
@media (min-width: 70rem) {
  .save-bar {
    position: sticky; top: .75rem; left: auto; right: auto; bottom: auto; width: fit-content; margin: -1.4rem 0 -2.6rem auto;
    padding: .45rem .5rem .45rem 1rem; border: var(--bw) solid var(--line); border-radius: var(--r-lg);
    box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow);
    transform: translateY(-.4rem); opacity: 0; transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  }
  .save-bar.is-shown { transform: none; opacity: 1; transition: opacity .2s, transform .2s; }
  html.has-unsaved main { padding-bottom: 4rem; }
  /* The book designer's sample has its own column on a wide screen, so the bar sits beside it instead. */
  .book-design form .save-bar { display: none; }
  .save-bar.save-bar-sample { display: flex; position: static; width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
}
.book-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.book-preview-head .section-title { margin: 0; }

.share-grid { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.qr-card { text-align: center; display: grid; gap: .6rem; justify-items: center; }
.qr-title { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--fs-2) * var(--ds)); line-height: 1.1; }
.share-actions > * + * { margin-top: 1.1rem; }
.share-actions .btn-row { margin-top: 0; }
.message-card .input { margin: .4rem 0 .7rem; }

.settings-stack { display: grid; gap: 1.25rem; max-width: 40rem; }
.settings-stack .panel { margin: 0; }
.settings-stack form { margin-top: 1rem; }
.danger-zone { border-color: var(--bad); }
.danger-zone .section-title { color: var(--bad); }

/* ---- Lightbox, dialog, toasts --------------------------------------------------------------------------------- */

dialog.lightbox { padding: 0; border: 0; background: #0d0907; color: #fff; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; }
dialog.lightbox[open] { display: grid; grid-template-rows: auto 1fr; place-items: center; }
dialog.lightbox::backdrop { background: #000; }
.lightbox-bar { justify-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; padding-top: calc(.75rem + env(safe-area-inset-top)); }
.lightbox-caption { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-tools { display: flex; gap: .5rem; }
.lightbox .icon-btn { background: #fff; color: #17110e; border-color: #fff; }
.lightbox img { max-width: 94vw; max-height: calc(100dvh - 5.5rem); object-fit: contain; border-radius: 4px; transition: opacity .2s; }
.lightbox img.is-loading { opacity: .4; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3.2rem; height: 4.5rem; display: grid; place-items: center; background: rgb(255 255 255 / .9); color: #17110e; border: 0; border-radius: 12px; cursor: pointer; }
.lightbox-nav.prev { left: .5rem; } .lightbox-nav.next { right: .5rem; }

dialog.dialog { max-width: min(27rem, 92vw); padding: 1.6rem; color: var(--ink); background: var(--surface); border: var(--bw) solid var(--line); border-radius: 20px; box-shadow: calc(6px * var(--shx, 1)) calc(6px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
dialog.dialog::backdrop { background: rgb(26 14 10 / .6); }
dialog.dialog h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: .6rem; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }

.toasts { position: fixed; z-index: 80; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: .5rem; width: min(92vw, 26rem); pointer-events: none; }
.toast { padding: .8rem 1.1rem; background: var(--ink); color: var(--bg); border-radius: 14px; font-weight: 700; text-align: center; box-shadow: 0 6px 0 rgb(0 0 0 / .25); animation: toast-in .3s cubic-bezier(.2, 1.3, .4, 1); }
.toast-bad { background: var(--bad); color: var(--bad-ink); }
.toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; }

/* ---- Floating motifs ----------------------------------------------------------------------------------------- */

.mote { position: absolute; top: 0; display: block; opacity: .5; will-change: transform; }
@media (max-width: 560px) { .mote { opacity: .36; } }
:root[data-theme="dark"] .mote { opacity: .38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mote { opacity: .38; } }
.mote > * { display: block; overflow: visible; }
.mote .mote-img { height: auto; pointer-events: none; }
.mote.c1 { color: var(--p); } .mote.c2 { color: var(--s); } .mote.c3 { color: var(--a); } .mote.c4 { color: var(--p-text); }

.mote-fall, .mote-fall-sway { animation: fall linear infinite; }
.mote-fall > * { animation: spin linear infinite; }
.mote-fall-sway > * { animation: drift ease-in-out infinite alternate; }
.mote-rise, .mote-rise-slow, .mote-rise-wobble { top: 0; animation: rise linear infinite; }
.mote-rise > *, .mote-rise-slow > * { animation: bob ease-in-out infinite alternate; }
.mote-rise-slow svg { filter: drop-shadow(0 0 6px var(--s)); }
.mote-rise-wobble > * { animation: wobble ease-in-out infinite alternate; }
.mote-twinkle { animation: twinkle ease-in-out infinite; }
.mote-twinkle-rise { animation: twinkle-rise ease-in-out infinite; }
.mote-flutter { left: -6% !important; animation: flutter linear infinite; }
.mote-flutter svg { animation: flap .42s ease-in-out infinite alternate !important; transform-origin: 50% 50%; }

@keyframes fall { from { transform: translate3d(0, -14vh, 0); } to { transform: translate3d(5vw, 112vh, 0); } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(540deg); } }
@keyframes drift { from { transform: translateX(-22px) rotate(-30deg); } to { transform: translateX(22px) rotate(40deg); } }
@keyframes rise { from { transform: translate3d(0, 112vh, 0); } to { transform: translate3d(2vw, -22vh, 0); } }
@keyframes bob { from { transform: translateX(-14px) rotate(-5deg); } to { transform: translateX(14px) rotate(5deg); } }
@keyframes wobble { from { transform: translateX(-10px) scale(1); } to { transform: translateX(12px) scale(1.08); } }
@keyframes twinkle { 0%, 100% { transform: scale(.35) rotate(0); opacity: .1; } 50% { transform: scale(1) rotate(25deg); opacity: 1; } }
@keyframes twinkle-rise { 0% { transform: translateY(14px) scale(.3); opacity: 0; } 50% { transform: translateY(-10px) scale(1); opacity: 1; } 100% { transform: translateY(-34px) scale(.3); opacity: 0; } }
@keyframes flutter {
  0% { transform: translate(0, 4vh) rotate(-6deg); } 25% { transform: translate(26vw, -8vh) rotate(8deg); }
  50% { transform: translate(52vw, 6vh) rotate(-5deg); } 75% { transform: translate(78vw, -6vh) rotate(7deg); }
  100% { transform: translate(112vw, 3vh) rotate(-4deg); }
}
@keyframes flap { to { transform: scaleX(.45); } }

/* ---- Printable card ------------------------------------------------------------------------------------------------- */

.chrome-bare .topbar, .chrome-bare .bunting, .chrome-bare .footer, .chrome-bare .motif-layer { display: none; }
.card-tools { max-width: 34rem; margin: .5rem auto 1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.card-tools .hint { flex-basis: 100%; margin: 0; }
.sheet { max-width: 34rem; margin: 0 auto 2rem; padding: 0 2rem 2rem; background: var(--surface); border: 4px solid var(--line); border-radius: 28px; text-align: center; overflow: hidden; }
.sheet-bunting { height: 52px; margin: 0 -2rem .5rem; overflow: hidden; }
.sheet-eyebrow { font-size: .9rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--p-text); }
.sheet-title { font-family: var(--font-display); font-weight: 700; font-size: calc(2.6rem * var(--ds)); line-height: 1.04; margin: .4rem 0 1.2rem; text-wrap: balance; }
.sheet-qr { width: min(100%, 17rem); margin: 0 auto; }
.sheet-scan { margin-top: .9rem; font-weight: 700; font-size: 1.1rem; }
.sheet-steps { list-style: none; padding: 0; display: grid; gap: .5rem; margin: 1.1rem auto; max-width: 20rem; text-align: left; }
.sheet-steps li { display: flex; gap: .7rem; align-items: center; font-weight: 600; }
.sheet-steps span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; border: 2px solid var(--line); background: var(--s); color: var(--s-ink); font-weight: 800; }
.sheet-or { margin-top: .6rem; font-size: .98rem; color: var(--ink-soft); }
.sheet .code-tiles { margin-top: .6rem; }
.sheet-greeting { margin-top: 1.2rem; font-style: italic; color: var(--ink-soft); white-space: pre-line; }

@media print {
  @page { margin: 12mm; }
  .no-print, .topbar, .bunting, .footer, .motif-layer, .tabbar, .toasts, .skip { display: none !important; }
  body, main { background: #fff !important; color: #111 !important; padding: 0 !important; }
  .sheet { border-color: #111; box-shadow: none; background: #fff !important; color: #111 !important; margin: 0 auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet .code-tile, .sheet .flag, .sheet-steps span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet-eyebrow, .sheet-or, .sheet-greeting { color: #333 !important; }
  .print-page { width: 100%; border: 0; margin: 0; }
  .book { max-width: none; padding: 0; border: 0; margin: 0; }
  .book-cover, .book-heading, .book-photo img, .book-message { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .face, .face .face-qr, .face .code-tile { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .guestbook-entry { break-inside: avoid; background: #fff; border-left-color: #555; }
  .guestbook-entry q, .guestbook-entry cite { color: #111 !important; }
}

/* ---- Printable card layouts (US Letter). Black on white with a colored top edge, so they print well on any printer. ------------ */

.layout-pick { display: flex; flex-wrap: wrap; gap: .5rem; flex-basis: 100%; }
.chip-link { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .3rem 1rem; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; text-decoration: none; }
.chip-link:hover { background: var(--surface-2); }
.chip-link.is-current { background: var(--p); color: var(--p-ink); box-shadow: 0 calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.chip-link:focus-visible { outline: 3px solid var(--a-text); outline-offset: 3px; }

.print-page { display: grid; width: 7.5in; max-width: 100%; aspect-ratio: 7.5 / 9.9; margin: 0 auto 2rem; box-sizing: border-box; background: #fff; color: #111; border: 1px solid #c9c9c9; overflow: hidden; }
.face { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .18in; text-align: center; overflow: hidden; background: #fff; color: #111; border-top: 10px solid var(--p); break-inside: avoid; }
.face-eyebrow { margin: 0; font: 800 .72rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #444; }
.face-title { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.face .face-qr { box-sizing: border-box; margin: .15rem auto; padding: .4rem; background: #fff; border: 2px solid #111; border-radius: 10px; box-shadow: none; }
.face .face-qr svg { display: block; width: 100%; height: auto; }
.face-scan { margin: 0; font-weight: 800; }
.face-or { margin: 0; font-size: .82rem; color: #444; }
.face-steps { list-style: none; padding: 0; margin: .3rem 0; display: grid; gap: .45rem; text-align: left; font-weight: 700; }
.face-steps li { display: flex; align-items: center; gap: .7rem; }
.face-steps span { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; border: 2px solid #111; font-weight: 800; }
.face .code-tiles { flex-wrap: wrap; justify-content: center; margin: .15rem 0 0; }
.face .code-tile { width: var(--tw, 1.6rem); height: var(--th, 2.2rem); font-size: var(--tf, 1.2rem); background: #fff !important; color: #000 !important; border: 2px solid #000; box-shadow: none; }
.is-upside { transform: rotate(180deg); }

.layout-tent { grid-template-rows: 1fr auto 1fr; }
.face-tent { --tw: 2.1rem; --th: 2.8rem; --tf: 1.6rem; border-top-width: 0; gap: .4rem; }
.face-tent .face-title { font-size: 2.1rem; max-width: 6in; }
.face-tent .face-qr { width: 2.6in; }
.fold-line { position: relative; height: 0; margin: 0; border-top: 2px dashed #888; }
.fold-line span { position: absolute; left: 50%; top: -.75rem; transform: translateX(-50%); padding: 0 .6rem; background: #fff; font-size: .75rem; color: #666; }

.layout-postcard { grid-template-rows: 1fr 1fr; gap: .3in; padding: .15in 0; background: #fff; }
.face-postcard { display: grid; grid-template-columns: 2.4in minmax(0, 1fr); align-content: center; column-gap: .3in; width: 6.6in; justify-self: center; text-align: left; border: 2px solid #111; border-top: 10px solid var(--p); border-radius: 6px; padding: .2in .25in; --tw: 1.5rem; --th: 2.1rem; --tf: 1.1rem; }
.face-postcard > :not(.face-qr) { grid-column: 2; }
.face-postcard .face-qr { grid-column: 1; grid-row: 1 / span 5; align-self: center; width: 2.4in; }
.face-postcard .face-title { font-size: 1.7rem; }
.face-postcard .code-tiles { justify-content: flex-start; }

.layout-insert { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.face-insert { border: 1px dashed #999; border-top: 10px solid var(--p); --tw: 1.35rem; --th: 1.9rem; --tf: 1rem; }
.face-insert .face-title { font-size: 1.45rem; }
.face-insert .face-qr { width: 2.1in; }

.layout-bookmark { grid-template-columns: repeat(4, 1fr); align-items: start; padding: .2in .1in; gap: .1in; }
.face-bookmark { height: 5.6in; justify-content: flex-start; padding-top: .3in; border: 1px dashed #999; border-top: 10px solid var(--p); --tw: 1.9rem; --th: 2.5rem; --tf: 1.3rem; }
.face-bookmark .face-title { font-size: 1.25rem; margin-bottom: .2rem; }
.face-bookmark .face-qr { width: 1.5in; }
.face-bookmark .face-or { padding: 0 .1rem; }
.face-bookmark .code-gap { display: none; }
.face-bookmark .code-tiles { max-width: 8.4rem; gap: .2rem; }

.layout-tiles { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
.face-tiles { border: 1px dashed #999; border-top: 8px solid var(--p); padding: .1in; gap: .15rem; --tw: 1rem; --th: 1.45rem; --tf: .8rem; }
.face-tiles .face-title { font-size: .95rem; }
.face-tiles .face-qr { width: 1.2in; padding: .25rem; }
.face-tiles .face-scan { font-size: .75rem; }
.face-tiles .code-tiles { gap: .1rem; }

.layout-large { grid-template-rows: 1fr; }
.face-large { border-top-width: 16px; gap: .6rem; padding: .3in; --tw: 3.4rem; --th: 4.4rem; --tf: 2.6rem; }
.face-large .face-eyebrow { font-size: 1.1rem; color: #222; }
.face-large .face-title { font-size: 3.3rem; max-width: 6.5in; }
.face-large .face-qr { width: 3.7in; border-width: 4px; }
.face-large .face-steps { font-size: 1.55rem; }
.face-large .face-steps span { width: 2.6rem; height: 2.6rem; border-width: 3px; font-size: 1.4rem; }
.face-large .face-or { font-size: 1.2rem; color: #111; }
.face-large .code-tile { border-width: 4px; }

/* ---- Style options the host can pick (set as data-* attributes on <html>) ------------------------------------------------------ */

html[data-scale="small"] { font-size: 93.75%; }
html[data-scale="large"] { font-size: 112.5%; }
html[data-scale="xl"] { font-size: 125%; }
html[data-scale][data-text="large"] { font-size: 125%; }
html[data-scale="xl"][data-text="large"] { font-size: 140%; }

html[data-bunting="none"] .bunting, html[data-bunting="none"] .sheet-bunting { display: none; }
.bulb-cap { fill: var(--ink); }
html[data-bunting="lights"] .flag.bulb { filter: drop-shadow(0 0 5px currentColor); }

html[data-corners="sharp"] { --r-sm: 2px; --r: 3px; --r-lg: 4px; }
html[data-corners="round"] { --r-sm: 14px; --r: 20px; --r-lg: 30px; }
html[data-corners="sharp"] :is(.btn, .btn-sm, .btn-xl, .bar-add, .input, .select, .qr-frame, .polaroid, .flip-face, .toast, dialog.dialog, .font-option, .preset-face, .show-qr, .flash, .chip span, .code-tile, .tag, .meter) { border-radius: 3px; }
html[data-corners="round"] :is(.btn, .btn-sm, .btn-xl, .bar-add) { border-radius: 999px; }
html[data-corners="round"] :is(.input, .select, .font-option, .flash, .toast, dialog.dialog, .show-qr, .preset-face) { border-radius: 22px; }
html[data-corners="round"] :is(.polaroid, .flip-face) { border-radius: 18px; }
html[data-corners="round"] .qr-frame { border-radius: 24px; }

html[data-frame="plain"] .polaroid:not(.flip) { padding: 0; border-radius: 2px; overflow: hidden; }
html[data-frame="plain"] .polaroid:not(.flip) img { border-radius: 0; }
html[data-frame="plain"] .polaroid:not(.flip) figcaption { padding: .6rem .7rem .7rem; }
html[data-frame="round"] .polaroid, html[data-frame="round"] .flip-face { border-radius: 22px; }
html[data-frame="round"] .polaroid:not(.flip) { overflow: hidden; }
html[data-frame="round"] .polaroid img { border-radius: 14px; }
html[data-frame="tape"] .polaroid::after { content: ""; position: absolute; top: -.7rem; left: 50%; width: 4.4rem; height: 1.4rem; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--tape, var(--s)) 62%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); pointer-events: none; z-index: 2; }
html[data-frame="tape"] .polaroid:nth-child(even)::after { transform: translateX(-50%) rotate(3deg); background: color-mix(in srgb, var(--tape, var(--a)) 55%, transparent); }
html[data-tilt="straight"] .polaroid, html[data-tilt="straight"] .portrait { transform: none; }
html[data-tilt="straight"] .wall .polaroid:hover, html[data-tilt="straight"] .strip .polaroid:hover { transform: translateY(-3px); }

.style-groups { display: grid; gap: 1.1rem; }
.style-option { border: 0; margin: 0; padding: 0; min-width: 0; }
.style-option legend { padding: 0; margin-bottom: .35rem; font-weight: 800; }
.word-grid { display: grid; gap: 1rem; }
.word-grid .hint { margin-top: .25rem; }
.share-look { display: grid; gap: 1rem; }

/* ---- Layout, spacing and button choices ---------------------------------------------------------------------------------------- */

html[data-layout="stacked"] .welcome { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
html[data-layout="stacked"] .welcome-art { max-width: 15rem; }
html[data-layout="stacked"] .welcome-copy { display: grid; justify-items: center; }
html[data-layout="stacked"] .welcome-copy .display, html[data-layout="stacked"] .greeting, html[data-layout="stacked"] .event-details { max-width: 34ch; margin-inline: auto; }
html[data-layout="plain"] .welcome { grid-template-columns: minmax(0, 1fr); }
html[data-layout="plain"] .welcome-art { display: none; }
html[data-align="center"] :is(.send-head, .welcome-copy, .page-head > div) { text-align: center; }
html[data-align="center"] :is(.welcome-copy .display, .greeting, .event-details, .name-card, .help-line, .subtitle) { margin-inline: auto; }
html[data-align="center"] .help-line { justify-content: center; }
html[data-align="center"] .event-details { border-left: 0; border-top: 5px solid var(--a); border-radius: 0 0 var(--r-sm) var(--r-sm); }

html[data-spacing="compact"] main { padding-top: .6rem; padding-bottom: 3rem; }
html[data-spacing="compact"] :is(.card, .panel):not(.studio-section) { padding: .9rem 1rem; }
html[data-spacing="compact"] .wall { column-gap: .9rem; }
html[data-spacing="airy"] main { padding-top: 2.4rem; padding-bottom: 6rem; }
html[data-spacing="airy"] :is(.card, .panel):not(.studio-section) { padding: clamp(1.5rem, 4vw, 2.5rem); }
html[data-spacing="airy"] .wall { column-gap: 2.2rem; }
html[data-spacing="airy"] .wall > .polaroid { margin-bottom: 2.2rem; }

html[data-wall="tight"] .wall { columns: 2 8.5rem; }
html[data-wall="roomy"] .wall { columns: 2 15rem; }
html[data-wall="tight"] .wall-host { columns: 3 9rem; }
html[data-wall="roomy"] .wall-host { columns: 2 17rem; }

html[data-buttons="outline"] :is(.btn-primary, .btn-secondary) { background: var(--surface); }
html[data-buttons="outline"] .btn-primary { color: var(--p-text); border-color: var(--p-text); }
html[data-buttons="outline"] .btn-secondary { color: var(--s-text); border-color: var(--s-text); }
html[data-buttons="outline"] .btn-primary:hover { background: var(--p-tint); }
html[data-buttons="outline"] .btn-secondary:hover { background: var(--surface-2); }

/* ---- Subtitle and event details ---------------------------------------------------------------------------------------------- */

.more-colors { margin-top: 1rem; }
.more-colors summary { cursor: pointer; font-weight: 800; min-height: 2.75rem; display: flex; align-items: center; }
.color-field .check { margin: .4rem 0 0; font-size: .9rem; }
.subtitle { margin: .25rem 0 0; font-family: var(--font-display); font-size: calc(var(--fs-1) * var(--ds)); color: var(--ink-soft); overflow-wrap: anywhere; }
.event-details { margin: 1rem 0 0; max-width: 40ch; padding: .7rem 1rem; border-left: 5px solid var(--a); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; white-space: pre-line; overflow-wrap: anywhere; }
.book-subtitle { margin: -.15in 0 .2in; font-family: var(--font-display); font-size: 1.4rem; color: #444; }
.sheet-subtitle { margin: -.6rem 0 1.1rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink-soft); }
.card-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; align-items: end; flex-basis: 100%; }
.card-options .field { margin: 0; }
.face-note { margin: .2rem 0 0; font-size: .85rem; font-weight: 700; color: #333; overflow-wrap: anywhere; }
.face-large .face-note { font-size: 1.3rem; color: #111; }
.sheet-note { margin-top: .8rem; font-weight: 700; }
.edge-ink .face { border-top-color: #111; }
.edge-none .face { border-top-width: 0; }
.sheet.edge-none .sheet-bunting, .sheet.edge-ink .sheet-bunting { display: none; }
.sheet.edge-ink { border-color: #111; }
.face-subtitle { margin: 0; font-size: .85rem; color: #444; font-weight: 700; }
.face-large .face-subtitle { font-size: 1.4rem; color: #222; }
.face-postcard .face-subtitle, .face-insert .face-subtitle { font-size: 1rem; }

/* ---- Storage meter, tables, server owner area -------------------------------------------------------------------------------- */

.meter { display: block; width: 100%; height: 1rem; appearance: none; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter::-webkit-progress-bar { background: var(--surface-2); }
.meter::-webkit-progress-value { background: var(--a); border-radius: 999px; }
.meter::-moz-progress-bar { background: var(--a); border-radius: 999px; }
.meter.is-warn::-webkit-progress-value { background: var(--p); }
.meter.is-warn::-moz-progress-bar { background: var(--p); }
.storage-meter p { margin: .45rem 0 0; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0 3rem; }
.op-table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: .95rem; }
.op-table th, .op-table td { padding: .6rem .7rem; text-align: left; border-bottom: 2px solid var(--line); vertical-align: top; }
.op-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.op-table tbody th { font-weight: 800; }
.op-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.op-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.op-list li > span { flex: 1; min-width: 12rem; overflow-wrap: anywhere; }
.op-list form { margin: 0; }
.op-limit { margin-top: 1rem; max-width: 30rem; }

/* ---- Keepsakes: memory book, archive notice ----------------------------------------------------------------------------------- */

.archived-bar { margin: 0 0 1.2rem; padding: .7rem 1rem; border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--s); color: var(--s-ink); font-weight: 700; }
.archived-bar a { color: inherit; }
.book-options { display: grid; gap: 1rem; margin-top: 1rem; }
.chip-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.chip-fieldset legend { padding: 0; margin-bottom: .4rem; }

.book { max-width: 7.5in; margin: 0 auto 3rem; padding: .5in; background: #fff; color: #111; border: 1px solid #c9c9c9; }
.book-cover { text-align: center; padding: .9in 0 .8in; margin-bottom: .4in; border-bottom: 6px solid var(--p); break-after: page; }
.book-eyebrow { margin: 0; font: 800 .85rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #444; }
.book-title { margin: .3in 0; font-family: var(--font-display); font-size: calc(3.2rem * var(--ds)); line-height: 1.02; text-wrap: balance; }
.book-greeting, .book-thanks { max-width: 5in; margin: .2in auto; font-size: 1.1rem; white-space: pre-line; color: #333; }
.book-count { margin: .3in 0 0; font-weight: 700; }
.book-heading { margin: .35in 0 .2in; padding-bottom: .1in; font-family: var(--font-display); font-size: calc(1.9rem * var(--ds)); border-bottom: 3px solid #111; break-after: avoid; }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3in; }
.book-photo { margin: 0; break-inside: avoid; }
.book-photo img { display: block; width: 100%; height: auto; max-height: 3.6in; object-fit: contain; background: #f2f2f2; border: 1px solid #ccc; }
.book-photo figcaption { display: grid; gap: .15rem; padding-top: .08in; font-size: .92rem; }
.book-note { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; white-space: pre-line; overflow-wrap: anywhere; }
.book-from { color: #555; font-size: .8rem; font-weight: 700; }
.book-message { display: block; margin-top: .15rem; padding-left: .6rem; border-left: 3px solid var(--s); }
.book-message q, .book-entries q { display: block; quotes: none; font-family: 'Caveat', var(--font-display), cursive; font-size: 1.2rem; line-height: 1.3; white-space: pre-line; overflow-wrap: anywhere; }
.book-message q::before, .book-message q::after, .book-entries q::before, .book-entries q::after { content: none; }
.book-message cite, .book-entries cite { display: block; font: 700 .75rem/1.3 var(--font-body); font-style: normal; color: #555; }
.book-voice { display: block; font-size: .8rem; color: #555; }
.book-guestbook { break-before: page; }
.book-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: .2in; }
.book-entries li { break-inside: avoid; padding-left: .7rem; border-left: 4px solid var(--a); }
@media (max-width: 40rem) { .book { padding: 1rem; } .book-grid { grid-template-columns: 1fr; } }

/* ---- Prose (privacy) -------------------------------------------------------------------------------------------------- */

.prose { max-width: var(--measure); margin: 1rem auto 3rem; }
.prose h1 { margin-bottom: 1rem; }
.prose h2 { font-family: var(--font-display); font-size: calc(var(--fs-2) * var(--ds)); margin: 2rem 0 .6rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: .5rem; }

/* ---- Flip cards and the memory wall -------------------------------------------------------------------------------------- */

.wall-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1.7rem 1.4rem; margin-top: 1.2rem; align-items: start; }
.wall-grid > .polaroid:hover { transform: rotate(0) translateY(-3px); }

.polaroid.flip { padding: 0; border: 0; background: transparent; box-shadow: none; perspective: 1100px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, .9, .3, 1); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 6px; box-shadow: calc(4px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.flip-front { padding: .6rem .6rem 0; min-height: 19rem; }
.flip-front img { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--surface-2); }
.flip-back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; overflow: hidden; }
.flip .tile-open { display: block; }

/* After the flip, the back stops being the same size as the photo and grows to fit its messages. */
.flip.is-expanded .flip-back { position: relative; inset: auto; min-height: var(--front-h, 19rem); }
.flip.is-expanded .flip-front { position: absolute; inset: 0; }
.flip.is-expanded .back-paper { max-height: 30rem; }

.polaroid-caption { padding: .55rem .15rem .15rem; }
.polaroid-caption .from { display: block; font-family: var(--font-display); font-size: calc(1.05rem * var(--ds)); line-height: 1.25; }
.polaroid-caption .note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; color: var(--ink-soft); }
.polaroid-caption .note:empty { display: none; }
.flip .tile-actions { justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; padding: .4rem .1rem .7rem; }
.flip .tile-actions .turn-btn { flex: 1 1 100%; justify-content: center; margin-right: 0; }

.turn-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .85rem;
  background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
  font: 700 .88rem/1.1 var(--font-body); transition: background-color .15s, transform .12s ease-out;
}
.turn-btn:hover { background: var(--s); color: var(--s-ink); }
.turn-btn:active { transform: translateY(2px); }
.turn-btn .icon { width: 1.15rem; height: 1.15rem; }
.back-turn { margin: .3rem .5rem .6rem; align-self: flex-start; flex: none; }

.back-paper {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: .9rem .9rem .4rem; line-height: 1.6rem;
  background-image: repeating-linear-gradient(transparent, transparent calc(1.6rem - 1px), var(--p-tint) calc(1.6rem - 1px), var(--p-tint) 1.6rem);
  background-position: 0 .5rem;
}
.help-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 1.2rem 0 0; font-size: .98rem; color: var(--ink-soft); }
.help-line a { color: var(--ink); font-weight: 700; }
.help-line .icon { color: var(--a-text); }
.question-label { margin-top: 1rem; }
.guest-answer { display: block; font-size: .92rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.back-relation { margin: -.35rem 0 .15rem; font: 600 .85rem/1.35 var(--font-body); color: var(--ink-soft); overflow-wrap: anywhere; }
.back-from { font: 800 .76rem/1.6rem var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--p-text); }
.back-meta { font: 700 .8rem/1.6rem var(--font-body); color: var(--ink-soft); min-height: 1.6rem; }
.back-meta:empty { display: none; }
.batch-fields { display: grid; gap: .2rem; margin-top: .9rem; }
.back-story { font-family: 'Caveat', var(--font-display), cursive; font-size: 1.35rem; line-height: 1.6rem; white-space: pre-line; overflow-wrap: anywhere; }
.back-edit { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; margin: .1rem 0 .2rem; color: var(--ink); }
.back-messages { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .55rem; }
.back-message { padding: .3rem 0 .3rem .7rem; border-left: 4px solid var(--s); }
.back-message q { quotes: none; font-family: 'Caveat', var(--font-display), cursive; font-size: 1.3rem; line-height: 1.5rem; white-space: pre-line; overflow-wrap: anywhere; }
.back-message q::before, .back-message q::after { content: none; }
.back-message cite { display: block; font: 700 .78rem/1.3 var(--font-body); font-style: normal; color: var(--ink-soft); }
.back-message.is-pending { opacity: .75; border-left-style: dashed; }
.msg-tools { display: flex; gap: .9rem; margin-top: .15rem; font-size: .85rem; }
.msg-tools form { margin: 0; }
.message-form { display: grid; gap: .4rem; margin: 0; padding: .55rem .7rem .2rem; border-top: 2px dashed var(--line); background: var(--surface); }
.message-form .input { min-height: 3.4rem; font-size: .95rem; line-height: 1.35; background: var(--bg); }
/* Voice messages: record (tap, timer, stop), listen back, and play what others left. */
.voice-rec { display: grid; gap: .35rem; --level: 0; }
.voice-rec[hidden], .voice-rec [hidden] { display: none; }
.voice-start { justify-self: start; }
.voice-live { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .4rem .6rem; border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--p-tint); }
.voice-meter { display: inline-flex; align-items: center; gap: 3px; height: 1.6rem; }
.voice-meter i { width: 5px; height: 100%; border-radius: 3px; background: var(--p); transform-origin: center; transform: scaleY(calc(.18 + var(--level) * var(--k, 1))); transition: transform .08s linear; }
.voice-meter i:nth-child(1) { --k: .55; } .voice-meter i:nth-child(2) { --k: .85; } .voice-meter i:nth-child(3) { --k: 1.1; } .voice-meter i:nth-child(4) { --k: .8; } .voice-meter i:nth-child(5) { --k: .5; }
.voice-time { font: 800 1rem/1 var(--font-body); font-variant-numeric: tabular-nums; margin-right: auto; }
.voice-done { display: grid; gap: .3rem; }
.voice-done audio, .voice-clip audio { width: 100%; max-width: 22rem; height: 2.6rem; }
.voice-redo { display: flex; gap: 1rem; font-size: .88rem; }
.voice-note { margin: 0; min-height: 1.1rem; font-size: .85rem; color: var(--ink-soft); }
.voice-note:empty { display: none; }
.voice-clip { display: grid; gap: .2rem; margin: .25rem 0; }
.voice-label { display: inline-flex; align-items: center; gap: .35rem; font: 800 .8rem/1.2 var(--font-body); color: var(--a-text); }
.voice-label .icon { width: 1rem; height: 1rem; }
.tag-wait { background: var(--s); color: var(--s-ink); margin-left: 0; margin-top: .3rem; }
.tag-on { background: var(--a); color: var(--a-ink); margin-left: .4rem; vertical-align: .2em; }
.tile-edit { position: absolute; top: .1rem; left: .1rem; }

.link-back { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; text-decoration: none; margin-bottom: .9rem; color: var(--ink); }
.link-back:hover { text-decoration: underline; }
.wall-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 2rem; }
.wall-link p { max-width: 38ch; }
.wall-settings { max-width: 44rem; }
.wall-settings .check { margin: .7rem 0; }
.wall-settings .btn { margin-top: .5rem; }
.wall-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; }
.panel-block { margin-top: 2rem; }
.guestbook { margin-top: 2rem; }
.team-roles { max-width: 56rem; margin-bottom: 2rem; }
.invite-form { max-width: 40rem; margin-top: 2rem; }
.thanks { margin: 1rem 0 1.5rem; background: var(--s); color: var(--s-ink); }
.thanks-text { white-space: pre-line; font-family: var(--font-display); font-size: calc(var(--fs-1) * var(--ds)); line-height: 1.4; }
.closing-hint { margin: -.4rem 0 1rem; }
.guestbook-list { list-style: none; padding: 0; display: grid; gap: .8rem; margin: 1rem 0; }
.guestbook-entry { position: relative; padding: .7rem 1rem; border-left: 5px solid var(--a); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.guestbook-entry q { quotes: none; display: block; font-family: 'Caveat', var(--font-display), cursive; font-size: 1.45rem; line-height: 1.5rem; white-space: pre-line; overflow-wrap: anywhere; }
.guestbook-entry q::before, .guestbook-entry q::after { content: none; }
.guestbook-entry cite { display: block; margin-top: .2rem; font: 700 .85rem/1.3 var(--font-body); font-style: normal; color: var(--ink-soft); }
.guestbook-entry.is-pending { opacity: .75; border-left-style: dashed; }
.guestbook-form .input { background: var(--bg); }
.guestbook-host { max-width: 40rem; margin-top: 2rem; }
.guestbook-host .btn { margin-top: .6rem; }
.decade-head { font-family: var(--font-display); font-size: calc(var(--fs-2) * var(--ds)); margin: 2.2rem 0 -.4rem; padding-bottom: .3rem; border-bottom: var(--bw) solid var(--line); }
.decade-head:first-of-type { margin-top: 1.2rem; }
.pending-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
.pending-item { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding: .8rem 1rem; box-shadow: calc(3px * var(--shx, 1)) calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.pending-thumb { width: 4rem; height: 4rem; object-fit: cover; border-radius: 6px; border: 2px solid var(--line); flex: none; }
.pending-body { flex: 1; min-width: 12rem; }
.pending-body q { quotes: none; display: block; font-family: 'Caveat', var(--font-display), cursive; font-size: 1.35rem; line-height: 1.4rem; white-space: pre-line; overflow-wrap: anywhere; }
.pending-body q::before, .pending-body q::after { content: none; }
.pending-body cite { display: block; margin-top: .2rem; font: 600 .85rem/1.3 var(--font-body); font-style: normal; color: var(--ink-soft); }
.pending-actions { display: flex; gap: .5rem; }
.pending-actions form { margin: 0; }
.is-removing { opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner, .flip.is-flipped .flip-inner { transform: none; }
  .flip-back { position: relative; transform: none; display: none; min-height: 19rem; }
  .flip.is-flipped .flip-back { display: flex; }
  .flip.is-flipped .flip-front { display: none; }
}

/* ---- Slideshow ------------------------------------------------------------------------------------------------------------ */

.head-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.chrome-show { background: #120d0b; color: #fff; }
.chrome-show .topbar, .chrome-show .footer { display: none; }
.chrome-show .bunting { position: fixed; top: 0; left: 0; right: 0; z-index: 3; }
.chrome-show main { max-width: none; padding: 0; }
.show { position: fixed; inset: 0; display: grid; place-items: center; padding: 3.4rem 1rem 1.4rem; z-index: 2; }
.show-stage { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.show-frame {
  margin: 0; padding: .8rem .8rem 0; display: grid; grid-template-rows: 1fr auto; width: min(94vw, 1500px); height: 100%; max-height: 100%;
  background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 8px; box-shadow: 8px 10px 0 rgb(0 0 0 / .5);
}
.show-photos { position: relative; min-height: 0; }
.show-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.show-img.is-on { opacity: 1; }
.show-caption { padding: .7rem .3rem .9rem; text-align: center; font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.9rem); line-height: 1.25; min-height: 3.2rem; }
.chrome-show:has(.show[data-bg="theme"]) { background: var(--bg); color: var(--ink); }
.show[data-transition="none"] .show-img { transition: none; }
.show[data-transition="slide"] .show-img { transform: translateX(7%); transition: opacity .9s ease, transform .9s ease; }
.show[data-transition="slide"] .show-img.is-on { transform: none; }
.show[data-transition="zoom"] .show-img.is-on { animation: show-zoom 14s ease-out forwards; }
@keyframes show-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .show[data-transition] .show-img { animation: none !important; transform: none !important; } }
.show-caption:empty { min-height: 0; padding: 0; }
.wall-link:has(.show-options) { align-items: flex-start; }
.show-options { display: grid; gap: .9rem; flex: 1 1 22rem; min-width: 0; }
.show-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.show-checks { display: grid; gap: .1rem; }
.show-empty { text-align: center; max-width: 34rem; }
.show-empty .display { font-size: calc(var(--fs-4) * var(--ds)); margin-bottom: .6rem; }
.show-new { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); margin: 0; padding: .6rem 1.3rem; background: var(--s); color: var(--s-ink); border: var(--bw) solid var(--line); border-radius: 999px; font-weight: 800; box-shadow: 0 calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); opacity: 0; }
.show-new.is-showing { animation: show-new 4.2s ease both; }
@keyframes show-new { 0% { opacity: 0; transform: translate(-50%, 14px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); } }
.show-qr { position: fixed; right: 1rem; bottom: 1.2rem; z-index: 4; display: grid; gap: .35rem; justify-items: center; text-align: center; max-width: 14rem; padding: .8rem; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 16px; box-shadow: 4px 4px 0 rgb(0 0 0 / .5); font-size: .85rem; line-height: 1.3; }
.show-qr .qr-frame { width: 8.5rem; }
.show-qr .code-tiles { gap: .12rem; }
.show-qr .code-tile { width: 1.2rem; height: 1.7rem; font-size: .9rem; border-radius: 5px; box-shadow: 0 calc(2px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.show-qr .code-gap { width: .3rem; }
@media (min-width: 900px) {
  .show.has-qr .show-stage { padding-right: 15rem; }
  .show.has-qr .show-frame { width: 100%; }
}
.show-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; background: rgb(255 255 255 / .12); z-index: 5; }
.show-progress span { display: block; height: 100%; width: 0; background: var(--s); }
@keyframes show-progress { from { width: 0; } to { width: 100%; } }
.show-controls { position: fixed; top: 3.6rem; right: 1rem; z-index: 6; display: flex; gap: .5rem; opacity: 0; transition: opacity .4s; }
.show-controls.is-awake, .show-controls:focus-within { opacity: 1; }

/* ---- Guest bottom bar (phones) ------------------------------------------------------------------------------------------- */

.guestbar { display: none; }
.bar-btn.bar-nav { display: none; }
.standalone .bar-btn.bar-nav { display: grid; }
@media (display-mode: standalone) { .bar-btn.bar-nav { display: grid; } }

.bar-btn {
  display: grid; place-items: center; align-content: center; gap: .1rem; min-width: 4.1rem; min-height: 3.6rem; padding: .25rem .5rem;
  background: transparent; color: var(--ink); border: var(--bw) solid transparent; border-radius: 14px; cursor: pointer;
  font: 700 .82rem/1.1 var(--font-body);
}
.bar-btn .icon { width: 1.55rem; height: 1.55rem; }
.bar-btn:active { background: var(--surface-2); }
.bar-btn[aria-disabled="true"], .bar-add[aria-disabled="true"] { opacity: .45; }
.bar-add {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.6rem; padding: .4rem 1rem;
  background: var(--p); color: var(--p-ink); border: var(--bw) solid var(--line); border-radius: 16px; box-shadow: 0 calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); cursor: pointer;
  font: 800 1.2rem/1.1 var(--font-body);
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.bar-add .icon { width: 1.6rem; height: 1.6rem; }
.bar-add:active { transform: translateY(3px); box-shadow: 0 calc(1px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.bar-add span { white-space: nowrap; }
a.bar-add { text-decoration: none; }

/* Installed on the home screen there are four buttons, so everything gets a little tighter. */
.standalone .bar-btn { min-width: 3rem; padding: .25rem .1rem; font-size: .76rem; }
.standalone .bar-add { gap: .4rem; padding: .4rem .5rem; font-size: 1.02rem; }
.standalone .bar-add .icon { width: 1.4rem; height: 1.4rem; }
@media (display-mode: standalone) {
  .bar-btn { min-width: 3rem; padding: .25rem .1rem; font-size: .76rem; }
  .bar-add { gap: .4rem; padding: .4rem .5rem; font-size: 1.02rem; }
  .bar-add .icon { width: 1.4rem; height: 1.4rem; }
}

@media (max-width: 820px) {
  .chrome-guest .guestbar {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; gap: .5rem;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: var(--bw) solid var(--line);
  }
  .chrome-guest.has-bar main { padding-bottom: calc(var(--guestbar-h) + 3rem + env(safe-area-inset-bottom)); }
  .chrome-guest.has-bar .footer-inner { padding-bottom: calc(var(--guestbar-h) + 1.5rem + env(safe-area-inset-bottom)); }
  .chrome-guest.has-bar .toasts { bottom: calc(var(--guestbar-h) + 1rem + env(safe-area-inset-bottom)); }
}

/* ---- Small screens ----------------------------------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: .5rem; }
  .hero-copy .display { max-width: 14ch; }
  .hero-art { max-width: 26rem; justify-self: start; aspect-ratio: 1 / 1.15; }
  .form-page { grid-template-columns: 1fr; }
  .form-page .slim { grid-column: auto; }
  .welcome { grid-template-columns: 1fr; }
  .welcome-art { max-width: 13rem; justify-self: start; }
  .dash-grid, .share-grid { grid-template-columns: 1fr; }
  .rules > div { grid-template-columns: 1fr; gap: .25rem; }
  .step-2, .step-3, .step-4 { margin-left: 0; }

  /* The host dashboard becomes a phone app: a bottom tab bar replaces the top links. */
  .chrome-host .mainnav { display: none; }
  .chrome-host .topbar-actions .btn { display: none; }
  .chrome-host main { padding-bottom: calc(var(--tabbar-h) + 3.5rem + env(safe-area-inset-bottom)); }
  .chrome-host .footer-inner { padding-bottom: calc(var(--tabbar-h) + 1.5rem + env(safe-area-inset-bottom)); }
  .chrome-host .toasts { bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom)); }
  .chrome-host .save-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: .75rem; }
  html.has-unsaved body.chrome-host main { padding-bottom: calc(var(--tabbar-h) + 9rem + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface); border-top: var(--bw) solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: .1rem; min-height: var(--tabbar-h); padding: .35rem .2rem; color: var(--ink); text-decoration: none; font-size: .78rem; font-weight: 700; }
  .tabbar .icon { width: 1.5rem; height: 1.5rem; }
  .tabbar a[aria-current="page"] { background: var(--p-tint); box-shadow: inset 0 4px 0 var(--p); }
}

@media (max-width: 380px) { .brand-word { display: none; } }

@media (max-width: 560px) {
  .brand-word { font-size: 1rem; white-space: nowrap; }
  .topbar-inner { gap: .6rem; }
  .chrome-guest .brand-word, .chrome-host .brand-word { display: none; }
  .mainnav { display: none; }
  .invite { grid-template-columns: 1fr; }
  .qr-frame { width: 8.5rem; }
  .step { grid-template-columns: 1fr; gap: .75rem; }
  .code-ticket { width: 86%; }
  .wall { columns: 2 9rem; column-gap: 1rem; }
  .wall-host { columns: 2 9rem; }
  .stats dd { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motif-layer { display: none; }
}

/* ---- More frames. Each one styles the visible print: a plain polaroid, or the front of a flip card. -------------------------------- */

.flip-front { position: relative; }
html[data-frame="corners"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) { padding: .8rem .8rem 0; }
html[data-frame="corners"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::before {
  content: ""; position: absolute; inset: -3px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(135deg, var(--ink) 0 1.35rem, transparent 1.4rem) top left / 2.4rem 2.4rem no-repeat,
    linear-gradient(225deg, var(--ink) 0 1.35rem, transparent 1.4rem) top right / 2.4rem 2.4rem no-repeat,
    linear-gradient(45deg, var(--ink) 0 1.35rem, transparent 1.4rem) bottom left / 2.4rem 2.4rem no-repeat,
    linear-gradient(315deg, var(--ink) 0 1.35rem, transparent 1.4rem) bottom right / 2.4rem 2.4rem no-repeat;
  opacity: .82;
}
html[data-frame="stamp"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) {
  padding: 15px; border: 0; border-radius: 0; box-shadow: none; background: #FFFFFF; color: #1D1A3A; --ink-soft: #4A4670;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 50% 50%, #0000 5px, #000 5.6px) -9px -9px / 18px 18px round;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 50% 50%, #0000 5px, #000 5.6px) -9px -9px / 18px 18px round;
}
/* The mask cuts away the stamp's own shadow, so its parent draws the edge and shadow instead. */
html[data-frame="stamp"] :is(.wall, .strip, .flip-inner) { filter: drop-shadow(0 0 1px color-mix(in srgb, var(--ink) 55%, transparent)) drop-shadow(calc(3px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) color-mix(in srgb, var(--shadow) 45%, transparent)); }
html[data-frame="stamp"] .wall .flip-inner { filter: none; }
html[data-frame="film"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) {
  padding: 18px 7px 0; border-color: #17152A; border-radius: 3px; color: #F4F2FF; --ink-soft: #C9C4E6;
  background:
    repeating-linear-gradient(90deg, #FFFFFFE6 0 8px, transparent 8px 17px) 7px 5px / calc(100% - 14px) 8px no-repeat,
    repeating-linear-gradient(90deg, #FFFFFFE6 0 8px, transparent 8px 17px) 7px calc(100% - 5px) / calc(100% - 14px) 8px no-repeat,
    #17152A;
}
html[data-frame="film"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) :is(figcaption, .polaroid-caption) { padding-bottom: 18px; }
html[data-frame="film"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img { border-radius: 0; }
html[data-frame="double"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) { border: calc(var(--bw) * 2.4) double var(--line); padding: 14px 14px 0; }
html[data-frame="double"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img { outline: 1.5px solid var(--line); outline-offset: 4px; }
html[data-frame="sticker"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) {
  border: 0; padding: 9px 9px 0; border-radius: 18px; background: #FFFFFF; color: #1D1A3A; --ink-soft: #4A4670;
  box-shadow: 0 0 0 var(--bw) var(--line), calc(3px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow);
}
html[data-frame="sticker"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img { border-radius: 11px; }
html[data-frame="glow"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) {
  border: 3px solid var(--p); border-radius: 14px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--p) 75%, transparent), 0 0 30px color-mix(in srgb, var(--s) 55%, transparent);
}
html[data-frame="glow"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img { border-radius: 8px; }
html[data-frame="circle"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) { padding: .8rem .8rem 0; border-radius: 26px; text-align: center; }
html[data-frame="circle"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
html[data-frame="heart"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) { padding: .8rem .8rem 0; border-radius: 26px; text-align: center; }
html[data-frame="heart"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img {
  aspect-ratio: 1; object-fit: cover; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 34 32'%3E%3Cpath d='M20 35C8 26 3 19 3 12.5 3 7.5 7 4 11.5 4c3.5 0 6.5 2 8.5 5.5C22 6 25 4 28.5 4 33 4 37 7.5 37 12.5 37 19 32 26 20 35z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 34 32'%3E%3Cpath d='M20 35C8 26 3 19 3 12.5 3 7.5 7 4 11.5 4c3.5 0 6.5 2 8.5 5.5C22 6 25 4 28.5 4 33 4 37 7.5 37 12.5 37 19 32 26 20 35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-frame="gallery"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) { border: 10px solid var(--ink); border-radius: 2px; padding: 16px 16px 0; background: var(--surface); }
html[data-frame="gallery"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) img { border-radius: 0; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); }
html[data-frame="gold"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) {
  border: 8px solid #D4A017; border-image: linear-gradient(135deg, #B8860B, #FFE17A 28%, #C9971C 50%, #FFF1A8 72%, #B8860B) 1; padding: 10px 10px 0;
}
html[data-frame="rainbow"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) {
  border: 7px solid #FF4D6D; border-image: linear-gradient(135deg, #FF4D6D, #FFA53D, #FFE14D, #4CD47A, #3DB8FF, #8F5CFF) 1; padding: 9px 9px 0;
}
html[data-frame="washi"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::before,
html[data-frame="washi"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::after {
  content: ""; position: absolute; top: -.3rem; width: 3.8rem; height: 1.25rem; z-index: 3; pointer-events: none; opacity: .88;
  background: repeating-linear-gradient(45deg, var(--tape, var(--p)) 0 6px, color-mix(in srgb, var(--tape, var(--p)) 45%, #FFFFFF) 6px 12px);
}
html[data-frame="washi"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::before { left: -1rem; transform: rotate(-38deg); }
html[data-frame="washi"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::after { right: -1rem; transform: rotate(38deg); background: repeating-linear-gradient(-45deg, var(--tape, var(--a)) 0 6px, color-mix(in srgb, var(--tape, var(--a)) 45%, #FFFFFF) 6px 12px); }

/* Tape on top of any frame */
html[data-frame-tape="top"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::after {
  content: ""; position: absolute; top: -.7rem; left: 50%; width: 4.4rem; height: 1.4rem; transform: translateX(-50%) rotate(-3deg); z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--tape, var(--s)) 62%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
html[data-frame-tape="corners"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::before,
html[data-frame-tape="corners"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::after {
  content: ""; position: absolute; top: -.25rem; width: 3.6rem; height: 1.2rem; z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--tape, var(--a)) 60%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
html[data-frame-tape="corners"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::before { left: -.95rem; transform: rotate(-38deg); }
html[data-frame-tape="corners"] :is(.polaroid:not(.flip):not(.portrait), .flip-front)::after { right: -.95rem; left: auto; transform: rotate(38deg); }

/* More portrait shapes on the welcome screen */
.portrait.cover-heart, .portrait.cover-stamp, .portrait.cover-square { padding: .55rem; }
.portrait.cover-heart { background: none; border: 0; box-shadow: none; padding: 0; filter: drop-shadow(calc(4px * var(--shx, 1)) calc(5px * var(--shy, 1)) var(--shb, 0px) var(--shadow)); }
.portrait.cover-heart img, .portrait.cover-heart .ill {
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 34 32'%3E%3Cpath d='M20 35C8 26 3 19 3 12.5 3 7.5 7 4 11.5 4c3.5 0 6.5 2 8.5 5.5C22 6 25 4 28.5 4 33 4 37 7.5 37 12.5 37 19 32 26 20 35z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 34 32'%3E%3Cpath d='M20 35C8 26 3 19 3 12.5 3 7.5 7 4 11.5 4c3.5 0 6.5 2 8.5 5.5C22 6 25 4 28.5 4 33 4 37 7.5 37 12.5 37 19 32 26 20 35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.portrait.cover-square { transform: none; border-radius: 4px; }
.portrait.cover-stamp { padding: 15px; border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 50% 50%, #0000 5px, #000 5.6px) -9px -9px / 18px 18px round;
  mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle at 50% 50%, #0000 5px, #000 5.6px) -9px -9px / 18px 18px round; }
:is(.portrait.cover-heart, .portrait.cover-square, .portrait.cover-stamp) figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Floating things, headlines, garland and the wall: the rest of the host's choices ---------------------------------------------- */

html[data-float-spin="off"] .mote > * { animation: none !important; }
html[data-float-layer="front"] .motif-layer { z-index: 80; }
.mote-word { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1; white-space: nowrap; }
html[data-wall-captions="hide"] :is(.wall, .wall-host) :is(figcaption, .polaroid-caption) { display: none; }
html[data-bunting-sway="off"] .flag-sway { animation: none; }
.flag-letter { font: 800 15px/1 var(--font-display); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.flag-letter.f1 { fill: var(--p-ink); } .flag-letter.f2 { fill: var(--s-ink); } .flag-letter.f3 { fill: var(--a-ink); }

html[data-head-shadow="soft"] :is(.display, .section-title) { text-shadow: 0 .06em .22em color-mix(in srgb, var(--ink) 28%, transparent); }
html[data-head-shadow="pop"] :is(.display, .section-title) { text-shadow: .06em .06em 0 var(--s); }
html[data-head-shadow="glow"] :is(.display, .section-title) { text-shadow: 0 0 .22em color-mix(in srgb, var(--p) 70%, transparent), 0 0 .6em color-mix(in srgb, var(--s) 50%, transparent); }
html[data-head-shadow="stack"] :is(.display, .section-title) { text-shadow: .045em .045em 0 var(--s), .09em .09em 0 var(--a); }
html[data-head-case="upper"] :is(.display, .section-title) { text-transform: uppercase; }
html[data-head-case="lower"] :is(.display, .section-title) { text-transform: lowercase; }
html[data-head-case="capitalize"] :is(.display, .section-title) { text-transform: capitalize; }

/* ---- The look studio: simple and everything modes, looks, numbers and pictures ---------------------------------------------------- */

html[data-studio="simple"] .adv { display: none !important; }
.studio-mode { display: inline-flex; gap: .3rem; padding: .3rem; margin-top: 1.1rem; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface); }
.studio-mode label { position: relative; }
.studio-mode input { position: absolute; opacity: 0; inset: 0; }
.studio-mode span { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem 1.15rem; border-radius: 999px; font-weight: 800; cursor: pointer; }
.studio-mode input:checked + span { background: var(--ink); color: var(--bg); }
.studio-mode input:focus-visible + span { outline: 3px solid var(--a-text); outline-offset: 2px; }
.studio-note { margin-top: .6rem; }
.studio-section-intro { margin: -.2rem 0 1rem; }

.look-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.look-option { position: relative; display: block; }
.look-option > input { position: absolute; opacity: 0; inset: 0; }
.look-card { display: grid; height: 100%; overflow: hidden; border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.look-top { position: relative; display: grid; gap: .25rem; padding: .85rem .95rem .8rem; background: var(--pb); color: #1D1A3A; border-bottom: var(--bw) solid var(--line); }
.look-top strong { font-family: var(--pf, var(--font-display)); font-size: 1.4rem; line-height: 1.1; }
.look-swatch { display: flex; gap: .3rem; }
.look-swatch i { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid #1D1A3A; }
.look-swatch i:nth-child(1) { background: var(--pp); } .look-swatch i:nth-child(2) { background: var(--ps); } .look-swatch i:nth-child(3) { background: var(--pa); }
.look-motif { position: absolute; top: .7rem; right: .8rem; display: flex; gap: .2rem; color: var(--pp); }
.look-motif svg { width: 1.6rem; height: 1.6rem; }
.look-motif .look-emoji { font-size: 1.3rem; line-height: 1; }
.look-blurb { font-size: .9rem; margin: 0; }
.look-changes { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; margin: 0; padding: .7rem .95rem .9rem; font-size: .88rem; }
.look-changes dt { font-weight: 800; color: var(--ink-soft); }
.look-changes dd { margin: 0; }
.look-option > input:checked + .look-card { outline: 4px solid var(--ink); outline-offset: 2px; box-shadow: calc(4px * var(--shx, 1)) calc(4px * var(--shy, 1)) var(--shb, 0px) var(--shadow); }
.look-option > input:focus-visible + .look-card { outline: 4px solid var(--a-text); outline-offset: 3px; }

.style-groups { display: grid; gap: 1.2rem; }
.num-field { display: grid; grid-template-columns: minmax(0, 1fr) 6.2rem auto; gap: .5rem .7rem; align-items: center; }
.num-field input[type="range"] { width: 100%; accent-color: var(--p); min-height: 2.75rem; }
.num-field .num-box { display: flex; align-items: center; gap: .3rem; }
.num-field input[type="number"] { width: 100%; min-height: 2.75rem; padding: .35rem .5rem; font: inherit; font-weight: 700; color: var(--ink); background: var(--bg); border: var(--bw) solid var(--line); border-radius: var(--r-sm); }
.num-field .unit { font-weight: 700; color: var(--ink-soft); min-width: 1.2rem; }
.num-field.is-auto input[type="range"] { opacity: .45; }
.color-auto { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.color-auto input[type="color"] { width: 4.5rem; height: 2.9rem; padding: 3px; background: var(--bg); border: var(--bw) solid var(--line); border-radius: 10px; cursor: pointer; }
.text-field .input { max-width: 26rem; }

.motif-chip span { gap: .45rem; padding-left: .8rem; }
.motif-chip svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--p-text); }
.chip input:checked + span svg { color: currentColor; }
.pic-list { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin: .4rem 0 .8rem; }
.pic-list li { display: grid; gap: .3rem; justify-items: center; }
.pic-list img { width: 4.5rem; height: 4.5rem; object-fit: contain; background: var(--bg); border: var(--bw) solid var(--line); border-radius: 12px; padding: .25rem; }
.pic-list .check { font-size: .85rem; }
.emoji-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.emoji-row button { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.35rem; line-height: 1; border: var(--bw) solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.emoji-row button:hover { background: var(--s); }
.words-box { font-size: 1.15rem; }
.font-badge { justify-self: start; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 800; background: var(--a); color: var(--a-ink); }
.font-pick .font-option { align-content: start; }
.font-sample { font-weight: 700; }
.frame-pick .chip span, .pattern-pick .chip span { gap: .5rem; }
.pattern-dot { border: 2px solid var(--line); flex: none; }
.upload-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bg-thumb { width: 7rem; height: 4.5rem; object-fit: cover; border: var(--bw) solid var(--line); border-radius: 10px; }

/* ---- The memory book's own settings --------------------------------------------------------------------------------------------- */

.book { max-width: calc(var(--bk-w, 7.5in) + 2 * var(--bk-pad, .5in)); padding: var(--bk-pad, .5in); background: var(--bk-paper, #fff); color: var(--bk-ink, #111); font-family: var(--bk-body, var(--font-body)); font-size: calc(1rem * var(--bk-xs, 1)); }
.book-cover { border-bottom-color: var(--bk-a1, var(--p)); }
.book-cover-portrait { width: 2.6in; max-width: 60%; margin: 0 auto .3in; }
.book-cover-portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--bk-a1, var(--p)); }
.book-title { font-family: var(--bk-head, var(--font-display)); font-size: calc(3.2rem * var(--ds) * var(--bk-ts, 1)); }
.book-subtitle, .book-eyebrow, .book-greeting, .book-thanks, .book-from, .book-voice, .book-message cite, .book-entries cite { color: var(--bk-soft, #444); }
.book-heading { font-family: var(--bk-head, var(--font-display)); border-bottom-color: var(--bk-ink, #111); }
.book[data-bk-headingline="none"] .book-heading { border-bottom: 0; }
.book[data-bk-headingline="band"] .book-heading { border-bottom: 0; padding: .08in .15in; background: var(--bk-a1, var(--p)); color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.book[data-bk-headcase="upper"] :is(.book-heading, .book-title) { text-transform: uppercase; letter-spacing: .03em; }
.book-grid { grid-template-columns: repeat(var(--bk-cols, 2), minmax(0, 1fr)); gap: var(--bk-gap, .3in); }
.book-page + .book-page { margin-top: var(--bk-gap, .3in); }
.book-page { break-after: page; }
.book-page:last-child { break-after: auto; }
.book-photo img { max-height: var(--bk-ph, 3.6in); }
.book-note { font-family: var(--bk-head, var(--font-display)); }
.book-message { border-left-color: var(--bk-a2, var(--s)); }
.book-entries li { border-left-color: var(--bk-a3, var(--a)); }
.book-message q, .book-entries q { font-family: var(--bk-note, 'Caveat', var(--font-display), cursive); }
.book-contents { break-after: page; padding: .4in 0; }
.book-contents ol { display: grid; gap: .12in; padding-left: 1.3em; font-size: 1.2rem; }
.book-closing { break-before: page; display: grid; place-items: center; min-height: 6in; text-align: center; }
.book-closing p { max-width: 5in; font-family: var(--bk-head, var(--font-display)); font-size: 1.7rem; line-height: 1.3; white-space: pre-line; }
.book[data-bk-fit="cover"] .book-photo img { width: 100%; height: var(--bk-ph, 3.6in); object-fit: cover; }
.book[data-bk-frame="none"] .book-photo img { border: 0; background: none; }
.book[data-bk-frame="polaroid"] .book-photo { padding: .1in .1in 0; background: #fff; border: 1px solid #bbb; box-shadow: 2px 3px 0 #0002; }
.book[data-bk-frame="polaroid"] .book-photo img { border: 0; }
.book[data-bk-frame="polaroid"] .book-photo figcaption { padding: .08in .02in .12in; }
.book[data-bk-frame="round"] .book-photo img { border-radius: .18in; border: 0; }
.book[data-bk-frame="shadow"] .book-photo img { border: 0; box-shadow: 0 .04in .14in #0004; }
.book[data-bk-frame="tape"] .book-photo { position: relative; padding-top: .1in; }
.book[data-bk-frame="tape"] .book-photo::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.1in; height: .26in; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--bk-a2, var(--s)) 65%, transparent); z-index: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.book[data-bk-frame="double"] .book-photo img { border: 5px double var(--bk-ink, #111); padding: .05in; background: var(--bk-paper, #fff); }
.book[data-bk-frame="gold"] .book-photo img { border: .07in solid #D4A017; border-image: linear-gradient(135deg, #B8860B, #FFE17A 30%, #C9971C 50%, #FFF1A8 70%, #B8860B) 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.book[data-bk-frame="circle"] .book-photo img { aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%; border: 3px solid var(--bk-a1, var(--p)); }
.book[data-bk-tilt="tilted"] .book-photo:nth-child(odd) { transform: rotate(-1.2deg); }
.book[data-bk-tilt="tilted"] .book-photo:nth-child(even) { transform: rotate(1deg); }
@media print { .book { background: var(--bk-paper, #fff); -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (max-width: 40rem) { .book-grid { grid-template-columns: repeat(min(2, var(--bk-cols, 2)), minmax(0, 1fr)); } }
.book-design { display: grid; gap: 1.25rem; }
.book-preview { width: 100%; height: 80vh; min-height: 32rem; border: var(--bw) solid var(--line); border-radius: var(--r); background: #fff; }
@media (min-width: 70rem) {
  .book-design { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; }
  .book-preview-wrap { position: sticky; top: 1rem; }
}
.book-sample { overflow: auto; max-height: 85vh; border: var(--bw) solid var(--line); border-radius: var(--r); background: #fff; }
.book-sample .book { margin: 0 auto; border: 0; }
.book-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* ---- The look studio's sample: a small page that shows every choice as it is made ------------------------------------------- */

.studio-layout { display: block; }
.look-sample-panel { min-width: 0; }
.look-sample-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: .6rem; }
.look-sample-head .section-title { margin: 0; }
.look-sample-head .hint { margin: 0; }
.sample-close { margin-left: auto; }
.look-sample {
  position: relative; isolation: isolate; overflow: hidden; min-height: 22rem; padding-bottom: 1rem;
  background-color: var(--bg); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r-lg);
}
/* Fixed backgrounds are drawn against the whole window, so inside the sample and the swatches they scroll with the box. */
:is(.look-sample, .pattern-dot) { background-attachment: scroll !important; }
:is(.look-sample, .pat-hearts, .pat-stars)::after { position: absolute !important; }
.look-sample-body { position: relative; z-index: 1; padding: .2rem 1rem 0; }
.look-sample .eyebrow { margin: .9rem 0 .3rem; }
.look-sample .display { font-size: calc(2rem * var(--ds)); margin: 0 0 .4rem; overflow-wrap: anywhere; }
.sample-text { font-size: .95rem; margin: 0 0 .7rem; }
.sample-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .4rem; }
.sample-buttons .btn { pointer-events: none; }
.look-sample .wall { columns: 2 6rem; column-gap: .9rem; margin-top: .9rem; padding: 0 .2rem; }
.look-sample .wall > .polaroid { margin-bottom: .9rem; }
/* The sample is a narrow box, so the real wall's column widths would give two columns at every size; use counts instead. */
html[data-wall="tight"] .look-sample .wall { columns: 3 4rem; column-gap: .6rem; }
html[data-wall="normal"] .look-sample .wall { columns: 2 6rem; }
html[data-wall="roomy"] .look-sample .wall { columns: 1; max-width: 15rem; margin-inline: auto; }
.look-sample .polaroid figcaption { font-size: calc(.85rem * var(--ds)); padding: .4rem .1rem .5rem; }
.look-sample .polaroid figcaption .note { font-size: .78rem; }
.sample-bunting { position: relative; z-index: 2; height: 24px; pointer-events: none; }
.sample-bunting svg { display: block; overflow: visible; }

/* Floating things inside the sample move across the sample, not the whole window. */
.motif-layer.motif-sample { position: absolute; inset: 0; z-index: 0; container-type: size; }
html[data-float-layer="front"] .motif-layer.motif-sample { z-index: 3; }
.motif-sample :is(.mote-fall, .mote-fall-sway) { animation-name: fall-in-box; }
.motif-sample :is(.mote-rise, .mote-rise-slow, .mote-rise-wobble) { animation-name: rise-in-box; }
.motif-sample .mote-flutter { animation-name: flutter-in-box; }
@keyframes fall-in-box { from { transform: translate3d(0, -14cqh, 0); } to { transform: translate3d(5cqw, 112cqh, 0); } }
@keyframes rise-in-box { from { transform: translate3d(0, 112cqh, 0); } to { transform: translate3d(2cqw, -22cqh, 0); } }
@keyframes flutter-in-box {
  0% { transform: translate(0, 4cqh) rotate(-6deg); } 25% { transform: translate(26cqw, -8cqh) rotate(8deg); }
  50% { transform: translate(52cqw, 6cqh) rotate(-5deg); } 75% { transform: translate(78cqw, -6cqh) rotate(7deg); }
  100% { transform: translate(112cqw, 3cqh) rotate(-4deg); }
}

/* Phones and narrower windows: the sample is a sheet that slides up from the "Sample" button. */
.sample-toggle {
  position: fixed; left: var(--gutter); z-index: 41; bottom: calc(1rem + var(--save-bar-h, 0px) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .4rem; box-shadow: calc(3px * var(--shx, 1)) calc(3px * var(--shy, 1)) var(--shb, 0px) var(--shadow);
}
@media (max-width: 69.99rem) {
  .look-sample-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: min(78vh, 46rem); overflow: auto;
    padding: .8rem var(--gutter) calc(1rem + env(safe-area-inset-bottom));
    background: var(--surface); border-top: var(--bw) solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--ink) 22%, transparent);
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease-out, visibility 0s linear .25s;
  }
  .look-sample-panel.is-open { transform: none; visibility: visible; transition: transform .25s ease-out; }
}
@media (max-width: 860px) {
  .chrome-host .sample-toggle { bottom: calc(var(--tabbar-h) + .75rem + var(--save-bar-h, 0px) + env(safe-area-inset-bottom)); }
  .chrome-host .look-sample-panel { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); max-height: min(70vh, 40rem); }
}
/* Wide screens: two columns, with the sample beside the form, staying in view while you scroll. */
@media (min-width: 70rem) {
  .studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.75rem; align-items: start; }
  .studio-layout .theme-form { max-width: none; }
  .look-sample-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
  .sample-toggle, .sample-close { display: none; }
}

/* ---- Little examples on the choices themselves ---------------------------------------------------------------------------- */

.chip[data-chip] span { gap: .45rem; }
.pattern-dot { width: 2.3rem; height: 1.45rem; border-radius: .45rem; position: relative; overflow: hidden; background-color: var(--bg); }
.look-floats { display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.look-floats > span { display: inline-flex; align-items: center; gap: .25rem; }
.look-floats svg { width: 1.05rem; height: 1.05rem; color: var(--p-text); }

/* Frames, drawn small */
.chip-art { display: inline-block; flex: none; width: 1.5rem; height: 1.25rem; position: relative; box-sizing: border-box; }
.chip[data-chip^="frame:"] .chip-art {
  padding: 2px 2px 4px; border: 1.5px solid currentColor; background: linear-gradient(160deg, #7CC6FF 0 55%, #5CC27A 55%) content-box, #FFFFFF;
}
.chip[data-chip="frame:plain"] .chip-art { padding: 0; }
.chip[data-chip="frame:round"] .chip-art { border-radius: 6px; padding: 2px; background-clip: content-box, border-box; }
.chip[data-chip="frame:tape"] .chip-art::after { content: ""; position: absolute; top: -4px; left: 50%; width: 10px; height: 5px; transform: translateX(-50%) rotate(-6deg); background: color-mix(in srgb, var(--s) 75%, transparent); }
.chip[data-chip="frame:corners"] .chip-art::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(135deg, currentColor 5px, transparent 5px) top left / 9px 9px no-repeat, linear-gradient(225deg, currentColor 5px, transparent 5px) top right / 9px 9px no-repeat, linear-gradient(45deg, currentColor 5px, transparent 5px) bottom left / 9px 9px no-repeat, linear-gradient(315deg, currentColor 5px, transparent 5px) bottom right / 9px 9px no-repeat; }
.chip[data-chip="frame:stamp"] .chip-art { border: 2px dotted currentColor; padding: 2px; }
.chip[data-chip="frame:film"] .chip-art { border-color: #17152A; padding: 4px 1px; background: repeating-linear-gradient(90deg, #FFF 0 2px, transparent 2px 4px) 0 1px / 100% 2px no-repeat, repeating-linear-gradient(90deg, #FFF 0 2px, transparent 2px 4px) 0 calc(100% - 1px) / 100% 2px no-repeat, linear-gradient(160deg, #7CC6FF 0 55%, #5CC27A 55%) content-box, #17152A; }
.chip[data-chip="frame:double"] .chip-art { border: 4px double currentColor; padding: 1px; }
.chip[data-chip="frame:sticker"] .chip-art { border: 0; border-radius: 5px; padding: 2px; box-shadow: 0 0 0 1.5px currentColor; }
.chip[data-chip="frame:glow"] .chip-art { border-color: var(--p); box-shadow: 0 0 5px var(--p); padding: 1px; }
.chip[data-chip="frame:circle"] .chip-art { width: 1.3rem; height: 1.3rem; border-radius: 50%; padding: 2px; background-clip: content-box, border-box; }
.chip[data-chip="frame:circle"] .chip-art { background: radial-gradient(circle, #7CC6FF 0 45%, #5CC27A 46% 64%, transparent 65%), #FFFFFF; }
.chip[data-chip="frame:heart"] .chip-art {
  border: 0; padding: 0; background: linear-gradient(160deg, #FF7AA2, #FF3D6E);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 34 32'%3E%3Cpath d='M20 35C8 26 3 19 3 12.5 3 7.5 7 4 11.5 4c3.5 0 6.5 2 8.5 5.5C22 6 25 4 28.5 4 33 4 37 7.5 37 12.5 37 19 32 26 20 35z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 34 32'%3E%3Cpath d='M20 35C8 26 3 19 3 12.5 3 7.5 7 4 11.5 4c3.5 0 6.5 2 8.5 5.5C22 6 25 4 28.5 4 33 4 37 7.5 37 12.5 37 19 32 26 20 35z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chip[data-chip="frame:gallery"] .chip-art { border: 3px solid currentColor; padding: 2px; }
.chip[data-chip="frame:washi"] .chip-art::after { content: ""; position: absolute; top: -3px; left: -4px; width: 9px; height: 4px; transform: rotate(-38deg); background: repeating-linear-gradient(45deg, var(--p) 0 2px, #FFF 2px 4px); }
.chip[data-chip="frame:gold"] .chip-art { border: 3px solid #D4A017; border-image: linear-gradient(135deg, #B8860B, #FFE17A, #B8860B) 1; padding: 1px; }
.chip[data-chip="frame:rainbow"] .chip-art { border: 3px solid #FF4D6D; border-image: linear-gradient(135deg, #FF4D6D, #FFA53D, #FFE14D, #4CD47A, #3DB8FF, #8F5CFF) 1; padding: 1px; }
.chip[data-chip="frame:picture"] .chip-art { border-style: dashed; }

/* Garlands, drawn small */
.chip[data-chip^="bunting:"] .chip-art { width: 1.9rem; height: 1.15rem; background: var(--p-text); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.chip[data-chip="bunting:none"] .chip-art { display: none; }
.chip[data-chip="bunting:flags"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 3.5l3 9 3-7.3zM13 5.2l2 9.5 2.6-9.6zM21 4.7l3 8.5 2.4-10z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4 3.5l3 9 3-7.3zM13 5.2l2 9.5 2.6-9.6zM21 4.7l3 8.5 2.4-10z'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:pennants"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M5 3.6l1.5 13.4 1.8-12.3zM14 5.3l1 12.5 1.7-12.4zM22.5 4.6l1.4 12.8 1.6-13.9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M5 3.6l1.5 13.4 1.8-12.3zM14 5.3l1 12.5 1.7-12.4zM22.5 4.6l1.4 12.8 1.6-13.9z'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:lights"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='6.5' cy='9' r='3'/%3E%3Ccircle cx='15' cy='11' r='3'/%3E%3Ccircle cx='23.5' cy='9' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='6.5' cy='9' r='3'/%3E%3Ccircle cx='15' cy='11' r='3'/%3E%3Ccircle cx='23.5' cy='9' r='3'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:ribbons"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4.5 3.4h4v12l-2-2-2 2zM13 5h4v12l-2-2-2 2zM21.5 4.3h4v12l-2-2-2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4.5 3.4h4v12l-2-2-2 2zM13 5h4v12l-2-2-2 2zM21.5 4.3h4v12l-2-2-2 2z'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:hearts"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.5 15C3 12.5 2 10.6 2 9c0-1.4 1.1-2.4 2.3-2.4 1 0 1.7.6 2.2 1.5.5-.9 1.2-1.5 2.2-1.5C9.9 6.6 11 7.6 11 9c0 1.6-1 3.5-4.5 6zM15 17c-3.5-2.5-4.5-4.4-4.5-6 0-1.4 1.1-2.4 2.3-2.4 1 0 1.7.6 2.2 1.5.5-.9 1.2-1.5 2.2-1.5 1.2 0 2.3 1 2.3 2.4 0 1.6-1 3.5-4.5 6zM23.5 15C20 12.5 19 10.6 19 9c0-1.4 1.1-2.4 2.3-2.4 1 0 1.7.6 2.2 1.5.5-.9 1.2-1.5 2.2-1.5C26.9 6.6 28 7.6 28 9c0 1.6-1 3.5-4.5 6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.5 15C3 12.5 2 10.6 2 9c0-1.4 1.1-2.4 2.3-2.4 1 0 1.7.6 2.2 1.5.5-.9 1.2-1.5 2.2-1.5C9.9 6.6 11 7.6 11 9c0 1.6-1 3.5-4.5 6zM15 17c-3.5-2.5-4.5-4.4-4.5-6 0-1.4 1.1-2.4 2.3-2.4 1 0 1.7.6 2.2 1.5.5-.9 1.2-1.5 2.2-1.5 1.2 0 2.3 1 2.3 2.4 0 1.6-1 3.5-4.5 6zM23.5 15C20 12.5 19 10.6 19 9c0-1.4 1.1-2.4 2.3-2.4 1 0 1.7.6 2.2 1.5.5-.9 1.2-1.5 2.2-1.5C26.9 6.6 28 7.6 28 9c0 1.6-1 3.5-4.5 6z'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:stars"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.5 5.5l1.2 2.8 3 .3-2.3 2 .7 3-2.6-1.6-2.6 1.6.7-3-2.3-2 3-.3zM15 7.5l1.2 2.8 3 .3-2.3 2 .7 3-2.6-1.6-2.6 1.6.7-3-2.3-2 3-.3zM23.5 5.5l1.2 2.8 3 .3-2.3 2 .7 3-2.6-1.6-2.6 1.6.7-3-2.3-2 3-.3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.5 5.5l1.2 2.8 3 .3-2.3 2 .7 3-2.6-1.6-2.6 1.6.7-3-2.3-2 3-.3zM15 7.5l1.2 2.8 3 .3-2.3 2 .7 3-2.6-1.6-2.6 1.6.7-3-2.3-2 3-.3zM23.5 5.5l1.2 2.8 3 .3-2.3 2 .7 3-2.6-1.6-2.6 1.6.7-3-2.3-2 3-.3z'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:balloons"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cellipse cx='6.5' cy='10.5' rx='3' ry='4'/%3E%3Cellipse cx='15' cy='12.5' rx='3' ry='4'/%3E%3Cellipse cx='23.5' cy='10.5' rx='3' ry='4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cellipse cx='6.5' cy='10.5' rx='3' ry='4'/%3E%3Cellipse cx='15' cy='12.5' rx='3' ry='4'/%3E%3Cellipse cx='23.5' cy='10.5' rx='3' ry='4'/%3E%3C/svg%3E"); }
.chip[data-chip="bunting:letters"] .chip-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath fill-rule='evenodd' d='M3 3.5h7l-3.5 10zM5 5.5l1.5 4.2 1.5-4.2zM11.5 5h7l-3.5 10zM14 7v2h2.2v-2zM20 4.3h7l-3.5 10zM22 6.3h3v1.4h-3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 2Q15 8 29 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath fill-rule='evenodd' d='M3 3.5h7l-3.5 10zM5 5.5l1.5 4.2 1.5-4.2zM11.5 5h7l-3.5 10zM14 7v2h2.2v-2zM20 4.3h7l-3.5 10zM22 6.3h3v1.4h-3z'/%3E%3C/svg%3E"); }
.chip input:checked + span .chip-art { background-color: currentColor; }
.chip[data-chip^="frame:"] input:checked + span .chip-art { background-color: #FFFFFF; }

/* Headline effects, shapes and outlines shown on their own chips */
.chip[data-chip="head.shadow:soft"] span { text-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 35%, transparent); }
.chip[data-chip="head.shadow:pop"] span { text-shadow: 2px 2px 0 var(--s); }
.chip[data-chip="head.shadow:glow"] span { text-shadow: 0 0 6px var(--p), 0 0 12px var(--s); }
.chip[data-chip="head.shadow:stack"] span { text-shadow: 1.5px 1.5px 0 var(--s), 3px 3px 0 var(--a); }
.chip[data-chip="corners:sharp"] span { border-radius: 3px; }
.chip[data-chip="corners:soft"] span { border-radius: 12px; }
.chip[data-chip="border:thin"] span { border-width: 1px; }
.chip[data-chip="border:bold"] span { border-width: 4px; }
.chip[data-chip="shadow:hard"] span { box-shadow: 3px 3px 0 var(--shadow); }
.chip[data-chip="shadow:soft"] span { box-shadow: 0 3px 9px color-mix(in srgb, var(--ink) 30%, transparent); }
/* Settings that belong to one choice sit right under it, set in a little. */
.option-children { display: grid; gap: 1rem; margin: .8rem 0 .2rem; padding: .2rem 0 .2rem 1rem; border-left: 4px solid var(--p-tint); }
.option-children:not(:has(> :not([hidden]))) { display: none; }
html[data-frame="stamp"] :is(.polaroid:not(.flip):not(.portrait), .flip-front) :is(figcaption, .polaroid-caption) { padding-inline: .35rem; }
/* The swatch is tiny, so it shows the pattern stronger and smaller than the page does. */
.pattern-dot { --pat-k: 2.8; --pat-s: .55; isolation: isolate; }

/* ---- Look studio: folding sections, jump menu, changed marks, "Surprise me" --------------------------------------------------- */

.studio-jump {
  position: sticky; top: 0; z-index: 35; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin;
  margin: 0 0 1rem; padding: .55rem .2rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
}
.studio-jump a {
  flex: none; display: inline-flex; align-items: center; min-height: 2.6rem; padding: .3rem .95rem; border: var(--bw) solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.studio-jump a:hover { background: var(--p-tint); }
.studio-jump a[aria-current="true"] { background: var(--ink); color: var(--bg); }
@media (min-width: 70rem) { .save-bar { top: 4.2rem; } } /* below the jump menu */

.studio-section { scroll-margin-top: 4.5rem; padding: 0; }
.studio-section > .section-summary {
  display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.4rem; cursor: pointer; list-style: none; border-radius: var(--r-lg);
}
.studio-section > .section-summary::-webkit-details-marker { display: none; }
.studio-section > .section-summary .section-title { margin: 0; }
.studio-section > .section-summary::after {
  content: ""; margin-left: auto; width: .7rem; height: .7rem; flex: none; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.studio-section[open] > .section-summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.studio-section > .section-summary:hover { background: var(--p-tint); }
.studio-section > .section-summary:focus-visible { outline: 3px solid var(--a-text); outline-offset: 2px; }
.section-fields { border: 0; margin: 0; padding: 0 1.4rem 1.4rem; min-width: 0; }
.section-tools { display: flex; justify-content: flex-end; margin: -.4rem 0 .4rem; }
.section-tools:has(> [hidden]:only-child) { display: none; }
.section-changed { padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 800; background: var(--p); color: var(--p-ink); }

/* A dot beside anything changed from the look you picked */
.studio-section .is-changed { position: relative; }
.studio-section .is-changed::before {
  content: ""; position: absolute; left: -.9rem; top: .55rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 3px var(--p-tint);
}
.studio-section .chip-pick.is-changed::before, .studio-section .font-pick.is-changed::before { top: 1.1rem; }

.surprise-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; }
.surprise-row .hint { margin: 0; }
.studio-elsewhere { margin: .5rem 0 1.5rem; }
.guest-page-settings { display: grid; gap: .6rem; }
.guest-page-settings .theme-form { max-width: none; }

/* Sample guest page (/demo): the look menu is only for sampling, so it is set apart from the page it changes. */
.sampler { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: var(--bw) solid var(--line); padding: .6rem var(--gutter); }
.sampler-form { max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.sampler-pick { display: flex; align-items: center; gap: .6rem; flex: 0 1 22rem; }
.sampler-label { font-weight: 700; white-space: nowrap; }
.sampler-note { margin: 0; flex: 1 1 18rem; font-size: .9rem; color: var(--ink-soft); }
.demo-intro { max-width: 46rem; margin: 1.5rem auto .5rem; text-align: center; }
.demo-step { display: flex; align-items: center; gap: .6rem; max-width: 62rem; margin: 2.5rem auto 1rem; font-size: 1.15rem; }
.demo-step span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--p); color: var(--p-ink); font-weight: 800; flex: none; }
.demo-picked { font-weight: 600; }
.try-it { max-width: 62rem; margin: 3rem auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: center; }
.try-copy { flex: 1 1 18rem; max-width: 30rem; }
.try-it .qr-frame { width: 11rem; flex: none; }