/* Guest site of the restaurant: warm paper, deep red, a gold ribbon. Light theme only.

   Rules for whoever edits this file (tests/test_guest_ui.py checks most of them):
   - system fonts only, no url(), no @import, no @font-face: the CSP allows nothing from outside;
   - motion uses transform and opacity only, and all of it is switched off under prefers-reduced-motion;
   - it must work in Safari 13 and in in-app browsers: no flex "gap", no clamp(), no "inset", no aspect-ratio,
     no :has(), and :focus-visible only inside :not() in a rule of its own (an unknown selector drops the rule);
   - touch targets are at least 48px high; text is dark on light with strong contrast (sunlight at a table). */

:root {
  --bg: #fbf5e9;
  --card: #fffdf8;
  --ink: #2b1a12;
  --ink2: #5b4638;
  --line: #8f7a62;
  --soft: #e3d5bd;
  --red: #960407;
  --red2: #7d0306;
  --tint: #f9e2d6;
  --gold: #d9a21b;
  --errbg: #fde8e2;
  --err: #7d1410;
  color-scheme: only light;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.125rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

p { margin: 0 0 12px; }
a { color: var(--red); }

/* --- the restaurant's name with an embroidery edge ------------------------------------------- */

.brand {
  flex: 0 0 auto;
  background: var(--red2);
  color: #fff6e3;
  text-align: center;
}

.brand-name {
  display: block;
  padding: 10px 16px 8px;
  font: 700 1.1875rem/1.2 Georgia, "Times New Roman", Times, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand:after {
  content: "";
  display: block;
  height: 8px;
  background-color: var(--bg);
  background-image:
    linear-gradient(135deg, var(--red2) 25%, transparent 25%),
    linear-gradient(225deg, var(--red2) 25%, transparent 25%);
  background-size: 16px 16px;
}

/* --- page frame: a scrolling body and an action bar that stays at the bottom of the screen ----- */

.app {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.screen {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.screen-body {
  flex: 1 0 auto;
  padding: 18px 16px 24px;
  overflow: hidden;
}

.bar {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  padding: 10px 16px 14px;
  border-top: 2px solid var(--soft);
  background: var(--bg);
}

/* A question answered by typing. The on-screen keyboard covers a bar that sticks to the bottom of
   the screen (browsers do not shrink the layout for the keyboard), so on such a question the
   buttons simply follow the field. Set per question, not on focus: nothing moves under a finger. */
.screen.is-text .screen-body { flex: 0 0 auto; }
.screen.is-text .bar { position: static; }

.bar-row { display: flex; }
.bar-row .btn { flex: 1 1 auto; width: auto; }
.bar-row .btn-ghost { flex: 0 0 auto; min-width: 6.5rem; margin-right: 10px; }

/* --- text ---------------------------------------------------------------------------------------- */

.title {
  margin: 0 0 12px;
  font: 700 1.75rem/1.2 Georgia, "Times New Roman", Times, serif;
  outline: none;
}

.lead { margin: 0 0 12px; }

.note {
  margin: 12px 0 0;
  color: var(--ink2);
  font-size: 1rem;
}

.consent {
  margin: 0 0 10px;
  color: var(--ink2);
  font-size: .9375rem;
  line-height: 1.35;
  text-align: center;
}

/* the link keeps its place in the line but is 48px tall for a finger */
.consent a {
  display: inline-block;
  margin: -14px -4px;
  padding: 14px 4px;
  font-weight: 700;
}

/* --- buttons ------------------------------------------------------------------------------------- */

.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 12px 18px;
  border: 2px solid var(--red);
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: transform .1s ease-out, opacity .15s ease-out;
}

a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn:active { transform: scale(.97); }
.btn:focus { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn:focus:not(:focus-visible) { outline: none; }
.btn[disabled] { opacity: .6; cursor: default; }

.btn-ghost {
  border-color: var(--line);
  background: var(--card);
  color: var(--red);
}

.btn.is-busy:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 .5em -.15em 0;
  border: 3px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* --- first screen -------------------------------------------------------------------------------- */

.giftcard {
  display: flex;
  align-items: center;
  margin: 18px 0;
  padding: 14px;
  border: 2px solid var(--gold);
  border-radius: 14px;
  background: var(--card);
}

.giftcard-text { flex: 1 1 auto; min-width: 0; margin-left: 14px; }
.giftcard-title { margin: 0 0 4px; font-weight: 700; line-height: 1.3; }
.giftcard-how { margin: 0; color: var(--ink2); font-size: 1rem; line-height: 1.35; }

.how {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: how;
}

.how li {
  position: relative;
  min-height: 30px;
  margin: 0 0 12px;
  padding: 1px 0 0 42px;
  counter-increment: how;
}

.how li:before {
  content: counter(how);
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

/* Shown only if the script has not started five seconds after the page (it hides this line at once). */
.js-wait {
  opacity: 0;
  animation: late .01s 5s both;
}

/* --- a question ---------------------------------------------------------------------------------- */

.progress { margin: 0 0 18px; }

.progress-block {
  margin: 0 0 6px;
  color: var(--red);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.progress-row { display: flex; align-items: center; }

.progress-track {
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--soft);
}

.progress-fill {
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease-out;
}

.progress-pos {
  flex: 0 0 auto;
  margin: 0 0 0 12px;
  color: var(--ink2);
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
}

.step-in-fwd { animation: in-fwd .24s ease-out; }
.step-in-back { animation: in-back .24s ease-out; }

.question {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: pre-line;
  outline: none;
}

.hint {
  margin: 0 0 8px;
  color: var(--ink2);
  font-size: 1rem;
}

.control { margin-top: 16px; }

/* --- options: the real radio or checkbox covers the whole tile, so a tap anywhere hits it -------- */

.opt-item { margin: 0 0 10px; }

.opt, .pt {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.opt input, .pt input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opt-box {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.opt-mark {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
}

.opt-check .opt-mark { border-radius: 8px; }

/* the tick: two borders of a small box, turned 45 degrees */
.opt-mark:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 8px;
  width: 8px;
  height: 14px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  opacity: 0;
  transform: rotate(45deg);
}

/* long labels wrap onto as many lines as they need; nothing is ever cut off */
.opt-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.opt input:checked + .opt-box {
  border-color: var(--red);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--red);
}

.opt input:checked + .opt-box .opt-mark { border-color: var(--red); background: var(--red); }
.opt input:checked + .opt-box .opt-mark:after { opacity: 1; }

.opt input:focus + .opt-box, .pt input:focus + .pt-box { outline: 3px solid var(--ink); outline-offset: 2px; }
.opt input:focus:not(:focus-visible) + .opt-box { outline: none; }
.pt input:focus:not(:focus-visible) + .pt-box { outline: none; }

/* multi-select at its limit: the rest is dimmed; a tap on a dimmed tile explains why (see app.js) */
.opt.is-locked .opt-box { opacity: .5; }

.pop { animation: pop .25s ease-out; }

.other-field { margin-top: 8px; }

.field {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

textarea.field { min-height: 9.5em; resize: none; }
.field:focus { border-color: var(--red); outline: 3px solid var(--tint); outline-offset: 0; }
.is-invalid .field { border-color: var(--err); }

.field-count {
  margin: 6px 2px 0;
  color: var(--ink2);
  font-size: .9375rem;
  text-align: right;
}

/* --- scale: the two ends are named above the row, each on its own side --------------------------- */

.scale-ends {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 2px solid var(--soft);
  border-radius: 12px;
  background: var(--card);
}

.scale-end { display: block; font-weight: 700; line-height: 1.3; }
.scale-end-right { margin-top: 8px; text-align: right; }

.scale-row { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.pt { flex: 1 0 48px; margin: 0 4px 8px; }

.pt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  font-size: 1.375rem;
  font-weight: 700;
}

.pt input:checked + .pt-box { border-color: var(--red); background: var(--red); color: #fff; }

/* --- messages in the action bar ------------------------------------------------------------------ */

.counter {
  margin: 0 0 8px;
  color: var(--ink2);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.counter.is-full { color: var(--red); }

.error {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 2px solid var(--err);
  border-left-width: 6px;
  border-radius: 10px;
  background: var(--errbg);
  color: var(--err);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.error p { margin: 0; }
.nudge { animation: nudge .3s ease-in-out; }

/* --- final screen -------------------------------------------------------------------------------- */

.screen-done .screen-body { padding-top: 24px; text-align: center; }
.how-done { margin-top: 18px; text-align: left; }

.fallback {
  margin-top: 22px;
  padding: 16px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--card);
  text-align: left;
}

.fallback p { margin: 0 0 12px; }
.fallback p:last-child { margin-bottom: 0; }
.code { text-align: center; }

.code-value {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--tint);
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1.15;
  white-space: nowrap;
  -webkit-user-select: all;
  user-select: all;
}

.gift-name { font-weight: 700; }

/* the lines of the final screen come in one after another */
.reveal { animation: rise .4s ease-out both; }
.reveal + .reveal { animation-delay: .08s; }
.reveal + .reveal + .reveal { animation-delay: .16s; }
.reveal + .reveal + .reveal + .reveal { animation-delay: .24s; }
.offscreen { position: absolute; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; font-size: 16px; }

/* --- the gift, drawn with boxes. Sizes are in px on purpose: a browser's minimum font size would
       distort a drawing sized in em. The small one on the first screen is the same drawing, scaled. */

.gift {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
}

.gift-sm { flex: 0 0 auto; width: 54px; height: 54px; margin: 0; }

.gift-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  transform-origin: 50% 95%;
}

.gift-sm .gift-body { transform: scale(.45); transform-origin: 0 0; }

.gift-box {
  position: absolute;
  top: 56px;
  left: 16px;
  width: 88px;
  height: 58px;
  border-radius: 0 0 7px 7px;
  background: var(--red);
}

.gift-lid {
  position: absolute;
  top: 35px;
  left: 9px;
  width: 102px;
  height: 22px;
  border-radius: 5px;
  background: var(--red2);
  transform-origin: 100% 100%;
}

.gift-box:before, .gift-lid:before {
  content: "";
  position: absolute;
  top: 0;
  width: 16px;
  height: 100%;
  background: var(--gold);
}

.gift-box:before { left: 36px; }
.gift-lid:before { left: 43px; }

.gift-bow:before, .gift-bow:after {
  content: "";
  position: absolute;
  top: -18px;
  width: 26px;
  height: 19px;
  border: 5px solid var(--gold);
  border-radius: 50%;
}

.gift-bow:before { left: 26px; transform: rotate(-20deg); }
.gift-bow:after { left: 50px; transform: rotate(20deg); }

.gift-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}

.gift-spark:nth-child(2) { top: 32px; left: 2px; }
.gift-spark:nth-child(3) { top: 9px; left: 20px; background: var(--red); }
.gift-spark:nth-child(4) { top: 0; left: 50px; width: 13px; height: 13px; }
.gift-spark:nth-child(5) { top: 7px; left: 86px; background: var(--red); }
.gift-spark:nth-child(6) { top: 26px; left: 109px; width: 13px; height: 13px; }
.gift-spark:nth-child(7) { top: 66px; left: 110px; width: 8px; height: 8px; }

/* Opened: these are the resting positions. The animations below only describe where things come
   from, so with motion switched off the guest simply sees the open gift. */
.gift-open .gift-lid { transform: translate(4px, -19px) rotate(14deg); }
.gift-open .gift-body { animation: gift-shake .7s ease-in-out both; }
.gift-open .gift-lid { animation: gift-lid .45s .7s ease-out both; }
.gift-open .gift-spark { animation: gift-spark .6s 1s ease-out both; }
.gift-open .gift-spark:nth-child(odd) { animation-delay: 1.15s; }

/* --- motion: transform and opacity only ---------------------------------------------------------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes late { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-fwd { from { opacity: 0; transform: translateX(24px); } }
@keyframes in-back { from { opacity: 0; transform: translateX(-24px); } }
@keyframes pop { 0% { transform: scale(.94); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes gift-shake { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }
@keyframes gift-lid { from { transform: translate(0, 0) rotate(0deg); } }
@keyframes gift-spark { from { opacity: 0; transform: translateY(24px) rotate(45deg) scale(.2); } }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
  /* Not motion but a delay: without it a slow connection would tell the guest at once to reload a page that works. */
  .js-wait { animation: late .01s 5s both !important; }
}

/* --- brand graphics (2026-10-09): the restaurant's own logo, four-leaf flower and corner ornament.
   Embedded as data: images (the CSP allows img-src data:), so the page makes no extra requests. --- */

:root {
  --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14.1 -12.6 48.8 48.8' fill='%23960407' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.15 0.37C43.44 1.15 39.65 4.68 38.72 9.15C38.44 10.49 38.13 10.84 38.13 9.82C38.13 8.96 37.28 6.74 36.49 5.51C34.67 2.69 30.71 0.36 27.73 0.36C27.03 0.36 26.99 0.39 26.99 1.02C26.99 2.18 27.59 4.28 28.28 5.57C29.10 7.10 30.78 8.93 32.17 9.82C33.39 10.60 35.63 11.45 36.48 11.45C36.80 11.45 37.13 11.54 37.20 11.66C37.27 11.77 37.08 11.86 36.75 11.87C35.91 11.87 33.53 12.75 32.40 13.48C29.46 15.36 27.53 18.45 27.08 22.00L26.93 23.19L27.94 23.06C30.89 22.66 33.16 21.58 35.04 19.69C36.60 18.12 37.57 16.41 38.11 14.29C38.45 12.94 38.50 12.85 38.63 13.40C39.24 16.12 40.21 17.97 41.88 19.64C43.78 21.53 46.89 22.96 49.14 22.96H49.95L49.81 21.77C49.31 17.42 46.31 13.70 42.16 12.27C41.49 12.05 40.69 11.86 40.38 11.86C39.31 11.86 39.59 11.53 40.87 11.27C42.99 10.84 44.65 9.90 46.39 8.17C48.47 6.09 49.29 4.37 49.80 1.02C49.94 0.04 49.99 0.06 48.15 0.37Z' /%3E%3C/svg%3E");
  --corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 88 88' fill='%23960407' fill-opacity='0.22'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75 0.10C5.02 0.94 1.36 4.30 0.26 8.82C-0.08 10.27 -0.08 12.75 0.26 14.22C1.23 18.29 4.69 21.74 8.80 22.74C10.25 23.09 12.73 23.10 14.20 22.74C18.29 21.77 21.74 18.32 22.74 14.22C23.09 12.76 23.10 10.29 22.74 8.82C21.80 4.86 18.45 1.42 14.53 0.39C13.11 0.01 10.97 -0.11 9.75 0.10ZM13.71 6.91C15.57 7.86 16.58 9.48 16.58 11.52C16.58 13.58 15.61 15.14 13.69 16.14C12.61 16.72 10.49 16.75 9.40 16.22C7.16 15.13 5.90 12.53 6.51 10.27C7.36 7.14 10.91 5.48 13.71 6.91Z' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.15 0.37C43.44 1.15 39.65 4.68 38.72 9.15C38.44 10.49 38.13 10.84 38.13 9.82C38.13 8.96 37.28 6.74 36.49 5.51C34.67 2.69 30.71 0.36 27.73 0.36C27.03 0.36 26.99 0.39 26.99 1.02C26.99 2.18 27.59 4.28 28.28 5.57C29.10 7.10 30.78 8.93 32.17 9.82C33.39 10.60 35.63 11.45 36.48 11.45C36.80 11.45 37.13 11.54 37.20 11.66C37.27 11.77 37.08 11.86 36.75 11.87C35.91 11.87 33.53 12.75 32.40 13.48C29.46 15.36 27.53 18.45 27.08 22.00L26.93 23.19L27.94 23.06C30.89 22.66 33.16 21.58 35.04 19.69C36.60 18.12 37.57 16.41 38.11 14.29C38.45 12.94 38.50 12.85 38.63 13.40C39.24 16.12 40.21 17.97 41.88 19.64C43.78 21.53 46.89 22.96 49.14 22.96H49.95L49.81 21.77C49.31 17.42 46.31 13.70 42.16 12.27C41.49 12.05 40.69 11.86 40.38 11.86C39.31 11.86 39.59 11.53 40.87 11.27C42.99 10.84 44.65 9.90 46.39 8.17C48.47 6.09 49.29 4.37 49.80 1.02C49.94 0.04 49.99 0.06 48.15 0.37Z' transform='translate(0.75 -0.14)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.51 0.32C68.72 0.94 63.68 2.96 60.43 5.98C56.83 9.34 54.56 14.79 54.02 21.37L53.88 23.19L55.72 23.05C62.05 22.54 67.25 20.56 70.72 17.33C74.31 13.98 76.59 8.52 77.12 1.98L77.27 0.18L76.25 0.21C75.70 0.23 74.91 0.28 74.51 0.32Z' transform='translate(69.5 11.53) rotate(45) translate(-65.58 -11.69)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.15 0.37C43.44 1.15 39.65 4.68 38.72 9.15C38.44 10.49 38.13 10.84 38.13 9.82C38.13 8.96 37.28 6.74 36.49 5.51C34.67 2.69 30.71 0.36 27.73 0.36C27.03 0.36 26.99 0.39 26.99 1.02C26.99 2.18 27.59 4.28 28.28 5.57C29.10 7.10 30.78 8.93 32.17 9.82C33.39 10.60 35.63 11.45 36.48 11.45C36.80 11.45 37.13 11.54 37.20 11.66C37.27 11.77 37.08 11.86 36.75 11.87C35.91 11.87 33.53 12.75 32.40 13.48C29.46 15.36 27.53 18.45 27.08 22.00L26.93 23.19L27.94 23.06C30.89 22.66 33.16 21.58 35.04 19.69C36.60 18.12 37.57 16.41 38.11 14.29C38.45 12.94 38.50 12.85 38.63 13.40C39.24 16.12 40.21 17.97 41.88 19.64C43.78 21.53 46.89 22.96 49.14 22.96H49.95L49.81 21.77C49.31 17.42 46.31 13.70 42.16 12.27C41.49 12.05 40.69 11.86 40.38 11.86C39.31 11.86 39.59 11.53 40.87 11.27C42.99 10.84 44.65 9.90 46.39 8.17C48.47 6.09 49.29 4.37 49.80 1.02C49.94 0.04 49.99 0.06 48.15 0.37Z' transform='translate(-26.91 27.52)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75 0.10C5.02 0.94 1.36 4.30 0.26 8.82C-0.08 10.27 -0.08 12.75 0.26 14.22C1.23 18.29 4.69 21.74 8.80 22.74C10.25 23.09 12.73 23.10 14.20 22.74C18.29 21.77 21.74 18.32 22.74 14.22C23.09 12.76 23.10 10.29 22.74 8.82C21.80 4.86 18.45 1.42 14.53 0.39C13.11 0.01 10.97 -0.11 9.75 0.10ZM13.71 6.91C15.57 7.86 16.58 9.48 16.58 11.52C16.58 13.58 15.61 15.14 13.69 16.14C12.61 16.72 10.49 16.75 9.40 16.22C7.16 15.13 5.90 12.53 6.51 10.27C7.36 7.14 10.91 5.48 13.71 6.91Z' transform='translate(27.67 27.67)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.51 0.32C68.72 0.94 63.68 2.96 60.43 5.98C56.83 9.34 54.56 14.79 54.02 21.37L53.88 23.19L55.72 23.05C62.05 22.54 67.25 20.56 70.72 17.33C74.31 13.98 76.59 8.52 77.12 1.98L77.27 0.18L76.25 0.21C75.70 0.23 74.91 0.28 74.51 0.32Z' transform='translate(11.53 69.5) rotate(135) translate(-65.58 -11.69)' /%3E%3C/svg%3E");
  --corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 88 88' fill='%23960407' fill-opacity='0.22'%3E%3Cg transform='rotate(180 43 43)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75 0.10C5.02 0.94 1.36 4.30 0.26 8.82C-0.08 10.27 -0.08 12.75 0.26 14.22C1.23 18.29 4.69 21.74 8.80 22.74C10.25 23.09 12.73 23.10 14.20 22.74C18.29 21.77 21.74 18.32 22.74 14.22C23.09 12.76 23.10 10.29 22.74 8.82C21.80 4.86 18.45 1.42 14.53 0.39C13.11 0.01 10.97 -0.11 9.75 0.10ZM13.71 6.91C15.57 7.86 16.58 9.48 16.58 11.52C16.58 13.58 15.61 15.14 13.69 16.14C12.61 16.72 10.49 16.75 9.40 16.22C7.16 15.13 5.90 12.53 6.51 10.27C7.36 7.14 10.91 5.48 13.71 6.91Z' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.15 0.37C43.44 1.15 39.65 4.68 38.72 9.15C38.44 10.49 38.13 10.84 38.13 9.82C38.13 8.96 37.28 6.74 36.49 5.51C34.67 2.69 30.71 0.36 27.73 0.36C27.03 0.36 26.99 0.39 26.99 1.02C26.99 2.18 27.59 4.28 28.28 5.57C29.10 7.10 30.78 8.93 32.17 9.82C33.39 10.60 35.63 11.45 36.48 11.45C36.80 11.45 37.13 11.54 37.20 11.66C37.27 11.77 37.08 11.86 36.75 11.87C35.91 11.87 33.53 12.75 32.40 13.48C29.46 15.36 27.53 18.45 27.08 22.00L26.93 23.19L27.94 23.06C30.89 22.66 33.16 21.58 35.04 19.69C36.60 18.12 37.57 16.41 38.11 14.29C38.45 12.94 38.50 12.85 38.63 13.40C39.24 16.12 40.21 17.97 41.88 19.64C43.78 21.53 46.89 22.96 49.14 22.96H49.95L49.81 21.77C49.31 17.42 46.31 13.70 42.16 12.27C41.49 12.05 40.69 11.86 40.38 11.86C39.31 11.86 39.59 11.53 40.87 11.27C42.99 10.84 44.65 9.90 46.39 8.17C48.47 6.09 49.29 4.37 49.80 1.02C49.94 0.04 49.99 0.06 48.15 0.37Z' transform='translate(0.75 -0.14)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.51 0.32C68.72 0.94 63.68 2.96 60.43 5.98C56.83 9.34 54.56 14.79 54.02 21.37L53.88 23.19L55.72 23.05C62.05 22.54 67.25 20.56 70.72 17.33C74.31 13.98 76.59 8.52 77.12 1.98L77.27 0.18L76.25 0.21C75.70 0.23 74.91 0.28 74.51 0.32Z' transform='translate(69.5 11.53) rotate(45) translate(-65.58 -11.69)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.15 0.37C43.44 1.15 39.65 4.68 38.72 9.15C38.44 10.49 38.13 10.84 38.13 9.82C38.13 8.96 37.28 6.74 36.49 5.51C34.67 2.69 30.71 0.36 27.73 0.36C27.03 0.36 26.99 0.39 26.99 1.02C26.99 2.18 27.59 4.28 28.28 5.57C29.10 7.10 30.78 8.93 32.17 9.82C33.39 10.60 35.63 11.45 36.48 11.45C36.80 11.45 37.13 11.54 37.20 11.66C37.27 11.77 37.08 11.86 36.75 11.87C35.91 11.87 33.53 12.75 32.40 13.48C29.46 15.36 27.53 18.45 27.08 22.00L26.93 23.19L27.94 23.06C30.89 22.66 33.16 21.58 35.04 19.69C36.60 18.12 37.57 16.41 38.11 14.29C38.45 12.94 38.50 12.85 38.63 13.40C39.24 16.12 40.21 17.97 41.88 19.64C43.78 21.53 46.89 22.96 49.14 22.96H49.95L49.81 21.77C49.31 17.42 46.31 13.70 42.16 12.27C41.49 12.05 40.69 11.86 40.38 11.86C39.31 11.86 39.59 11.53 40.87 11.27C42.99 10.84 44.65 9.90 46.39 8.17C48.47 6.09 49.29 4.37 49.80 1.02C49.94 0.04 49.99 0.06 48.15 0.37Z' transform='translate(-26.91 27.52)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.75 0.10C5.02 0.94 1.36 4.30 0.26 8.82C-0.08 10.27 -0.08 12.75 0.26 14.22C1.23 18.29 4.69 21.74 8.80 22.74C10.25 23.09 12.73 23.10 14.20 22.74C18.29 21.77 21.74 18.32 22.74 14.22C23.09 12.76 23.10 10.29 22.74 8.82C21.80 4.86 18.45 1.42 14.53 0.39C13.11 0.01 10.97 -0.11 9.75 0.10ZM13.71 6.91C15.57 7.86 16.58 9.48 16.58 11.52C16.58 13.58 15.61 15.14 13.69 16.14C12.61 16.72 10.49 16.75 9.40 16.22C7.16 15.13 5.90 12.53 6.51 10.27C7.36 7.14 10.91 5.48 13.71 6.91Z' transform='translate(27.67 27.67)' /%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M74.51 0.32C68.72 0.94 63.68 2.96 60.43 5.98C56.83 9.34 54.56 14.79 54.02 21.37L53.88 23.19L55.72 23.05C62.05 22.54 67.25 20.56 70.72 17.33C74.31 13.98 76.59 8.52 77.12 1.98L77.27 0.18L76.25 0.21C75.70 0.23 74.91 0.28 74.51 0.32Z' transform='translate(11.53 69.5) rotate(135) translate(-65.58 -11.69)' /%3E%3C/g%3E%3C/svg%3E");
}

html, body { background-color: var(--bg); }
body {
  background-image: var(--flower), var(--flower);
  background-size: 132px 132px, 132px 132px;
  background-position: 0 0, 66px 66px;
}

.brand { background: var(--red); }
.brand-name {
  height: 58px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 34' fill='%23FFFFE1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30.93 0.11C29.86 0.43 28.71 1.20 27.43 2.43C24.27 5.47 21.82 9.51 20.83 13.32C20.19 15.79 19.97 18.58 20.26 20.44C20.73 23.38 22.25 26.25 24.91 29.20C26.89 31.39 28.89 32.87 30.68 33.45C31.52 33.72 32.68 33.79 33.39 33.60C35.22 33.10 37.19 31.37 39.37 28.36C41.17 25.87 42.72 22.95 43.50 20.60C44.09 18.79 44.35 17.33 44.41 15.47C44.56 10.35 42.60 6.11 38.55 2.81C36.89 1.46 35.38 0.62 33.85 0.19C33.06 -0.02 31.56 -0.06 30.93 0.11ZM118.25 1.61C115.05 2.35 111.61 6.17 107.86 13.16C107.48 13.87 107.03 14.74 106.86 15.08C106.56 15.67 106.55 15.69 106.29 15.69H106.03L106.08 13.88C106.15 10.86 106.39 8.03 106.79 5.34C106.87 4.79 106.95 3.93 106.98 3.44C107.01 2.61 107.01 2.53 106.86 2.35C106.57 1.99 106.35 1.96 104.51 2.10C103.18 2.20 102.68 2.20 102.01 2.14C100.77 2.02 100.35 2.21 99.95 3.05C99.54 3.91 99.41 5.04 99.28 8.95C99.14 13.16 99.22 24.53 99.42 27.94C99.53 29.69 99.73 30.53 100.2 31.09C100.59 31.56 100.69 31.58 102.53 31.61C104.94 31.65 106.18 31.49 106.53 31.10C106.73 30.87 106.74 30.30 106.57 28.79C106.28 26.22 106.15 23.98 106.08 20.25C106.04 18.07 106.04 17.92 106.16 17.92C106.41 17.92 107.93 18.75 108.55 19.22C110.32 20.57 111.93 22.96 112.80 25.53C113.17 26.64 113.42 27.67 113.66 29.10C113.92 30.70 114.10 31.35 114.36 31.64C114.58 31.87 114.58 31.87 115.14 31.82C115.46 31.79 115.89 31.74 116.12 31.70C116.73 31.60 118.05 31.61 118.87 31.73C119.76 31.86 121.07 31.88 121.42 31.76C121.55 31.72 121.75 31.61 121.84 31.52C122.01 31.37 122.01 31.34 121.97 30.43C121.85 27.57 120.3 24.55 117.46 21.67C115.16 19.33 112.40 17.66 108.86 16.48C108.45 16.34 108.26 16.24 108.30 16.19C108.33 16.14 108.63 15.66 108.98 15.12C109.33 14.58 109.79 13.83 110.01 13.45C110.86 12.03 112.46 10.22 113.58 9.42C115.01 8.40 116.07 8.17 117.15 8.66C117.65 8.89 118.23 9.47 118.48 9.99L118.65 10.33H119.36H120.08L120.12 10.01C120.14 9.84 120.17 9.15 120.19 8.49C120.25 6.57 120.58 5.28 121.32 3.94C121.91 2.89 121.99 2.42 121.62 2.10C120.96 1.54 119.48 1.32 118.25 1.61ZM13.55 2.07C10.66 2.14 6.80 2.20 4.98 2.20C1.30 2.18 1.45 2.16 0.99 2.70C0.29 3.50 0.12 4.93 0.02 10.74C-0.04 15.08 0.04 25.92 0.17 27.79C0.30 29.74 0.48 30.49 0.98 31.06C1.43 31.58 1.44 31.58 3.73 31.61C5.93 31.64 6.77 31.57 7.27 31.32C7.82 31.05 7.89 30.59 7.68 28.57C7.38 25.81 7.14 23.21 6.97 21.01C6.95 20.73 6.91 18.70 6.89 16.51C6.83 11.56 6.89 10.28 7.46 5.05L7.55 4.21L10.02 4.24C12.27 4.27 12.53 4.28 13.07 4.43C14.67 4.87 15.35 5.57 15.76 7.17C15.98 8.05 16.03 9.71 15.87 10.96C15.80 11.49 15.72 12.14 15.69 12.39L15.64 12.85L15.90 12.89C16.04 12.91 16.49 12.97 16.89 13.01C17.30 13.05 17.72 13.11 17.82 13.13C18.01 13.16 18.03 13.14 18.17 12.70C18.25 12.44 18.44 11.78 18.59 11.22C18.96 9.83 19.70 7.99 20.83 5.67C21.43 4.42 21.64 3.83 21.64 3.33C21.64 2.65 21.35 2.23 20.76 2.06C20.29 1.92 18.92 1.92 13.55 2.07ZM49.10 2.15C48.33 2.43 47.85 3.34 47.67 4.84C47.39 7.21 47.29 12.28 47.38 20.27C47.46 28.53 47.60 29.97 48.35 30.97C48.82 31.60 48.77 31.59 51.56 31.58C53.84 31.58 54.05 31.57 54.39 31.43C54.69 31.32 54.79 31.23 54.92 30.97C55.13 30.54 55.19 29.93 55.09 29.05C54.99 28.08 54.76 25.47 54.53 22.47C54.37 20.46 54.33 19.38 54.30 16.20C54.28 13.62 54.29 11.95 54.35 11.10C54.51 8.80 54.80 5.99 55.02 4.65L55.10 4.15H59.43C62.85 4.15 63.77 4.17 63.77 4.24C63.77 4.29 63.73 4.54 63.69 4.78C63.66 5.03 63.55 5.92 63.46 6.75C63.29 8.26 63.29 8.42 63.29 16.69C63.29 24.92 63.34 27.11 63.55 28.94C63.74 30.59 64.32 31.47 65.27 31.59C65.49 31.62 66.63 31.62 67.79 31.61C71.19 31.55 71.25 31.50 70.93 28.76C70.27 23.06 70.14 20.47 70.18 14.39L70.21 10.07L70.48 7.78C70.63 6.52 70.82 5.11 70.91 4.65C71.12 3.52 71.13 2.73 70.93 2.51C70.54 2.07 71.33 2.10 59.83 2.09C52.60 2.08 49.25 2.10 49.10 2.15ZM83.36 2.25C83.32 2.26 83.20 2.29 83.09 2.32C82.99 2.34 82.88 2.41 82.85 2.48C82.79 2.64 82.93 3.47 83.10 4.05C83.3 4.69 83.41 5.38 83.41 5.85C83.40 6.49 83.13 6.93 81.72 8.64C76.55 14.91 74.52 17.90 73.50 20.73C72.93 22.32 72.76 23.51 72.88 25.03C73.01 26.67 73.28 27.73 73.89 28.98C74.70 30.61 75.75 31.61 77.18 32.07C77.82 32.28 79.43 32.36 80.21 32.22C82.67 31.79 84.70 29.99 86.22 26.87C86.80 25.70 87.69 23.31 87.92 22.29C87.95 22.18 87.99 22.10 88.01 22.12C88.02 22.14 88.20 22.80 88.40 23.59C88.83 25.25 89.31 27.05 89.72 28.50C89.88 29.05 90.06 29.85 90.12 30.27C90.25 31.10 90.37 31.42 90.61 31.55C90.71 31.61 91.78 31.62 94.00 31.61C97.48 31.58 97.62 31.57 97.70 31.21C97.73 31.11 97.33 29.76 96.67 27.71C94.91 22.24 93.73 17.81 92.07 10.33C91.94 9.78 91.61 8.39 91.33 7.24C90.68 4.64 90.53 3.83 90.53 3.05C90.53 2.15 90.80 2.21 86.76 2.22C84.93 2.22 83.40 2.24 83.36 2.25ZM29.20 7.47C31.80 8.20 33.96 9.69 35.78 11.99C37.77 14.50 38.79 17.26 38.96 20.60C39.05 22.34 38.76 23.94 38.06 25.53L37.87 25.95L37.33 26.01C36.24 26.11 34.70 25.91 33.47 25.51C30.62 24.57 28.17 22.14 26.38 18.48C25.36 16.39 24.86 14.42 24.85 12.45C24.84 11.60 24.87 11.22 24.97 10.85C25.36 9.42 25.91 8.27 26.69 7.31L26.93 7.00L27.61 7.10C27.98 7.16 28.70 7.33 29.20 7.47ZM84.85 10.01C85.35 12.02 85.80 13.78 86.34 15.77C87.03 18.33 87.12 19.25 86.81 20.47C86.49 21.73 85.49 23.05 84.32 23.76C83.33 24.37 81.72 24.51 80.77 24.07C79.91 23.68 79.24 22.72 78.90 21.41C78.32 19.18 79.30 16.08 81.87 11.99C82.61 10.79 84.31 8.47 84.43 8.47C84.45 8.47 84.64 9.16 84.85 10.01Z' /%3E%3C/svg%3E") center / auto 30px no-repeat;
}
.brand:after {
  height: 4px;
  background: #ffffe1;
}

#screen-intro .screen-body {
  background: var(--corner-br) right 10px bottom 10px / 92px 92px no-repeat;
  padding-bottom: 104px;
}
.screen-done .screen-body {
  background:
    var(--corner-tl) left 10px top 10px / 84px 84px no-repeat,
    var(--corner-br) right 10px bottom 10px / 84px 84px no-repeat;
  padding-bottom: 104px;
}