trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@400..800&family=Noto+Color+Emoji&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap");

@import "actiontext.css";
@import "fonts.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ql-container,
.ql-editor {
  @apply !p-0 !bg-transparent !border-0;
}
.ql-editor {
  @apply !overflow-visible;
}
.invite-wrapper .ql-editor {
  line-height: inherit;
}

.ql-tooltip {
  @apply z-[100];
}
/* .ql-toolbar {
  @apply flex items-center;
} */
.ql-align.ql-picker {
  @apply !flex items-center justify-center;
}

.ql-align-right {
  @apply text-right;
}
.ql-align-center {
  @apply text-center;
}
.ql-align-justify {
  @apply text-justify;
}

/* Dialog styles */
body:has(dialog[data-dialog-target="dialog"][open]) {
  overflow: hidden;
}

dialog::backdrop {
  background: rgb(43 36 32 / 0.35);
  backdrop-filter: blur(2px);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

dialog[data-dialog-target="dialog"][open] {
  animation: fade-in 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing] {
  animation: fade-out 200ms forwards;
}

@layer base {
  html {
    @apply font-sans;
  }

  /* Invitation font: Nunito is one of the fonts hosts can pick. */
  .nunito,
  .nunito * {
    font-family: "Nunito", "Noto Color Emoji", sans-serif !important;
    font-weight: 400;
    font-style: normal;
  }

  .vollkorn,
  .vollkorn * {
    font-family: "Vollkorn", "Noto Color Emoji", serif !important;
    font-weight: 400;
    font-style: normal;
  }

  /* Both have real italics: the editor's italic button works in them. */
  .nunito em,
  .vollkorn em {
    font-style: italic;
  }

  .pacifico,
  .pacifico * {
    font-family: "Pacifico", "Noto Color Emoji", cursive !important;
    font-weight: 400;
    font-style: normal;
  }

  .lobster,
  .lobster * {
    font-family: "Lobster", "Noto Color Emoji", sans-serif !important;
    font-weight: 400;
    font-style: normal;
  }

  .rubik-wet-paint,
  .rubik-wet-paint * {
    font-family: "Rubik Wet Paint", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .great-vibes,
  .great-vibes * {
    font-family: "Great Vibes", "Noto Color Emoji", cursive !important;
    font-weight: 400;
    font-style: normal;
  }

  .caveat,
  .caveat * {
    font-family: "Caveat", "Noto Color Emoji", cursive !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .roboto,
  .roboto * {
    font-family: "Roboto", "Noto Color Emoji", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .rubik-moonrocks,
  .rubik-moonrocks * {
    font-family: "Rubik Moonrocks", "Noto Color Emoji", sans-serif !important;
    font-weight: 400;
    font-style: normal;
  }

  .neucha,
  .neucha * {
    font-family: "Neucha", "Noto Color Emoji", cursive !important;
    font-weight: 400;
    font-style: normal;
  }

  .comic-relief,
  .comic-relief * {
    font-family: "Comic Relief", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .amatic-sc,
  .amatic-sc * {
    font-family: "Amatic SC", "Noto Color Emoji", sans-serif !important;
    font-weight: 400;
    font-style: normal;
  }

  .shantell-sans,
  .shantell-sans * {
    font-family: "Shantell Sans", "Noto Color Emoji", cursive !important;
    font-weight: 400;
    font-style: normal;
  }

  .fet,
  .fet * {
    font-family: "Fet", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .slimmary,
  .slimmary * {
    font-family: "Slimmary", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .vasek,
  .vasek * {
    font-family: "Vasek", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: italic;
  }

  .marutya,
  .marutya * {
    font-family: "Marutya", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .nickainley,
  .nickainley * {
    font-family: "Nickainley", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .lepka,
  .lepka * {
    font-family: "Lepka", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .everlasting,
  .everlasting * {
    font-family: "Everlasting", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .vertiger,
  .vertiger * {
    font-family: "Vertiger", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .chicoree-em,
  .chicoree-em * {
    font-family: "Chicoree Em", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .revard,
  .revard * {
    font-family: "Revard", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .vetrino,
  .vetrino * {
    font-family: "Vetrino", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .gropled,
  .gropled * {
    font-family: "Gropled", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .moniqa,
  .moniqa * {
    font-family: "Moniqa", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .mak,
  .mak * {
    font-family: "Mak", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .misto,
  .misto * {
    font-family: "Misto", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .neocyr,
  .neocyr * {
    font-family: "Neocyr", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .kosolapa,
  .kosolapa * {
    font-family: "Kosolapa", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .ura-bum-bum,
  .ura-bum-bum * {
    font-family: "Ura Bum Bum", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .overdoze-sans,
  .overdoze-sans * {
    font-family: "Overdoze Sans", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .bubblez-graffiti,
  .bubblez-graffiti * {
    font-family: "Bubblez Graffiti", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .rosarium,
  .rosarium * {
    font-family: "Rosarium", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .bulito,
  .bulito * {
    font-family: "Bulito", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  .gunnyrew,
  .gunnyrew * {
    font-family: "Gunnyrew", "Noto Color Emoji", system-ui !important;
    font-weight: 400;
    font-style: normal;
  }

  html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    @apply flex flex-col min-h-screen text-ink antialiased;
  }

  h1, h2, h3, h4 {
    text-wrap: balance;
  }

  ::selection {
    @apply bg-butter-200 text-ink;
  }

  /* Table */
  .table-container {
    @apply overflow-x-auto w-full max-w-full lg:overflow-x-visible;
  }

  /* Default table styles */
  table {
    @apply w-full bg-white rounded-2xl;
  }

  /* Responsive table styles */
  @media (max-width: 768px) {
    .table-responsive {
      @apply block w-full bg-transparent;
    }

    .table-responsive thead {
      @apply hidden;
    }

    .table-responsive tbody {
      @apply block w-full;
    }

    .table-responsive tr {
      @apply block overflow-hidden mb-4 w-full bg-white rounded-lg border border-neutral-200;
    }

    .table-responsive td {
      @apply block p-4 w-full text-right border-b border-neutral-200 last:border-b-0;
    }

    .table-responsive td::before {
      content: attr(data-label);
      @apply float-left font-semibold text-neutral-600;
    }
  }

  table thead {
    @apply h-16;
  }
  table thead tr th {
    @apply p-4 font-semibold text-left text-neutral-600;
  }
  table tbody tr {
    @apply border-t border-t-slate-200;
  }
  table tbody tr td {
    @apply p-4 text-left;
  }

  /* Definition list */
  dl dt {
    @apply mt-2 text-sm font-medium;
  }
  dl dd {
    @apply text-sm;
  }

  /* Form */
  form .field {
    @apply mt-4;
  }
  form .field label {
    @apply block mb-1 text-base font-medium;
  }
  form .field input,
  form .field textarea,
  form .field select {
    @apply px-4 w-full h-12 rounded-2xl border-neutral-300 focus:ring-0 focus:border-black;
  }
  form .field textarea {
    @apply h-auto;
  }
  form .field input[type="checkbox"] {
    @apply p-0 w-6 h-6 rounded-lg checked:bg-black;
  }
  form .field input[type="file"] {
    @apply py-3 button !rounded-md;
  }

  form .field input[type="date"],
  form .field input[type="time"] {
    @apply h-10 text-base rounded-2xl border bg-brown-50 border-brown-200;
  }

  input[type="date"],
  input[type="time"] {
    -webkit-min-logical-width: 120px;
  }

  input[type="range"]:not(.editor-slider) {
    @apply bg-gray-200 appearance-none pointer-events-none;

    &::-webkit-slider-thumb {
      @apply w-5 h-5 bg-white rounded-full border-2 border-black border-solid appearance-none cursor-pointer pointer-events-auto;

      &:hover {
        background: #f7f7f7;
      }

      &:active {
        box-shadow:
          inset 0 0 3px #387bbe,
          0 0 9px #387bbe;
        -webkit-box-shadow:
          inset 0 0 3px #387bbe,
          0 0 9px #387bbe;
      }

      &[disabled] {
        @apply shadow-none cursor-not-allowed bg-neutral-400;
      }
    }

    /* NOTE(marko): Grouping these styles together with above identical styles breaks both :shrug: */
    &::-moz-range-thumb {
      @apply w-5 h-5 bg-white rounded-full border-2 border-black border-solid appearance-none cursor-pointer pointer-events-auto;

      &[disabled] {
        @apply shadow-none cursor-not-allowed bg-neutral-400;
      }
    }
  }

  /* Editor slider: a thin track filled in clay up to a round thumb */
  .editor-slider {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    display: block;
    background: transparent;
    touch-action: pan-y;
  }

  .editor-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(
      to right,
      theme("colors.clay.400") 0%,
      theme("colors.clay.400") var(--fill, 0%),
      theme("colors.cream.300") var(--fill, 0%),
      theme("colors.cream.300") 100%
    );
  }

  .editor-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 2px solid theme("colors.clay.500");
    box-shadow: 0 1px 3px rgb(43 36 32 / 0.18);
    margin-top: -7px;
    cursor: grab;
    transition: transform 0.15s ease;
  }

  .editor-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.12);
  }

  .editor-slider:focus-visible {
    outline: none;
  }

  .editor-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px theme("colors.clay.200");
  }

  .editor-slider::-moz-range-track {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(
      to right,
      theme("colors.clay.400") 0%,
      theme("colors.clay.400") var(--fill, 0%),
      theme("colors.cream.300") var(--fill, 0%),
      theme("colors.cream.300") 100%
    );
  }

  .editor-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid theme("colors.clay.500");
    box-shadow: 0 1px 3px rgb(43 36 32 / 0.18);
    cursor: grab;
  }

  .editor-slider:active::-moz-range-thumb {
    cursor: grabbing;
  }

  div[contenteditable="true"],
  div[data-scribble-target="container"] {
    @apply !bg-transparent outline-none ring-0;
  }

  .input-sizer {
    display: grid;
    vertical-align: top;
    align-items: center;
    position: relative;
  }

  .input-sizer::after,
  .input-sizer textarea {
    width: auto;
    height: 100%;
    min-width: 1em;
    font: inherit;
    grid-area: 1 / 2;
    margin: 0;
    resize: none;
    background: none;
    appearance: none;
    border: none;
    overflow: hidden;
  }

  .input-sizer.sizer-high::after,
  .input-sizer.sizer-high textarea {
    line-height: 1.8;
  }

  .input-sizer.sizer-medium::after,
  .input-sizer.sizer-medium textarea {
    line-height: 1.4;
  }

  .input-sizer::after {
    content: attr(data-value) " ";
    visibility: hidden;
    white-space: pre-wrap;
  }

  .no-arrows::-webkit-outer-spin-button,
  .no-arrows::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* For Firefox */
  .no-arrows[type="number"] {
    -moz-appearance: textfield;
  }
}

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

@page {
  margin: 0;
  size: 600px 857px;
}

@media print {
  body * {
    visibility: hidden;
  }

  .invite-wrapper,
  .invite-wrapper * {
    visibility: visible;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .invite-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
  }

  body.print-special-locked *,
  body.print-special-locked .invite-wrapper,
  body.print-special-locked .invite-wrapper * {
    visibility: hidden !important;
  }
}

/* TODO: Split into separate CSS files */
@layer components {
  /* Button */
  .button {
    @apply inline-flex justify-center items-center px-4 h-12 font-medium tracking-wide rounded-full disabled:cursor-no-drop disabled:pointer-events-none hover:cursor-pointer hover:opacity-80;
  }
  .button.small {
    @apply px-3 h-10 text-sm;
  }
  .button.xsmall {
    @apply px-2 h-8 text-xs;
  }
  .button.large {
    @apply px-6 h-14 text-lg;
  }
  .button.normal {
    @apply px-4 h-12 text-base;
  }
  .button.primary {
    @apply text-white bg-black disabled:bg-neutral-400;
  }
  .button.danger {
    @apply text-white bg-red-500 disabled:bg-neutral-400;
  }
  .button.secondary {
    @apply text-black bg-white border border-black disabled:text-neutral-400;
  }
  .button.outline {
    @apply text-neutral-700 bg-transparent border border-neutral-300 outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:text-neutral-400;
  }
  .button.clear {
    @apply text-black bg-transparent disabled:text-neutral-400 hover:underline;
  }
  .button[disabled="disabled"] {
    @apply opacity-60 pointer-events-none;
  }

  .tooltip {
    @apply absolute z-20 p-2 left-0 lg:left-1/2 right-0 lg:right-auto bottom-full rounded-md lg:transform lg:-translate-y-3 lg:translate-x-[-50%] bg-neutral-100 border border-neutral-400 before:absolute before:-bottom-1.5 before:left-auto lg:before:left-1/2 before:right-7 lg:before:right-auto before:-z-10 before:h-3 before:w-3 before:border-b before:border-r before:border-neutral-400 before:-translate-x-1/2 before:rotate-45 before:bg-neutral-100;
  }

  .checkbox {
    @apply w-5 h-5 text-black bg-white rounded-md border-brown-300 focus:ring-black focus:ring-2;
  }

  .central-section {
    @apply px-4 mx-auto w-full max-w-screen-2xl lg:px-8;
  }

  .text-section {
    p {
      @apply mt-2;
    }

    h3 {
      @apply mt-8 text-xl font-medium;
    }

    h4 {
      @apply mt-6 text-lg font-medium;
    }

    ul {
      @apply pl-2 mt-2 list-disc list-inside;

      li {
        @apply mt-1;
      }
    }
  }

  .pagination {
    @apply flex gap-2 justify-center items-center mx-auto text-sm;

    > a,
    > span {
      @apply px-3 py-2 bg-white rounded-lg border border-transparent;
    }

    > a {
      &:hover {
        @apply border-black bg-neutral-100;
      }
    }

    .disabled {
      @apply cursor-not-allowed text-neutral-300;
    }

    .active {
      @apply font-semibold text-white bg-black;
    }
  }

  /* Font Picker Modal Styles */
  .font-picker-item {
    transition: all 0.2s ease-in-out;
  }

  .font-picker-item:hover {
    transform: translateY(-1px);
  }

  .font-picker-item.ring-2 {
    transform: translateY(-1px);
  }

  /* Tooltip styles */
  .group:hover .group-hover\:opacity-100 {
    opacity: 1;
  }

  /* Font preview in button */
  .font-preview {
    transition: font-family 0.2s ease-in-out;
  }

  /* Hide scrollbar */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .bg-dotted {
    background-image: radial-gradient(
      circle,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px
    );
    background-size: 15px 15px;
  }

  /* Used inside blog content written in the admin */
  /* Words in a heading written by hand (the about page) */
  .highlight {
    font-family: "Caveat", "Noto Color Emoji", cursive;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1;
    color: theme("colors.clay.600");
  }
}

/* ------------------------------------------------------------------
   Relaunch design system
   ------------------------------------------------------------------ */
@layer components {
  .font-display {
    letter-spacing: -0.01em;
  }

  /* Warm paper with a fine grain and a soft glow at the top */
  .paper {
    background-color: theme("colors.cream.100");
    background-image:
      url(/textures/paper-grain.png),
      radial-gradient(1100px 520px at 0% -8%, rgb(251 228 217 / 0.7), transparent 62%),
      radial-gradient(900px 480px at 105% 4%, rgb(227 235 221 / 0.75), transparent 58%);
    background-repeat: repeat, no-repeat, no-repeat;
  }

  .shell {
    @apply w-full max-w-6xl px-5 mx-auto sm:px-8;
  }

  /* A short handwritten line above a heading */
  .eyebrow {
    @apply inline-block text-[1.45rem] leading-none -rotate-1 text-clay-600;
    font-family: "Caveat", "Noto Color Emoji", cursive;
    font-weight: 600;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-2 h-12 px-6 text-[15px] font-bold rounded-full whitespace-nowrap select-none transition duration-200 ease-out focus:outline-none focus-visible:ring-4 focus-visible:ring-clay-200 active:scale-[.98] disabled:opacity-50 disabled:pointer-events-none;
  }
  .btn-sm {
    @apply h-10 px-4 text-sm;
  }
  .btn-lg {
    @apply h-14 px-8 text-base;
  }
  .btn-icon {
    @apply w-10 h-10 p-0;
  }
  .btn-primary {
    @apply text-white bg-clay-600 shadow-glow hover:bg-clay-700 hover:-translate-y-px;
  }
  .btn-dark {
    @apply text-cream-50 bg-ink hover:bg-ink-700;
  }
  .btn-soft {
    @apply text-ink bg-white ring-1 ring-inset ring-cream-300 hover:bg-cream-50 hover:ring-cream-400;
  }
  .btn-ghost {
    @apply text-ink-700 bg-transparent hover:bg-cream-200;
  }
  .btn-danger {
    @apply text-clay-700 bg-clay-50 hover:bg-clay-100;
  }

  /* Surfaces */
  .card {
    @apply rounded-[14px] bg-paper shadow-sheet;
    background-image: url(/textures/paper-grain.png);
  }
  .card-pad {
    @apply p-5 sm:p-7;
  }
  /* A card reached through a link (e.g. "Промени" → #details) briefly lights up */
  .card:target {
    animation: target-flash 1.8s ease-out;
  }

  /* A form inside a card sits on the card's own paper, below a dashed line */
  .card-form {
    @apply pt-5 mt-4 border-t border-dashed border-cream-400;
  }
  .tile {
    @apply bg-cream-50 rounded-xl ring-1 ring-cream-300;
  }

  /* Form controls */
  .label {
    @apply block mb-1.5 text-sm font-bold text-ink-700;
  }
  .hint {
    @apply mt-1.5 text-xs text-ink-500;
  }
  .input {
    @apply block w-full h-12 px-4 text-base text-ink bg-white rounded-xl border-0 ring-1 ring-inset ring-cream-300 transition placeholder:text-ink-300 hover:ring-cream-400 focus:ring-2 focus:ring-clay-400 focus:outline-none disabled:bg-cream-100 disabled:text-ink-400;
  }
  textarea.input {
    @apply h-auto py-3 leading-relaxed;
  }
  select.input {
    @apply pr-10;
  }
  .input.compact {
    @apply h-10 px-3 rounded-xl;
  }
  .check {
    @apply w-5 h-5 rounded-md border-cream-400 text-clay-600 focus:ring-clay-300;
  }

  /* Pills */
  .chip {
    @apply inline-flex items-center gap-1.5 px-3.5 h-9 text-sm font-semibold rounded-full ring-1 ring-inset ring-cream-300 bg-white text-ink-700 transition hover:ring-cream-400 hover:bg-cream-50;
  }
  .chip-active {
    @apply text-cream-50 bg-ink ring-ink hover:bg-ink-700;
  }
  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-bold rounded-full;
  }

  /* Underline that looks hand drawn */
  .scribble-underline {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 2, 110 6 S 170 11, 198 4' fill='none' stroke='%23E47D59' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.32em;
    padding-bottom: 0.08em;
  }

  /* A template thumbnail, propped up like a card on a table */
  .invite-thumb {
    @apply relative overflow-hidden rounded-[8px] bg-paper shadow-sheet transition duration-300 ease-out;
    aspect-ratio: 21 / 30;
  }
  .group:hover .invite-thumb {
    @apply -translate-y-1 shadow-sheet-lg;
  }

  /* Placeholder answers inside the live preview */
  .placeholder-token {
    border-radius: 0.3em;
    padding: 0 0.15em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: rgb(247 220 143 / 0.55);
    outline: 1.5px dashed rgb(192 80 43 / 0.55);
    outline-offset: 1px;
    transition: background 0.2s ease, outline-color 0.2s ease;
  }
  .placeholder-token.is-filled {
    background: transparent;
    outline-color: transparent;
  }
  .placeholder-token.is-active {
    background: rgb(247 220 143 / 0.8);
    outline-color: rgb(192 80 43 / 0.9);
  }

  /* RSVP choice cards */
  .choice {
    @apply flex flex-col items-center justify-center gap-1.5 px-2 py-4 text-sm font-bold rounded-xl cursor-pointer select-none bg-white ring-1 ring-inset ring-cream-300 text-ink-700 transition hover:ring-cream-400;
  }
  .peer:checked + .choice {
    @apply ring-2;
  }
  .peer:focus-visible + .choice {
    @apply ring-4 ring-clay-200;
  }

  .confetti-piece {
    position: absolute;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti-fall 1.6s cubic-bezier(.2,.6,.4,1) forwards;
  }
}

@keyframes confetti-fall {
  0% { opacity: 1; transform: translate3d(0, -10px, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0), 260px, 0) rotate(var(--rot, 540deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-rise-in,
  .animate-pop-in,
  .animate-float,
  .animate-wiggle,
  .confetti-piece {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Stationery: the materials invitations are made of
   ------------------------------------------------------------------ */
@layer components {
  .font-hand {
    font-family: "Caveat", "Noto Color Emoji", cursive;
    font-weight: 600;
    letter-spacing: 0;
  }

  /* A handwritten note in the margin */
  .hand-note {
    @apply text-2xl leading-none font-hand text-clay-600;
  }

  .grain {
    background-image: url(/textures/paper-grain.png);
  }

  /* A sheet of good paper */
  .sheet {
    @apply relative rounded-[10px] bg-paper shadow-sheet;
    background-image: url(/textures/paper-grain.png);
  }

  /* Washi tape holding a card down */
  /* Solid paper tape; it sits above whatever it holds down (z-30) */
  .tape {
    @apply absolute z-30 h-7 w-24 pointer-events-none;
    background: #F5DD97 linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 45%, rgb(120 90 30 / 0.06));
    filter: drop-shadow(0 1px 1px rgb(60 40 25 / 0.18));
    clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 0, 96% 50%, 100% 100%, 76% 92%, 70% 100%, 64% 90%, 0 100%, 4% 50%);
  }
  .tape-sage {
    background: repeating-linear-gradient(-45deg, #C9D8C0 0 7px, #E3EBDD 7px 14px);
  }
  .tape-clay {
    background: repeating-linear-gradient(90deg, #F6C7B4 0 6px, #FBE4D9 6px 12px);
  }

  /* A rubber stamp pressed in ink */
  .ink-stamp {
    @apply inline-flex items-center justify-center px-4 py-1.5 text-lg font-extrabold tracking-[0.12em] uppercase rounded-md border-[3px] border-current;
    -webkit-mask-image: url(/textures/ink.png);
    mask-image: url(/textures/ink.png);
    -webkit-mask-size: 300px;
    mask-size: 300px;
  }

  /* Two invitations fanned out in the hand (the gallery's style filter).
     Each card sets --x (sideways) and --r (tilt); hovering spreads the fan. */
  .card-fan {
    @apply relative block w-[70px] h-[68px];
    --spread: 1;
  }
  .card-fan > [data-controller] {
    @apply absolute bottom-0 left-1/2 w-[45px] rounded-[4px] bg-paper bg-cover bg-center shadow-sheet transition-transform duration-300 ease-out;
    aspect-ratio: 21 / 30;
    transform-origin: 50% 90%;
    transform: translateX(calc(-50% + var(--x) * var(--spread))) rotate(calc(var(--r) * var(--spread)));
  }
  .style-pick:hover .card-fan {
    --spread: 1.35;
  }
  .style-pick .card-fan-active,
  .style-pick:hover .card-fan-active {
    --spread: 0.5;
  }
  /* The small fan on the filter button, spread while it is hovered or open */
  .card-fan-mini {
    @apply w-[52px] h-11;
  }
  .card-fan-mini > [data-controller] {
    @apply w-[26px] rounded-[3px];
  }
  .filters-button:hover .card-fan,
  .filters-button[aria-expanded="true"] .card-fan {
    --spread: 1.3;
  }

  /* A dab of watercolour on the page (the gallery's colour filter): flat
     colour on grained paper with a darker edge; --turn varies its shape */
  .paint-dab {
    @apply block w-9 h-9 transition-transform duration-200 ease-out;
    border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%;
    background-image: url(/textures/paper-grain.png);
    box-shadow: inset 0 0 0 1.5px rgb(60 40 25 / 0.12), inset 2px -3px 6px rgb(60 40 25 / 0.12);
    transform: rotate(var(--turn, 0deg));
  }
  .paint-dab-light {
    box-shadow: inset 0 0 0 1.5px theme("colors.cream.400"), inset 2px -3px 6px rgb(60 40 25 / 0.06);
  }
  .color-pick:hover .paint-dab {
    transform: rotate(var(--turn, 0deg)) scale(1.12);
  }

  /* A classic RSVP reply card with a perforated top edge */
  .reply-card {
    @apply relative sheet;
  }
  .reply-card::before {
    content: "";
    @apply absolute inset-x-5 top-0 h-px;
    background-image: linear-gradient(90deg, theme("colors.cream.400") 50%, transparent 50%);
    background-size: 10px 1px;
  }

  /* Ruled lines to write on */
  .ruled {
    background-image: linear-gradient(transparent calc(100% - 1px), theme("colors.cream.300") 0);
    background-size: 100% 2.1rem;
    line-height: 2.1rem;
  }

  /* A kraft gift tag with a punched hole */
  .gift-tag {
    @apply relative text-ink-800 bg-kraft-200 shadow-sheet;
    background-image: url(/textures/paper-grain.png);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%);
    border-radius: 6px;
  }

  /* An envelope with its flap open */
  .envelope {
    @apply relative bg-kraft-100;
    background-image: url(/textures/paper-grain.png);
  }

  /* Chat bubble the invitation arrives in */
  .chat-bubble {
    @apply relative p-1.5 bg-white rounded-2xl rounded-br-md shadow-sheet;
  }
}

/* ------------------------------------------------------------------
   The guest page: an invitation that arrives in an envelope, a desk
   calendar page, a folded map, a printed reply card and a shipping tag.
   ------------------------------------------------------------------ */
@layer components {
  /* The envelope is drawn around the card. Without JavaScript, or once a
     guest has opened it, only the card is shown. */
  .invite-envelope {
    @apply relative;
  }
  .envelope-card {
    @apply relative z-[2];
  }
  .envelope-part {
    @apply hidden absolute pointer-events-none;
    left: -2.5%;
    width: 105%;
    top: 22%;
    height: 56%;
  }
  @screen sm {
    .envelope-part {
      left: -6%;
      width: 112%;
    }
  }
  .invite-envelope.is-sealed .envelope-part,
  .invite-envelope.is-opening .envelope-part {
    @apply block;
  }
  .invite-envelope.is-sealed .envelope-card {
    transform: translateY(25%);
    clip-path: inset(-20% -12% 47% -12%);
  }
  .envelope-back { @apply z-[1]; }
  .envelope-pocket { @apply z-[3]; }
  .envelope-to { @apply z-[4]; }
  .envelope-flap { @apply z-[5]; }
  .envelope-flap-inner {
    @apply absolute inset-0;
    transform-origin: 50% 0;
  }
  .envelope-flap-liner { opacity: 0; }
  .envelope-seal {
    @apply z-[6];
    left: 50%;
    top: calc(22% + 56% * 0.575);
    width: 21%;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-8deg);
    filter: drop-shadow(0 3px 3px rgb(60 30 20 / 0.35));
  }
  .envelope-hint {
    @apply z-[6];
    left: 0;
    width: 100%;
    top: 80%;
    height: auto;
  }
  .envelope-open {
    @apply z-[7] pointer-events-auto cursor-pointer rounded-md focus:outline-none focus-visible:ring-4 focus-visible:ring-clay-300;
  }
  .invite-envelope.is-sealed .envelope-seal {
    animation: envelope-seal-wobble 2.6s ease-in-out 1.2s infinite;
  }

  /* Opening: the seal comes off and the flap lifts, then the card slides up
     while the envelope slides down off it; the envelope only fades once the
     whole card is out. Card and envelope share one timeline (see keyframes). */
  .invite-envelope.is-opening .envelope-card {
    animation: envelope-card-out 1400ms linear 550ms both;
  }
  .invite-envelope.is-opening .envelope-seal {
    animation: envelope-seal-off 300ms ease-in both;
  }
  .invite-envelope.is-opening .envelope-flap {
    animation: envelope-flap-behind 500ms 150ms both, envelope-slide-down 1400ms linear 550ms both;
  }
  .invite-envelope.is-opening .envelope-flap-inner {
    animation: envelope-flap-open 500ms cubic-bezier(0.45, 0, 0.25, 1) 150ms both;
  }
  .invite-envelope.is-opening .envelope-flap-front {
    animation: envelope-face-hide 500ms 150ms both;
  }
  .invite-envelope.is-opening .envelope-flap-liner {
    animation: envelope-face-show 500ms 150ms both;
  }
  .invite-envelope.is-opening .envelope-back,
  .invite-envelope.is-opening .envelope-pocket,
  .invite-envelope.is-opening .envelope-to {
    animation: envelope-slide-down 1400ms linear 550ms both;
  }
  .invite-envelope.is-opening .envelope-hint,
  .invite-envelope.is-opening .envelope-open {
    @apply hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    .invite-envelope .envelope-part {
      display: none !important;
    }
    .invite-envelope .envelope-card {
      transform: none !important;
      clip-path: none !important;
      animation: none !important;
    }
  }

  /* A page torn from a desk calendar, with the pages below it */
  .desk-calendar {
    @apply relative overflow-visible text-center bg-white rounded-[6px];
    box-shadow:
      0 2px 0 -1px #f6f3ee,
      0 4px 0 -2px #e6e0d6,
      0 6px 0 -3px #f6f3ee,
      0 18px 30px -14px rgb(60 40 25 / 0.35);
  }
  .desk-calendar-month {
    @apply relative pt-3 pb-1.5 text-[11px] font-extrabold tracking-[0.2em] uppercase rounded-t-[6px] bg-clay-600 text-cream-50;
  }
  .desk-calendar-month::before,
  .desk-calendar-month::after {
    content: "";
    @apply absolute -top-2 w-2 h-4 rounded-full bg-ink-700;
    box-shadow: inset 1px 1px 1px rgb(255 255 255 / 0.25);
  }
  .desk-calendar-month::before { left: 26%; }
  .desk-calendar-month::after { right: 26%; }

  /* The date on the guest page: calendar page, time, and "add to calendar" */
  .date-row {
    @apply grid gap-x-6 gap-y-4 items-center sm:gap-x-8;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .date-row:has(.date-row-actions) .date-row-calendar {
    grid-row: span 2;
  }
  .date-row:has(.date-row-actions) .date-row-time {
    align-self: end;
  }
  .date-row-actions {
    grid-column: 2;
    align-self: start;
  }
  /* The smallest phones have no room beside the calendar for the button */
  @media (max-width: 359px) {
    .date-row:has(.date-row-actions) .date-row-calendar {
      grid-row: auto;
    }
    .date-row:has(.date-row-actions) .date-row-time {
      align-self: center;
    }
    .date-row-actions {
      grid-column: 1 / -1;
    }
  }

  /* Writing lines on the printed reply card */
  .ruled-input {
    @apply block px-0 w-full h-12 bg-transparent rounded-none border-0 border-b-[1.5px] border-ink-300 text-ink-900 transition placeholder:text-ink-300 focus:ring-0 focus:outline-none focus:border-clay-500;
    font-family: "Caveat", "Noto Color Emoji", cursive;
    font-size: 1.75rem;
    font-weight: 600;
  }
  textarea.ruled-input {
    @apply h-auto border-b-0 resize-none;
    line-height: 2.4rem;
    background-image: linear-gradient(transparent calc(100% - 1.5px), theme("colors.ink.300") 0);
    background-size: 100% 2.4rem;
    background-attachment: local;
  }
  textarea.ruled-input:focus {
    background-image: linear-gradient(transparent calc(100% - 1.5px), theme("colors.clay.400") 0);
  }
  .reply-label {
    @apply block text-sm font-semibold text-ink-500;
  }

  /* A box to tick on the reply card */
  .reply-choice {
    @apply flex flex-col gap-2 items-center py-3 rounded-lg transition cursor-pointer select-none;
  }
  .reply-box {
    @apply relative w-7 h-7 rounded-[4px] border-2 border-ink-400 bg-paper transition duration-200;
  }
  /* Hovering shows a faint pencil tick: what a click will do */
  .reply-choice:hover {
    @apply text-ink-900;
  }
  .reply-choice:hover .reply-box {
    @apply border-clay-500 -rotate-3 scale-110;
  }
  .reply-choice:hover .reply-tick {
    @apply opacity-30 text-ink-500;
  }
  .reply-choice:hover .reply-tick path {
    stroke-dashoffset: 0;
  }
  .reply-tick {
    @apply absolute -top-3 -right-2 w-10 h-10 opacity-0 text-clay-600;
  }
  .reply-tick path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
  }
  .peer:checked + .reply-choice .reply-tick {
    @apply opacity-100 text-clay-600;
  }
  .peer:checked + .reply-choice .reply-box {
    @apply border-ink-700;
  }
  .peer:checked + .reply-choice .reply-tick path {
    animation: tick-draw 0.35s ease-out forwards;
  }
  .peer:checked + .reply-choice {
    @apply text-ink-900;
  }
  .peer:focus-visible + .reply-choice {
    @apply ring-4 ring-clay-200;
  }
  .reply-step {
    @apply flex justify-center items-center w-9 h-9 rounded-full ring-1 ring-inset ring-ink-300 text-ink-600 transition hover:bg-cream-100 hover:text-ink;
  }

  /* A shipping tag: chamfered top corners and a reinforced hole */
  .shipping-tag {
    @apply relative text-ink-800 bg-kraft-200;
    background-image: url(/textures/paper-grain.png);
    clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%, 0 34px);
    border-radius: 0 0 6px 6px;
  }
  .tag-hole {
    @apply absolute z-20 w-8 h-8 rounded-full bg-[#EFE3CF] shadow-[0_1px_2px_rgba(60,40,25,0.25)];
  }
  .tag-hole::after {
    content: "";
    @apply absolute inset-[7px] rounded-full bg-cream-100 shadow-[inset_0_1px_2px_rgba(60,40,25,0.35)];
  }

  /* An instant photo */
  .polaroid {
    @apply block relative p-2 pb-3 bg-white shadow-sheet transition duration-300;
  }
}

@keyframes envelope-seal-off {
  to { opacity: 0; transform: translate(-50%, -50%) rotate(14deg) scale(0.5); }
}
@keyframes envelope-seal-wobble {
  0%, 80%, 100% { transform: translate(-50%, -50%) rotate(-8deg); }
  86% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.04); }
  92% { transform: translate(-50%, -50%) rotate(-12deg) scale(1.02); }
}
@keyframes envelope-flap-open {
  from { transform: perspective(900px) rotateX(0deg); }
  to { transform: perspective(900px) rotateX(180deg); }
}
@keyframes envelope-flap-behind {
  0%, 49% { z-index: 5; }
  50%, 100% { z-index: 1; }
}
@keyframes envelope-face-hide {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes envelope-face-show {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes tick-draw {
  to { stroke-dashoffset: 0; }
}

/* One shared 1400ms timeline (generated): the card rises out of the open
   envelope while the envelope already slides down in one ease-in-out motion;
   it fades only after it has cleared the card. The card's bottom clip is kept exactly at the
   envelope's bottom edge: 22% - 56% x envelope offset + card offset. The card
   straightens out inside the envelope and takes on its resting tilt as it rises. */
@keyframes envelope-card-out {
  0% { transform: translateY(25.00%) rotate(-0.000deg); clip-path: inset(-20% -12% 47.00% -12%); }
  2.5% { transform: translateY(21.06%) rotate(-0.158deg); clip-path: inset(-20% -12% 43.30% -12%); }
  5% { transform: translateY(17.56%) rotate(-0.298deg); clip-path: inset(-20% -12% 40.00% -12%); }
  7.5% { transform: translateY(14.47%) rotate(-0.421deg); clip-path: inset(-20% -12% 37.10% -12%); }
  10% { transform: translateY(11.76%) rotate(-0.529deg); clip-path: inset(-20% -12% 34.56% -12%); }
  12.5% { transform: translateY(9.42%) rotate(-0.623deg); clip-path: inset(-20% -12% 32.35% -12%); }
  15% { transform: translateY(7.41%) rotate(-0.704deg); clip-path: inset(-20% -12% 30.46% -12%); }
  17.5% { transform: translateY(5.71%) rotate(-0.772deg); clip-path: inset(-20% -12% 28.67% -12%); }
  20% { transform: translateY(4.29%) rotate(-0.829deg); clip-path: inset(-20% -12% 26.77% -12%); }
  22.5% { transform: translateY(3.12%) rotate(-0.875deg); clip-path: inset(-20% -12% 24.73% -12%); }
  25% { transform: translateY(2.19%) rotate(-0.912deg); clip-path: inset(-20% -12% 22.54% -12%); }
  27.5% { transform: translateY(1.47%) rotate(-0.941deg); clip-path: inset(-20% -12% 20.19% -12%); }
  30% { transform: translateY(0.93%) rotate(-0.963deg); clip-path: inset(-20% -12% 17.66% -12%); }
  32.5% { transform: translateY(0.54%) rotate(-0.979deg); clip-path: inset(-20% -12% 14.95% -12%); }
  35% { transform: translateY(0.27%) rotate(-0.989deg); clip-path: inset(-20% -12% 12.07% -12%); }
  37.5% { transform: translateY(0.12%) rotate(-0.995deg); clip-path: inset(-20% -12% 8.99% -12%); }
  40% { transform: translateY(0.03%) rotate(-0.999deg); clip-path: inset(-20% -12% 5.73% -12%); }
  42.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% 2.29% -12%); }
  45% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -1.33% -12%); }
  47.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -5.12% -12%); }
  50% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -9.04% -12%); }
  52.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -13.07% -12%); }
  55% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -17.17% -12%); }
  57.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -21.30% -12%); }
  60% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -25.43% -12%); }
  62.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -29.53% -12%); }
  65% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -33.56% -12%); }
  67.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -37.48% -12%); }
  70% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -41.27% -12%); }
  72.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -44.88% -12%); }
  75% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -48.30% -12%); }
  77.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -51.48% -12%); }
  80% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -54.41% -12%); }
  82.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -57.05% -12%); }
  85% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -59.39% -12%); }
  87.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -61.40% -12%); }
  90% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -63.07% -12%); }
  92.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -64.39% -12%); }
  95% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -65.34% -12%); }
  97.5% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -65.91% -12%); }
  100% { transform: translateY(0.00%) rotate(-1.000deg); clip-path: inset(-20% -12% -66.10% -12%); }
}

@keyframes envelope-slide-down {
  0% { transform: translateY(0.00%); opacity: 1.000; }
  2.5% { transform: translateY(0.00%); opacity: 1.000; }
  5% { transform: translateY(0.00%); opacity: 1.000; }
  7.5% { transform: translateY(0.00%); opacity: 1.000; }
  10% { transform: translateY(0.00%); opacity: 1.000; }
  12.5% { transform: translateY(0.00%); opacity: 1.000; }
  15% { transform: translateY(-0.00%); opacity: 1.000; }
  17.5% { transform: translateY(0.34%); opacity: 1.000; }
  20% { transform: translateY(1.36%); opacity: 1.000; }
  22.5% { transform: translateY(3.05%); opacity: 1.000; }
  25% { transform: translateY(5.40%); opacity: 1.000; }
  27.5% { transform: translateY(8.39%); opacity: 1.000; }
  30% { transform: translateY(11.98%); opacity: 1.000; }
  32.5% { transform: translateY(16.16%); opacity: 1.000; }
  35% { transform: translateY(20.88%); opacity: 1.000; }
  37.5% { transform: translateY(26.10%); opacity: 1.000; }
  40% { transform: translateY(31.79%); opacity: 1.000; }
  42.5% { transform: translateY(37.89%); opacity: 1.000; }
  45% { transform: translateY(44.34%); opacity: 1.000; }
  47.5% { transform: translateY(51.10%); opacity: 1.000; }
  50% { transform: translateY(58.11%); opacity: 1.000; }
  52.5% { transform: translateY(65.30%); opacity: 1.000; }
  55% { transform: translateY(72.62%); opacity: 1.000; }
  57.5% { transform: translateY(80.00%); opacity: 1.000; }
  60% { transform: translateY(87.38%); opacity: 1.000; }
  62.5% { transform: translateY(94.70%); opacity: 1.000; }
  65% { transform: translateY(101.89%); opacity: 1.000; }
  67.5% { transform: translateY(108.90%); opacity: 1.000; }
  70% { transform: translateY(115.66%); opacity: 1.000; }
  72.5% { transform: translateY(122.11%); opacity: 1.000; }
  75% { transform: translateY(128.21%); opacity: 1.000; }
  77.5% { transform: translateY(133.90%); opacity: 0.870; }
  80% { transform: translateY(139.12%); opacity: 0.696; }
  82.5% { transform: translateY(143.84%); opacity: 0.539; }
  85% { transform: translateY(148.02%); opacity: 0.399; }
  87.5% { transform: translateY(151.61%); opacity: 0.280; }
  90% { transform: translateY(154.60%); opacity: 0.180; }
  92.5% { transform: translateY(156.95%); opacity: 0.102; }
  95% { transform: translateY(158.64%); opacity: 0.045; }
  97.5% { transform: translateY(159.66%); opacity: 0.011; }
  100% { transform: translateY(160.00%); opacity: 0.000; }
}

/* ------------------------------------------------------------------
   Blog articles. Only the article's own top-level elements are styled,
   so cards embedded in it (like the Rhymed For You note) keep their look.
   ------------------------------------------------------------------ */
@layer components {
  .article {
    @apply text-[1.0625rem] leading-[1.8] text-ink-700;
  }
  .article > * + * {
    margin-top: 1.25em;
  }
  .article > h2 {
    @apply text-[1.85rem] font-medium leading-tight font-display text-ink-900 scroll-mt-28 sm:text-[2rem];
    margin-top: 2.4em;
  }
  .article > h3 {
    @apply text-xl font-medium leading-snug font-display text-ink-900 scroll-mt-28;
    margin-top: 1.9em;
  }
  .article > h2 + *,
  .article > h3 + * {
    margin-top: 0.7em;
  }
  .article > :first-child {
    margin-top: 0;
  }
  .article > p a,
  .article > ul a,
  .article > ol a {
    @apply font-semibold underline decoration-clay-300 decoration-2 underline-offset-4 text-ink-900 transition hover:text-clay-700 hover:decoration-clay-500;
  }
  .article strong {
    @apply font-bold text-ink-900;
  }
  .article > ul,
  .article > ol {
    padding-left: 1.6em;
  }
  .article > ul > li {
    @apply relative;
  }
  .article > ul > li::before {
    content: "";
    @apply absolute rounded-full bg-clay-400;
    left: -1.05em;
    top: 0.72em;
    width: 0.42em;
    height: 0.42em;
  }
  .article > ol {
    list-style: decimal;
  }
  .article > ol > li::marker {
    @apply font-bold text-clay-600;
  }
  .article li + li {
    margin-top: 0.5em;
  }

  /* Ready-made texts: little invitation cards taped to the page */
  .article > blockquote {
    @apply relative px-7 pt-9 pb-16 mx-auto max-w-[34rem] text-center sheet shadow-sheet-lg font-display text-[1.05rem] leading-[1.75] text-ink-800 sm:px-10;
    margin-top: 2.4em;
    margin-bottom: 2.4em;
    transform: rotate(-0.5deg);
  }
  .article > blockquote:nth-of-type(even) {
    transform: rotate(0.6deg);
  }
  .article > blockquote + blockquote {
    margin-top: 3em;
  }
  .article > blockquote::before {
    content: "";
    @apply absolute h-7 w-24 pointer-events-none;
    top: -0.75rem;
    left: 50%;
    margin-left: -3rem;
    transform: rotate(-3deg);
    background: #F5DD97 linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 45%, rgb(120 90 30 / 0.06));
    filter: drop-shadow(0 1px 1px rgb(60 40 25 / 0.18));
    clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 0, 96% 50%, 100% 100%, 76% 92%, 70% 100%, 64% 90%, 0 100%, 4% 50%);
  }
  .article > blockquote:nth-of-type(3n + 2)::before {
    background: repeating-linear-gradient(-45deg, #C9D8C0 0 7px, #E3EBDD 7px 14px);
    transform: rotate(2deg);
  }
  .article > blockquote:nth-of-type(3n)::before {
    background: repeating-linear-gradient(90deg, #F6C7B4 0 6px, #FBE4D9 6px 12px);
    transform: rotate(-1deg);
  }
  .article > blockquote p + p {
    margin-top: 0.9em;
  }
  .quote-copy {
    @apply absolute right-1/2 bottom-4 translate-x-1/2 inline-flex items-center h-8 px-4 text-[13px] font-bold rounded-full font-sans bg-cream-100 text-ink-700 ring-1 ring-inset ring-cream-300 transition hover:bg-white hover:ring-cream-400 focus:outline-none focus-visible:ring-4 focus-visible:ring-clay-200;
  }
  .quote-copy.is-copied {
    @apply bg-sage-100 text-sage-700 ring-sage-300;
  }

  /* The closing "make it in Nestful" line, as a sticky note */
  .article > p.italic {
    @apply px-6 pt-5 pb-6 not-italic rounded-[3px] bg-butter-200 text-ink-800 shadow-sheet font-hand text-[1.55rem] leading-snug;
    margin-top: 2.6em;
    transform: rotate(-0.8deg);
  }
  .article > p.italic a {
    @apply font-semibold decoration-ink-800/40 decoration-1 underline-offset-[5px];
  }
}

@keyframes target-flash {
  0%, 35% { outline: 3px solid rgb(228 125 89 / 0.75); outline-offset: 5px; }
  100% { outline: 3px solid rgb(228 125 89 / 0); outline-offset: 5px; }
}

/* ------------------------------------------------------------------
   The card editor: the card in the middle, a rail of things to add on
   the left (a bar at the bottom on phones) and the tools for whatever is
   selected on the right (a sheet above the bar on phones).
   ------------------------------------------------------------------ */
:root {
  --editor-header: 3.5rem;
  --editor-bar: 4.5rem;
  --editor-sheet-h: 14.5rem;
  --editor-sheet-tall-h: min(25rem, 50svh);
}

@layer components {
  .editor-stage {
    --editor-sheet-space: 0px;
    @apply flex justify-center items-center w-full min-h-svh;
    padding-top: var(--editor-header);
  }
  .editor-stage-desktop {
    padding-left: 6.25rem;
    padding-right: 20.25rem;
  }
  .editor-stage-desktop .editor-card {
    width: min(600px, calc((100svh - var(--editor-header) - 2.5rem) * 0.7), 100%);
    margin: 1.25rem 0;
  }
  .editor-stage-mobile {
    padding-bottom: calc(var(--editor-bar) + env(safe-area-inset-bottom) + var(--editor-sheet-space));
  }
  .editor-stage-mobile .editor-card {
    width: min(calc(100vw - 1.5rem), calc((100svh - var(--editor-header) - var(--editor-bar) - env(safe-area-inset-bottom) - var(--editor-sheet-space) - 1.75rem) * 0.7));
    margin: 0.875rem 0;
    transition: width 0.25s ease;
  }
  .editor-card .invite-wrapper {
    @apply shadow-sheet-lg;
  }

  /* Surfaces */
  .editor-panel {
    @apply flex flex-col min-h-0 rounded-[14px] bg-paper shadow-sheet;
    background-image: url(/textures/paper-grain.png);
  }
  .editor-heading {
    @apply text-[11px] font-extrabold tracking-[0.14em] uppercase text-ink-400;
  }
  .editor-group {
    @apply px-4 py-4 border-t border-dashed border-cream-300;
  }
  .editor-group:first-child {
    @apply border-t-0;
  }
  .editor-hint {
    @apply text-xs leading-relaxed text-ink-500;
  }

  /* Buttons */
  .editor-btn {
    @apply inline-flex gap-1.5 justify-center items-center px-3 h-10 text-[11px] font-bold rounded-xl ring-1 ring-inset transition select-none ring-cream-300 bg-white text-ink-700 hover:bg-cream-50 hover:ring-cream-400 active:scale-[.98] disabled:opacity-40 disabled:pointer-events-none;
  }
  .editor-btn-danger {
    @apply text-clay-700 ring-clay-100 hover:bg-clay-50 hover:ring-clay-200;
  }
  .editor-icon-btn {
    @apply inline-flex justify-center items-center w-10 h-10 rounded-xl transition shrink-0 text-ink-600 hover:bg-cream-200 hover:text-ink disabled:opacity-30 disabled:pointer-events-none;
  }
  .editor-icon-btn[aria-pressed="true"] {
    @apply bg-ink text-cream-50 hover:bg-ink-700 hover:text-cream-50;
  }
  .editor-seg {
    @apply flex gap-1 p-1 rounded-xl bg-cream-200/80;
  }
  .editor-seg-btn {
    @apply inline-flex flex-1 gap-1.5 justify-center items-center px-2 h-9 text-[11px] font-bold rounded-lg transition text-ink-500 hover:text-ink;
  }
  .editor-seg-btn[aria-pressed="true"] {
    @apply bg-white shadow-sm text-ink;
  }
  .editor-tile {
    @apply flex flex-col gap-1.5 justify-center items-center p-3 text-[11px] font-bold rounded-xl ring-1 ring-inset transition cursor-pointer select-none ring-cream-300 bg-white text-ink-700 hover:ring-clay-300 hover:-translate-y-px hover:shadow-sm;
  }
  form[aria-busy="true"] .editor-tile,
  form[aria-busy="true"] .editor-btn {
    @apply opacity-60 cursor-progress;
  }

  .editor-btn,
  .editor-icon-btn,
  .editor-seg-btn,
  .editor-tile,
  .editor-rail-btn,
  .editor-bar-btn,
  .editor-swatch {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-clay-300;
  }

  /* Colours */
  .editor-swatch {
    @apply relative w-8 h-8 rounded-full ring-1 ring-inset transition ring-ink/10 hover:scale-110 shrink-0;
  }
  .editor-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px theme("colors.paper.DEFAULT"), 0 0 0 4px theme("colors.clay.500");
  }
  .editor-swatch-none {
    background: linear-gradient(135deg, transparent calc(50% - 1px), theme("colors.clay.500") calc(50% - 1px), theme("colors.clay.500") calc(50% + 1px), transparent calc(50% + 1px)), white;
  }

  /* Left rail and its drawers (desktop) */
  .editor-rail {
    @apply flex fixed bottom-3 left-3 z-40 flex-col gap-1 items-center py-2 w-[4.75rem] editor-panel;
    top: calc(var(--editor-header) + 0.75rem);
  }
  .editor-rail-btn {
    @apply flex flex-col gap-1 justify-center items-center w-16 h-16 text-[11px] font-bold rounded-xl transition cursor-pointer text-ink-600 hover:bg-cream-200 hover:text-ink;
  }
  .editor-rail-btn[aria-pressed="true"] {
    @apply bg-ink text-cream-50;
  }
  .editor-drawer {
    @apply fixed bottom-3 z-40 flex-col min-h-0 w-[20rem] rounded-[14px] bg-paper shadow-lift;
    display: none;
    background-image: url(/textures/paper-grain.png);
    top: calc(var(--editor-header) + 0.75rem);
    left: 6.25rem;
  }
  .editor-drawer.is-open {
    @apply animate-pop-in;
    display: flex;
  }

  /* Bottom bar and sheets (phones): a dock at the bottom of the screen with
     the bar, and the open sheet sitting on top of it */
  .editor-dock {
    @apply flex fixed inset-x-0 bottom-0 z-40 flex-col;
  }
  .editor-bar {
    @apply flex overflow-x-auto gap-1 items-stretch px-2 border-t backdrop-blur shrink-0 scrollbar-hide bg-paper/95 border-cream-300;
    height: calc(var(--editor-bar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .editor-bar.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  }
  .editor-bar-btn {
    @apply flex flex-col gap-1 justify-center items-center px-2 my-1.5 min-w-[4.25rem] text-[11px] font-bold rounded-xl transition shrink-0 text-ink-600 active:scale-95;
  }
  .editor-bar-btn[aria-pressed="true"] {
    @apply bg-ink text-cream-50;
  }
  .editor-sheet {
    @apply flex-col rounded-t-3xl border-t bg-paper border-cream-300 shrink-0;
    display: none;
    height: var(--editor-sheet-h);
    box-shadow: 0 -12px 30px -18px rgb(43 36 32 / 0.35);
  }
  .editor-sheet.is-tall {
    height: var(--editor-sheet-tall-h);
  }
  .editor-sheet.is-open {
    @apply animate-rise-in;
    display: flex;
  }

  /* Elements on the card while editing: a light outline on hover; the
     selected one gets its frame and handles from the selection layer */
  .editor-element {
    outline: 1.5px dashed transparent;
    outline-offset: 3px;
    transition: outline-color 0.15s ease;
  }
  @media (hover: hover) {
    .editor-element:hover {
      outline-color: rgb(228 125 89 / 0.55);
    }
  }
  section.active > .editor-element {
    outline-color: transparent;
  }
  .editor-line-hit:hover {
    stroke: rgb(228 125 89 / 0.25);
  }

  /* The selection layer: above every element on the card */
  .editor-selection {
    @apply absolute inset-0 pointer-events-none;
    z-index: 9000;
  }
  .editor-selection[hidden] {
    display: none;
  }
  .editor-selection-box {
    position: absolute;
    outline: 2px solid theme("colors.clay.500");
    outline-offset: 3px;
    transform-origin: center;
  }
  .editor-selection-box[hidden] {
    display: none;
  }
  .editor-selection.is-editing .editor-selection-box {
    outline-style: dashed;
  }
  .editor-selection.is-panning .editor-selection-box {
    outline: 2px dashed theme("colors.butter.500");
  }
  .editor-handle {
    @apply absolute w-3 h-3 bg-white rounded-full border-2 shadow-sm pointer-events-auto border-clay-500;
  }
  .editor-handle::before {
    content: "";
    @apply absolute -inset-2.5;
  }
  .editor-handle-nw { top: -10px; left: -10px; cursor: nw-resize; }
  .editor-handle-ne { top: -10px; right: -10px; cursor: ne-resize; }
  .editor-handle-sw { bottom: -10px; left: -10px; cursor: sw-resize; }
  .editor-handle-se { bottom: -10px; right: -10px; cursor: se-resize; }
  .editor-handle-end {
    display: none;
    cursor: grab;
    transform: translate(-50%, -50%);
  }
  .editor-selection[data-type="line"] .editor-handle-end {
    display: block;
  }
  .editor-rotate {
    @apply flex absolute left-1/2 flex-col items-center -translate-x-1/2;
    top: -2.5rem;
  }
  .editor-rotate-knob {
    @apply flex relative justify-center items-center w-6 h-6 bg-white rounded-full border shadow-sm transition pointer-events-auto cursor-grab border-clay-300 text-clay-600 hover:bg-clay-50 active:cursor-grabbing;
  }
  .editor-rotate-knob::before {
    content: "";
    @apply absolute -inset-2;
  }
  /* Only text and illustrations turn; nothing moves by hand while typing */
  .editor-selection:not([data-type="invite"]):not([data-type="scribble"]) .editor-rotate,
  .editor-selection.is-editing .editor-handle,
  .editor-selection.is-editing .editor-rotate,
  .editor-selection.is-panning .editor-handle {
    display: none;
  }
  .is-touch .editor-handle {
    @apply w-4 h-4;
  }
  .is-touch .editor-handle-nw { top: -12px; left: -12px; }
  .is-touch .editor-handle-ne { top: -12px; right: -12px; }
  .is-touch .editor-handle-sw { bottom: -12px; left: -12px; }
  .is-touch .editor-handle-se { bottom: -12px; right: -12px; }
  .is-touch .editor-handle::before {
    @apply -inset-3;
  }
  section.is-panning svg [data-rectangle-target="rect"],
  section.is-panning svg [data-circle-target="ellipse"] {
    cursor: move;
  }

  /* Illustrations that take a colour: their black parts follow it */
  .scribble-tinted [fill="black"],
  .scribble-tinted [fill="#000"],
  .scribble-tinted [fill="#000000"] {
    fill: currentColor;
  }
  .scribble-tinted [stroke="black"],
  .scribble-tinted [stroke="#000"],
  .scribble-tinted [stroke="#000000"] {
    stroke: currentColor;
  }
}

/* Room for an open sheet: the card shrinks so it stays in view */
body:has(.editor-panel-shell:not(.hidden) .editor-sheet.is-open) .editor-stage,
body:not(:has(.invite-wrapper > section.active)):has(.editor-addbar .editor-sheet.is-open) .editor-stage {
  --editor-sheet-space: var(--editor-sheet-h);
}
body:has(.editor-panel-shell:not(.hidden) .editor-sheet.is-open.is-tall) .editor-stage,
body:not(:has(.invite-wrapper > section.active)):has(.editor-addbar .editor-sheet.is-open.is-tall) .editor-stage {
  --editor-sheet-space: var(--editor-sheet-tall-h);
}

/* Nothing selected: the card's own settings and the "add" bar show */
body:has(.invite-wrapper > section.active) .editor-when-idle {
  display: none !important;
}

@media print {
  .editor-element {
    outline: none !important;
  }
  .editor-selection {
    display: none !important;
  }
}
/* Invitation fonts, all SIL OFL 1.1; licenses and sources in fonts/licenses/.
   WOFF2 files are Latin/Cyrillic subsets of fonts without Reserved Font Names;
   fonts with a Reserved Font Name are the unmodified upstream files. */
@font-face {
  font-family: "Bad Script";
  src: url(/assets/BadScript-Regular-b1ab5bb4d9434a2e8bbb2b7e46c59a6287a8eb05117fe002677c6bb6f4e5fd5b.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* A single weight: the variable font draws its semibold for normal text. */
@font-face {
  font-family: "Comfortaa";
  src: url(/assets/Comfortaa-Variable-6776b9bf72b6ecd22b0441cb862a7d0dc3e28ed13e6dd81c6b2b0628ca0e72f9.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url(/assets/CormorantGaramond-Medium-cb6ca543f0d08c325a37e7340e2ba5ded78f47536afd1a3b08f89a480b1f5953.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond Italic";
  src: url(/assets/CormorantGaramond-MediumItalic-76590fdc0779985fa7fe700b5c35a63c770b6b0c0fbeacb5d1437421afb1d9ad.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url(/assets/IBMPlexMono-Regular-748e3dc8da57714f591df0ac0a32a208d1647b9e896e60145fb049a6a8ffe8f5.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url(/assets/Oswald-Medium-e2d67df5f16d9718295d6be745527999531c6dc0767bed6044ef3c3119fdb994.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url(/assets/PlayfairDisplay-Variable-66f8391080561b868be79478cb216d1c152c52a6c03a84d06b3e368ee76cd15c.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display Italic";
  src: url(/assets/PlayfairDisplay-Italic-Variable-e1ac013ca14c41f528179e4b950ef998c79114de23906bb04624af6373a6faab.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tenor Sans";
  src: url(/assets/TenorSans-Regular-4dd3a80358604d6b96aee05045a56d410edd29c5a38e06c60e6382dc4ba2d7db.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url(/assets/Unbounded-ExtraBold-2fcba73b0003c458a513d3e2ac070fa576b63d39629655e780c8c599f5ebaac8.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Latin and Cyrillic subset; SIL OFL 1.1, see fonts/licenses/DelaGothicOne-OFL.txt. */
@font-face {
  font-family: "Dela Gothic One";
  src: url(/assets/DelaGothicOne-Regular-4f8622d0b94aeb81776fd1937ad443cfa8e3d53fba96cdaee534b11508a965b9.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pacifico";
  src: url(/assets/Pacifico-Regular-d2c27ad83a5c6757c648f945d01f62fb986703a73582fc7a9ccff20e73f7cfe9.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lobster";
  src: url(/assets/Lobster-Regular-26493143db1f169607f55fdb7f7538bfbce4566bb056b6507da7d2818240bdb5.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik Wet Paint";
  src: url(/assets/RubikWetPaint-Regular-1a7de11d60141a8cc6d79f5381528543b292c8a5654e644cdbfe700f6bc87f29.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Great Vibes";
  src: url(/assets/GreatVibes-Regular-92f4e24a5d75d64355e9972920bd3b9c5a0fdb148674ef44ab39cebec549dd7d.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url(/assets/Caveat-Regular-50404345f02e70f71a9c6b300847ef8ada053b7fd49aa7b9b80b26b362ed0283.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik Moonrocks";
  src: url(/assets/RubikMoonrocks-Regular-65226264b149f01b21291da43812a4000a6d58055dca83d5a46e05c270304127.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neucha";
  src: url(/assets/Neucha-Regular-cfdb489d5d9d968580283e4fb90268cf3bdbd79a1ed5e5091fa1dc8360ab0d33.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comic Relief";
  src: url(/assets/ComicRelief-Regular-52569538b814d752ac7af7af5f5577980c0747f38cd37d9567674d2eb5d1a1fa.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comic Relief";
  src: url(/assets/ComicRelief-Bold-158016fbb891c191af80b947d1445aa766f41048ebc713452eadb7a777b53047.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amatic SC";
  src: url(/assets/AmaticSC-Regular-ec1ca6244b992af563403b56f3a59decd7365b3a55a1e14cde769e2532f72695.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Amatic SC";
  src: url(/assets/AmaticSC-Bold-4313494a910f4a06d4cc93f136a3f1bd3490eb11c971850963d8883a74ec76f3.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shantell Sans";
  src: url(/assets/ShantellSans-Regular-c0d2cd417bfb778923e99f006d0f45babd9692d2238b1e2863abdec57c80288c.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fet";
  src: url(/assets/Fet-Regular-a3f11c90bff28797740cd2ba9857165620ee10c68367110fa34527a8189a5509.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Slimmary";
  src: url(/assets/Slimmary-Regular-6a97426dd20fdb324f26430f963715b67fadc5ea8051acd617077f74b1fd9a94.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vasek";
  src: url(/assets/Vasek-Italic-1d169ed4b63bd622fcc3e7655878cad93e19ccb9cd905bdbde54a73f50e3365f.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Marutya";
  src: url(/assets/Marutya-75e16d52eeaa1797f08e3d3a7d1eb949d7616cb52ab10cbbfeef27acd8013fc8.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nickainley";
  src: url(/assets/Nickainley-Regular-7eb2aaf0d774378882f3f3635fccf8cdbb2ffe7940b757be1fa0b86fe7a62647.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lepka";
  src: url(/assets/Lepka-9da560be3b51f93b3115450a43c11f77c2a3f21d1e63df622b668513245a1ce7.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Everlasting";
  src: url(/assets/Everlasting-1b60c159b2a6fd81b4d544ac798e0044b6af822bcdb294ae15f3c29f4fc786d9.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vertiger";
  src: url(/assets/Vertiger-15e43c9d8d3db35c33c9d7d08985bba27138e8aa99453eac44a6db16eb6baf97.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chicoree Em";
  src: url(/assets/Chicoree-Em-ad25acef4bdb7952c1a012e080d6c2e5a4910ac1e68cb62c444173410810346c.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Revard";
  src: url(/assets/Revard-09f865a411af1764fe180f58e8159a231e10c9845da27ba53fe220ebc3db0af0.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vetrino";
  src: url(/assets/Vetrino-0711f1896fd1c8d7f5fc875574bfe96032412289e7211df2a287b335d4a84dbe.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The file's ascent is 0: Chrome on Linux and Android drew the text a line too high
   (macOS falls back to the font's Windows metrics). Give every browser those metrics. */
@font-face {
  font-family: "Gropled";
  src: url(/assets/Gropled-244521cdf279faad5c86a1e00c3cb9690839627c60925f067bb99037bd7dc419.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 83%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Moniqa";
  src: url(/assets/Moniqa-Bold-125f3ede71fc27816dce363359aff3db5a738c7ef54c5f2a8caba2b0dee2e332.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Mak";
  src: url(/assets/MAK-71850944d2ad51b1a778ab5335881192529a2704d178824af41bd18b0cb3111c.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Misto";
  src: url(/assets/Misto-c9b36b5e834bd4a4d6730639f51547400d52eb74d9509759213f67552adc24ca.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neocyr";
  src: url(/assets/Neocyr-eb26cc97ddd16c2561298c60866f4d1579a217bc7d69fd00afdc6d18604ab2a4.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kosolapa";
  src: url(/assets/KosolapaScript-7fb0b7fc65783d700ea6036710d91aaf262e0f24bd9db3832e5066f39229be7a.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ura Bum Bum";
  src: url(/assets/UraBumBum-1f214b29acab25faa32e9a29d7d602224fedf10948b6c133449aa2fc24360a75.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Overdoze Sans";
  src: url(/assets/Overdoze-Sans-08fd7a1c742ccf6ee6567246f55ddc8815c9bd2ba97e692866a333751b42ea79.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bubblez Graffiti";
  src: url(/assets/Bubblez-Graffiti-8c51cf8a4cd7210ece24d38c1040834c25afafbfe2159e6341539881daed5079.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rosarium";
  src: url(/assets/Rosarium-600648375284b6b35faa7be15cda2845ec943d8820e23751139596e568734ee6.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulito";
  src: url(/assets/Bulito-86f301fd02194f9f78d6cb06c2f61beb3ace09bafd4e28928bcee7d791fda36b.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gunnyrew";
  src: url(/assets/Gunnyrew-d2be345da76d24ff48ac5a06264614a5b5c607018692577c23b18b7ba7df91a8.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */