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: rgb(0, 0, 0);
}
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-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::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: " •";
}
.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 {
  color: var(--color-text);
}

.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 a {
    text-decoration: underline;
    text-underline-offset: .25rem;
    text-decoration-skip-ink: none;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Tailwind Override */
.trix-editor {
    width: 100%;
    min-height: 50rem;
}

.trix-editor h1 {
    font-size: 1.25rem !important;
    line-height: 1.25rem !important;
    margin-bottom: 1rem;
    font-weight: 600;
}

.trix-editor a:not(.no-underline) {
    text-decoration: underline;
}

.trix-editor a:visited {
    color: green;
}

.trix-editor ul {
    list-style-type: disc;
    padding-left: 1rem;
}

.trix-editor ol {
    list-style-type: decimal;
    padding-left: 1rem;
}

.trix-editor pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 1.5em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto;
}

.trix-editor blockquote {
    border: 0 solid #ccc;
    border-left-width: 0px;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --neutral-50: 245 245 245;
    --neutral-100: 232 232 231;
    --neutral-200: 209 208 207;
    --neutral-300: 169 168 166;
    --neutral-400: 122 120 118;
    --neutral-500: 92 90 88;
    --neutral-600: 74 72 70;
    --neutral-700: 61 59 58;
    --neutral-800: 51 49 46;
    --neutral-900: 40 39 37;

    --app-primary-50: 250 247 246;
    --app-primary-100: 245 239 237;
    --app-primary-200: 235 223 218;
    --app-primary-300: 225 207 199;
    --app-primary-400: 210 176 162;
    --app-primary-500: 196 154 138;
    --app-primary-600: 168 125 110;
    --app-primary-700: 140 101 89;
    --app-primary-800: 116 84 74;
    --app-primary-900: 96 70 62;

    --app-secondary-50: 247 245 246;
    --app-secondary-100: 239 236 237;
    --app-secondary-200: 223 217 219;
    --app-secondary-300: 201 191 194;
    --app-secondary-400: 169 155 160;
    --app-secondary-500: 138 115 125;
    --app-secondary-600: 116 95 104;
    --app-secondary-700: 95 77 85;
    --app-secondary-800: 78 64 71;
    --app-secondary-900: 66 54 60;

    --app-accent-50: 247 247 245;
    --app-accent-100: 239 239 235;
    --app-accent-200: 223 223 215;
    --app-accent-300: 201 201 189;
    --app-accent-400: 179 179 163;
    --app-accent-500: 159 154 127;
    --app-accent-600: 133 128 102;
    --app-accent-700: 107 103 83;
    --app-accent-800: 87 84 69;
    --app-accent-900: 72 70 58;

    --warm-50: 254 252 250;
    --warm-100: 253 249 245;
    --warm-200: 251 242 233;
    --warm-300: 249 219 194;
    --warm-400: 240 201 166;
    --warm-500: 228 180 138;
    --warm-600: 201 149 106;
    --warm-700: 166 120 80;
    --warm-800: 134 97 66;
    --warm-900: 109 80 56;

    --app-danger-50: 254 242 242;
    --app-danger-100: 254 226 226;
    --app-danger-200: 254 202 202;
    --app-danger-300: 252 165 165;
    --app-danger-400: 248 113 113;
    --app-danger-500: 226 85 85;
    --app-danger-600: 209 68 68;
    --app-danger-700: 185 28 28;
    --app-danger-800: 153 27 27;
    --app-danger-900: 127 29 29;

    --success-50:  236 253 245;
    --success-100: 209 250 229;
    --success-200: 167 243 208;
    --success-300: 110 231 183;
    --success-400: 52 211 153;
    --success-500: 16 185 129;
    --success-600: 5 150 105;
    --success-700: 4 120 87;
    --success-800: 6 95 70;
    --success-900: 6 78 59;

    --font-display: 'Libre Baskerville', 'Cormorant Garamond', 'EB Garamond', ui-serif, Georgia, serif;
  }
}
@import 'actiontext.css';

/* Processing Photo styles */
@layer components {
  .processing-photo {
    @apply relative bg-neutral-100 rounded-lg overflow-hidden;
    min-height: 200px;
  }
  
  .photo-processing-indicator {
    @apply absolute inset-0 flex flex-col items-center justify-center text-neutral-600;
  }
  
  .spinner {
    @apply w-10 h-10 border-4 border-neutral-200 border-t-app-primary-500 rounded-full animate-spin;
  }
  
  .photo-metadata {
    @apply absolute bottom-0 left-0 right-0 p-2 bg-black bg-opacity-50 text-white;
  }
  
  .photo-caption {
    @apply text-sm font-medium mb-1;
  }
  
  .photo-uploader {
    @apply text-xs italic;
  }

  /* TomSelect multi-select filter — match the compact, bordered app filter inputs */
  .ts-wrapper.ts-filter-input .ts-control {
    @apply rounded-md border border-neutral-200 bg-white text-xs text-neutral-900;
    padding: 0.3rem 1.75rem 0.3rem 0.5rem;
    min-height: 2rem;
    line-height: 1rem;
  }
  .ts-wrapper.ts-filter-input .ts-control input {
    @apply text-xs text-neutral-800;
  }
  .ts-wrapper.ts-filter-input.focus .ts-control {
    @apply border-app-primary-500 ring-1 ring-app-primary-500;
  }
  .ts-wrapper.ts-filter-input .ts-control > div {
    @apply rounded bg-neutral-100 px-1.5 text-neutral-700;
  }
  .ts-dropdown.ts-filter-input {
    @apply text-xs;
  }

  /* TomSelect hides the real select and copies its classes onto the wrapper, so
     the wrapper is what draws the visible border here. Paint both it and the
     control, since which one carries the border depends on the classes passed. */
  .ts-wrapper.field-invalid,
  .ts-wrapper.field-invalid .ts-control {
    @apply border-app-danger-500;
  }
}

/* Guest Experience ("Share the Day") — bespoke blush component vocabulary.
   Raw colours are confined to these classes via --gx-* tokens so the guest
   share ERB stays free of arbitrary colour utilities. */
@layer components {
  .gx {
    /* The accent and every tint derive from --color-accent, declared here on .gx
       (not :root) so a nested .gx with its own --color-accent re-themes its subtree
       — e.g. the upload modal and the host-dashboard gallery pass a ColourPalette.
       The clay fallback matches the admin app accent for un-themed contexts. */
    --gx-accent: var(--color-accent, #c49a8a);
    --gx-on-accent: #ffffff;
    --gx-blush: var(--gx-accent);
    --gx-blush-dark: color-mix(in srgb, var(--gx-accent) 82%, #000000);
    --gx-ink: color-mix(in srgb, var(--gx-accent) 18%, #2b2622);
    --gx-ink-soft: color-mix(in srgb, var(--gx-accent) 20%, #3a342f);
    --gx-muted: color-mix(in srgb, var(--gx-accent) 35%, #6e6660);
    --gx-muted-2: color-mix(in srgb, var(--gx-accent) 32%, #8a827c);
    --gx-muted-3: color-mix(in srgb, var(--gx-accent) 30%, #a8a09a);
    --gx-note-ink: color-mix(in srgb, var(--gx-accent) 55%, #4a3b3f);
    --gx-eyebrow: color-mix(in srgb, var(--gx-accent) 72%, #6e6660);
    --gx-cream: color-mix(in srgb, var(--gx-accent) 6%, #fbfaf9);
    --gx-cream-soft: color-mix(in srgb, var(--gx-accent) 15%, #ffffff);
    --gx-cream-drop: color-mix(in srgb, var(--gx-accent) 10%, #ffffff);
    --gx-chip: color-mix(in srgb, var(--gx-accent) 18%, #ffffff);
    --gx-chip-ink: color-mix(in srgb, var(--gx-accent) 78%, #3a2e2e);
    --gx-quote: color-mix(in srgb, var(--gx-accent) 32%, #ffffff);
    --gx-wave-2: color-mix(in srgb, var(--gx-accent) 65%, #ffffff);
    --gx-wave-3: color-mix(in srgb, var(--gx-accent) 40%, #ffffff);
    --gx-border: color-mix(in srgb, var(--gx-accent) 20%, transparent);
    --gx-border-strong: color-mix(in srgb, var(--gx-accent) 42%, transparent);
    --gx-border-blush: color-mix(in srgb, var(--gx-accent) 30%, transparent);
    --gx-font-sans: 'Josefin Sans', ui-sans-serif, system-ui, sans-serif;
    --gx-font-serif: 'EB Garamond', ui-serif, Georgia, serif;
    --gx-font-script: 'Dancing Script', cursive;
    font-family: var(--gx-font-sans); color: var(--gx-ink); background: var(--gx-cream);
  }
  .gx-serif { font-family: var(--gx-font-serif); }
  .gx-script { font-family: var(--gx-font-script); color: var(--gx-blush); }
  .gx-ink { color: var(--gx-ink); }
  .gx-ink-soft { color: var(--gx-ink-soft); }
  .gx-muted { color: var(--gx-muted); }
  .gx-muted-2 { color: var(--gx-muted-2); }

  .gx-heading { font-family: var(--gx-font-serif); color: var(--gx-ink); line-height: 1.1; }

  /* Ornamental line-dot-line divider under the header */
  .gx-ornament { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; width: 150px; }
  .gx-ornament span:first-child,
  .gx-ornament span:last-child { flex: 1; height: 1px; background: color-mix(in srgb, var(--gx-accent) 30%, transparent); }
  .gx-ornament-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--gx-accent); }

  /* Underline tab bar */
  .gx-tabs { display: flex; border-bottom: 1px solid var(--gx-border); }
  .gx-tab {
    flex: 1; text-align: center; padding: 13px 4px; cursor: pointer;
    font-family: var(--gx-font-sans); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--gx-muted-3); font-weight: 400;
    border-bottom: 2px solid transparent; transition: all 200ms; background: transparent;
  }
  .gx-tab-active { color: var(--gx-ink); font-weight: 600; border-bottom-color: var(--gx-blush); }

  /* Cards */
  .gx-card {
    background: #fff; border: 1px solid var(--gx-border); border-radius: 14px;
    box-shadow: 0 8px 20px -14px rgba(80, 50, 55, 0.25);
  }
  .gx-note {
    background: var(--gx-cream-soft); border: 1px solid var(--gx-border-blush);
    border-radius: 14px;
  }

  /* Filter pills */
  .gx-pill {
    font-size: 12px; letter-spacing: 0.04em; padding: 8px 16px; border-radius: 999px;
    font-weight: 500; background: var(--gx-chip); color: var(--gx-chip-ink);
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 0;
  }
  .gx-pill-active { background: var(--gx-accent); color: var(--gx-on-accent); font-weight: 600; }

  /* Forms */
  .gx-label {
    display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gx-muted-2); font-weight: 600; margin-bottom: 6px;
  }
  .gx-eyebrow {
    font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gx-eyebrow); font-weight: 600;
  }
  .gx-input {
    width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--gx-border-strong);
    background: transparent; padding: 6px 0 8px; font-family: var(--gx-font-serif);
    font-size: 18px; color: var(--gx-ink); resize: none; line-height: 1.5;
  }
  .gx-input:focus { outline: none; border-bottom-color: var(--gx-blush); }
  .gx-input-boxed {
    border: 1px solid var(--gx-border-blush); border-radius: 10px; background: #fff;
    padding: 11px 12px; border-bottom-width: 1px; font-size: 16px;
  }

  /* Buttons */
  .gx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; border-radius: 999px; background: var(--gx-accent); color: var(--gx-on-accent);
    font-family: var(--gx-font-sans); font-weight: 600; font-size: 14px;
    letter-spacing: 0.1em; text-transform: uppercase; padding: 15px; cursor: pointer;
    transition: background 200ms;
  }
  .gx-btn:hover { background: var(--gx-blush-dark); }
  .gx-btn:focus-visible { outline: 2px solid var(--gx-accent); outline-offset: 2px; }
  .gx-btn-pill { text-transform: none; letter-spacing: 0.06em; font-size: 13px; padding: 12px 20px; }

  /* Drop zone */
  .gx-dropzone {
    border: 1.5px dashed color-mix(in srgb, var(--gx-accent) 45%, transparent); border-radius: 14px;
    background: var(--gx-cream-drop); text-align: center;
  }

  /* Recording waveform */
  .gx-wave { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 46px; }
  .gx-wave span { width: 3px; border-radius: 2px; background: var(--gx-blush); }
}
/* Text Colors */
.dynamic-primary { color: var(--color-primary); }
.dynamic-secondary { color: var(--color-secondary); }
.dynamic-tertiary { color: var(--color-tertiary); }
.dynamic-accent { color: var(--color-accent); }
.dynamic-text { color: var(--color-text); }

/* Hover Text Colors */
.hover\:text-dynamic-primary:hover { color: var(--color-primary); }
.hover\:text-dynamic-secondary:hover { color: var(--color-secondary); }
.hover\:text-dynamic-tertiary:hover { color: var(--color-tertiary); }
.hover\:text-dynamic-accent:hover { color: var(--color-accent); }

/* Focus Text Colors */
.focus\:text-dynamic-primary:focus { color: var(--color-primary); }
.focus\:text-dynamic-secondary:focus { color: var(--color-secondary); }
.focus\:text-dynamic-tertiary:focus { color: var(--color-tertiary); }
.focus\:text-dynamic-accent:focus { color: var(--color-accent); }

/* Border Colors */
.border-dynamic-primary { border-color: var(--color-primary); }
.border-dynamic-secondary { border-color: var(--color-secondary); }
.border-dynamic-tertiary { border-color: var(--color-tertiary); }
.border-dynamic-accent { border-color: var(--color-accent); }

.border-dynamic-primary-75 { border-color: color-mix(in srgb, var(--color-primary) 75%, transparent); }
.border-dynamic-secondary-75 { border-color: color-mix(in srgb, var(--color-secondary) 75%, transparent); }
.border-dynamic-tertiary-75 { border-color: color-mix(in srgb, var(--color-tertiary) 75%, transparent); }
.border-dynamic-accent-75 { border-color: color-mix(in srgb, var(--color-accent) 75%, transparent); }
.border-dynamic-text-75 { border-color: color-mix(in srgb, var(--color-text) 75%, transparent); }

.border-dynamic-primary-50 { border-color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.border-dynamic-secondary-50 { border-color: color-mix(in srgb, var(--color-secondary) 50%, transparent); }
.border-dynamic-tertiary-50 { border-color: color-mix(in srgb, var(--color-tertiary) 50%, transparent); }
.border-dynamic-accent-50 { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.border-dynamic-text-50 { border-color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* Hover Border Colors */
.hover\:border-dynamic-primary:hover { border-color: var(--color-primary); }
.hover\:border-dynamic-secondary:hover { border-color: var(--color-secondary); }
.hover\:border-dynamic-tertiary:hover { border-color: var(--color-tertiary); }
.hover\:border-dynamic-accent:hover { border-color: var(--color-accent); }

/* Text on Primary Background */
.text-dynamic-primary-text { color: var(--color-primary-text); }
.text-dynamic-primary-text-80 { color: color-mix(in srgb, var(--color-primary-text) 80%, transparent); }
.text-dynamic-primary-text-60 { color: color-mix(in srgb, var(--color-primary-text) 60%, transparent); }

/* Background Colors */
.bg-dynamic-primary { background-color: var(--color-primary); }
.bg-dynamic-secondary { background-color: var(--color-secondary); }
.bg-dynamic-tertiary { background-color: var(--color-tertiary); }
.bg-dynamic-accent { background-color: var(--color-accent); }

/* Hover Background Colors */
.hover\:bg-dynamic-primary:hover { background-color: var(--color-primary); }
.hover\:bg-dynamic-secondary:hover { background-color: var(--color-secondary); }
.hover\:bg-dynamic-tertiary:hover { background-color: var(--color-tertiary); }
.hover\:bg-dynamic-accent:hover { background-color: var(--color-accent); }
.hover\:bg-dynamic-text:hover { background-color: var(--color-text); }

/* Color with Opacity Variants */
.dynamic-primary-75 { color: color-mix(in srgb, var(--color-primary) 75%, transparent); }
.dynamic-secondary-75 { color: color-mix(in srgb, var(--color-secondary) 75%, transparent); }
.dynamic-tertiary-75 { color: color-mix(in srgb, var(--color-tertiary) 75%, transparent); }
.dynamic-accent-75 { color: color-mix(in srgb, var(--color-accent) 75%, transparent); }
.dynamic-text-75 { color: color-mix(in srgb, var(--color-text) 75%, transparent); }

.dynamic-primary-50 { color: color-mix(in srgb, var(--color-primary) 50%, transparent); }
.dynamic-secondary-50 { color: color-mix(in srgb, var(--color-secondary) 50%, transparent); }
.dynamic-tertiary-50 { color: color-mix(in srgb, var(--color-tertiary) 50%, transparent); }
.dynamic-accent-50 { color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.dynamic-text-50 { color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* Group Hover */
.group:hover .group-hover\:dynamic-primary { color: var(--color-primary); }
.group:hover .group-hover\:dynamic-secondary { color: var(--color-secondary); }
.group:hover .group-hover\:dynamic-tertiary { color: var(--color-tertiary); }
.group:hover .group-hover\:dynamic-accent { color: var(--color-accent); }
.group:hover .group-hover\:dynamic-text { color: var(--color-text); }

/* Button color utilities */
.bg-dynamic-primary-button { background-color: var(--color-primary-button); }
.text-dynamic-primary-button-text { color: var(--color-primary-button-text); }
.border-dynamic-primary-button { border-color: var(--color-primary-button); }
.hover\:bg-dynamic-primary-button-hover:hover { background-color: var(--color-primary-button-hover); }
.hover\:border-dynamic-primary-button-hover:hover { border-color: var(--color-primary-button-hover); }

.bg-dynamic-secondary-button { background-color: var(--color-secondary-button); }
.text-dynamic-secondary-button-text { color: var(--color-secondary-button-text); }
.border-dynamic-secondary-button { border-color: var(--color-secondary-button); }
.hover\:bg-dynamic-secondary-button-hover:hover { background-color: var(--color-secondary-button-hover); }
.hover\:border-dynamic-secondary-button-hover:hover { border-color: var(--color-secondary-button-hover); }

/*! Devices.css v0.2.0 | MIT License | github.com/picturepan2/devices.css */.device,.device *,.device ::after,.device ::before,.device::after,.device::before{box-sizing:border-box;display:block}.device{position:relative;transform:scale(1);z-index:1}.device .device-frame{z-index:1}.device .device-screen{background-color:#000;background-position:center center;background-size:cover;object-fit:cover;position:relative}.device-iphone-14-pro{height:868px;width:428px}.device-iphone-14-pro .device-frame{background:#010101;border:1px solid #1b1721;border-radius:68px;box-shadow:inset 0 0 4px 2px #c0b7cd,inset 0 0 0 6px #342c3f;height:868px;padding:19px;width:428px}.device-iphone-14-pro .device-screen{border-radius:49px;height:830px;width:390px}.device-iphone-14-pro .device-stripe::after,.device-iphone-14-pro .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-14-pro .device-stripe::after{top:85px}.device-iphone-14-pro .device-stripe::before{bottom:85px}.device-iphone-14-pro .device-header{background:#010101;border-radius:20px;height:35px;left:50%;margin-left:-60px;position:absolute;top:29px;width:120px}.device-iphone-14-pro .device-sensors::after,.device-iphone-14-pro .device-sensors::before{content:"";position:absolute}.device-iphone-14-pro .device-sensors::after{background:#010101;border-radius:17px;height:33px;left:50%;margin-left:-60px;top:30px;width:74px}.device-iphone-14-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:9px;left:50%;margin-left:36px;top:42px;width:9px}.device-iphone-14-pro .device-btns{background:#1b1721;border-radius:2px;height:32px;left:-2px;position:absolute;top:115px;width:3px}.device-iphone-14-pro .device-btns::after,.device-iphone-14-pro .device-btns::before{background:#1b1721;border-radius:2px;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-14-pro .device-btns::after{top:60px}.device-iphone-14-pro .device-btns::before{top:140px}.device-iphone-14-pro .device-power{background:#1b1721;border-radius:2px;height:100px;position:absolute;right:-2px;top:200px;width:3px}.device-iphone-14-pro .device-home::after,.device-iphone-14-pro .device-home::before{border:solid rgba(1,1,1,.25);border-width:6px 0;content:"";height:6px;position:absolute;width:6px;z-index:9}.device-iphone-14-pro .device-home::after{right:86px;top:0}.device-iphone-14-pro .device-home::before{bottom:0;left:86px}.device-iphone-14-pro.device-silver .device-frame{border-color:#c8cacb;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #e2e3e4}.device-iphone-14-pro.device-silver .device-btns{background:#c8cacb}.device-iphone-14-pro.device-silver .device-btns::after,.device-iphone-14-pro.device-silver .device-btns::before{background:#c8cacb}.device-iphone-14-pro.device-silver .device-power{background:#c8cacb}.device-iphone-14-pro.device-black .device-frame{border-color:#5c5956;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #76726f}.device-iphone-14-pro.device-black .device-btns{background:#5c5956}.device-iphone-14-pro.device-black .device-btns::after,.device-iphone-14-pro.device-black .device-btns::before{background:#5c5956}.device-iphone-14-pro.device-black .device-power{background:#5c5956}.device-iphone-14-pro.device-gold .device-frame{border-color:#e7d19e;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #d2ab4c}.device-iphone-14-pro.device-gold .device-btns{background:#e7d19e}.device-iphone-14-pro.device-gold .device-btns::after,.device-iphone-14-pro.device-gold .device-btns::before{background:#e7d19e}.device-iphone-14-pro.device-gold .device-power{background:#e7d19e}.device-iphone-14{height:868px;width:428px}.device-iphone-14 .device-frame{background:#010101;border:1px solid #101315;border-radius:68px;box-shadow:inset 0 0 4px 2px #b0b8c0,inset 0 0 0 6px #272c31;height:868px;padding:19px;width:428px}.device-iphone-14 .device-screen{border-radius:49px;height:830px;width:390px}.device-iphone-14 .device-stripe::after,.device-iphone-14 .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-14 .device-stripe::after{top:85px}.device-iphone-14 .device-stripe::before{bottom:85px}.device-iphone-14 .device-header{background:#010101;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:30px;left:50%;margin-left:-80px;position:absolute;top:20px;width:160px}.device-iphone-14 .device-header::after,.device-iphone-14 .device-header::before{content:"";height:10px;position:absolute;top:0;width:10px}.device-iphone-14 .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#010101 75%,#010101 100%);left:-10px}.device-iphone-14 .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#010101 75%,#010101 100%);right:-10px}.device-iphone-14 .device-sensors::after,.device-iphone-14 .device-sensors::before{content:"";position:absolute}.device-iphone-14 .device-sensors::after{background:#151515;border:1px solid #010101;border-radius:4px;box-shadow:0 0 4px #151515;height:7px;left:50%;margin-left:-35px;top:8px;width:70px}.device-iphone-14 .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:9px;left:50%;margin-left:-60px;top:26px;width:9px}.device-iphone-14 .device-btns{background:#101315;border-radius:2px;height:32px;left:-2px;position:absolute;top:115px;width:3px}.device-iphone-14 .device-btns::after,.device-iphone-14 .device-btns::before{background:#101315;border-radius:2px;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-14 .device-btns::after{top:60px}.device-iphone-14 .device-btns::before{top:140px}.device-iphone-14 .device-power{background:#101315;border-radius:2px;height:100px;position:absolute;right:-2px;top:200px;width:3px}.device-iphone-14 .device-home::after,.device-iphone-14 .device-home::before{border:solid rgba(1,1,1,.25);border-width:6px 0;content:"";height:6px;position:absolute;width:6px;z-index:9}.device-iphone-14 .device-home::after{right:86px;top:0}.device-iphone-14 .device-home::before{bottom:0;left:86px}.device-iphone-14.device-purple .device-frame{border-color:#af9bbf;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #c8bad3}.device-iphone-14.device-purple .device-btns{background:#af9bbf}.device-iphone-14.device-purple .device-btns::after,.device-iphone-14.device-purple .device-btns::before{background:#af9bbf}.device-iphone-14.device-purple .device-power{background:#af9bbf}.device-iphone-14.device-starlight .device-frame{border-color:#bdb4aa;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #d3cdc7}.device-iphone-14.device-starlight .device-btns{background:#bdb4aa}.device-iphone-14.device-starlight .device-btns::after,.device-iphone-14.device-starlight .device-btns::before{background:#bdb4aa}.device-iphone-14.device-starlight .device-power{background:#bdb4aa}.device-iphone-14.device-red .device-frame{border-color:#d11813;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #ec302b}.device-iphone-14.device-red .device-btns{background:#d11813}.device-iphone-14.device-red .device-btns::after,.device-iphone-14.device-red .device-btns::before{background:#d11813}.device-iphone-14.device-red .device-power{background:#d11813}.device-iphone-14.device-blue .device-frame{border-color:#7992aa;box-shadow:inset 0 0 4px 2px #fff,inset 0 0 0 6px #98abbe}.device-iphone-14.device-blue .device-btns{background:#7992aa}.device-iphone-14.device-blue .device-btns::after,.device-iphone-14.device-blue .device-btns::before{background:#7992aa}.device-iphone-14.device-blue .device-power{background:#7992aa}.device-iphone-x{height:868px;width:428px}.device-iphone-x .device-frame{background:#222;border-radius:68px;box-shadow:inset 0 0 2px 2px #c8cacb,inset 0 0 0 7px #e2e3e4;height:868px;padding:28px;width:428px}.device-iphone-x .device-screen{border-radius:40px;height:812px;width:375px}.device-iphone-x .device-stripe::after,.device-iphone-x .device-stripe::before{border:solid rgba(1,1,1,.25);border-width:0 7px;content:"";height:7px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-x .device-stripe::after{top:85px}.device-iphone-x .device-stripe::before{bottom:85px}.device-iphone-x .device-header{background:#222;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:30px;left:50%;margin-left:-102px;position:absolute;top:28px;width:204px}.device-iphone-x .device-header::after,.device-iphone-x .device-header::before{content:"";height:10px;position:absolute;top:0;width:10px}.device-iphone-x .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#222 75%,#222 100%);left:-10px}.device-iphone-x .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#222 75%,#222 100%);right:-10px}.device-iphone-x .device-sensors::after,.device-iphone-x .device-sensors::before{content:"";position:absolute}.device-iphone-x .device-sensors::after{background:#333;border-radius:3px;height:6px;left:50%;margin-left:-25px;top:32px;width:50px}.device-iphone-x .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:10px;left:50%;margin-left:42px;top:30px;width:10px}.device-iphone-x .device-btns{background:#c8cacb;height:32px;left:-3px;position:absolute;top:115px;width:3px}.device-iphone-x .device-btns::after,.device-iphone-x .device-btns::before{background:#c8cacb;content:"";height:62px;left:0;position:absolute;width:3px}.device-iphone-x .device-btns::after{top:60px}.device-iphone-x .device-btns::before{top:140px}.device-iphone-x .device-power{background:#c8cacb;height:100px;position:absolute;right:-3px;top:200px;width:3px}.device-iphone-8{height:871px;width:419px}.device-iphone-8 .device-frame{background:#fff;border-radius:68px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 7px #e2e3e4;height:871px;padding:102px 22px;width:419px}.device-iphone-8 .device-screen{border:2px solid #222;border-radius:4px;height:667px;width:375px}.device-iphone-8 .device-stripe::after,.device-iphone-8 .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:0 7px;content:"";height:6px;left:0;position:absolute;width:100%;z-index:9}.device-iphone-8 .device-stripe::after{top:68px}.device-iphone-8 .device-stripe::before{bottom:68px}.device-iphone-8 .device-home{border:2px solid #c8cacb;border-radius:50%;bottom:25px;height:58px;left:50%;margin-left:-29px;position:absolute;width:58px}.device-iphone-8 .device-sensors{background:#666;border-radius:3px;height:6px;left:50%;margin-left:-38px;position:absolute;top:52px;width:76px}.device-iphone-8 .device-sensors::after,.device-iphone-8 .device-sensors::before{background:#666;border-radius:50%;content:"";position:absolute}.device-iphone-8 .device-sensors::after{height:10px;left:50%;margin-left:-5px;top:-25px;width:10px}.device-iphone-8 .device-sensors::before{height:12px;left:-42px;margin-top:-6px;top:50%;width:12px}.device-iphone-8 .device-btns{background:#c8cacb;height:30px;left:-3px;position:absolute;top:102px;width:3px}.device-iphone-8 .device-btns::after,.device-iphone-8 .device-btns::before{background:#c8cacb;content:"";height:56px;left:0;position:absolute;width:3px}.device-iphone-8 .device-btns::after{top:62px}.device-iphone-8 .device-btns::before{top:132px}.device-iphone-8 .device-power{background:#c8cacb;height:80px;position:absolute;right:-2px;top:160px;width:3px}.device-iphone-8.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 7px #f7e8dd}.device-iphone-8.device-gold .device-home{border-color:#e4b08a}.device-iphone-8.device-gold .device-btns,.device-iphone-8.device-gold .device-btns::after,.device-iphone-8.device-gold .device-btns::before{background:#e4b08a}.device-iphone-8.device-gold .device-power{background:#e4b08a}.device-iphone-8.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #74747a,inset 0 0 0 7px #9b9ba0}.device-iphone-8.device-spacegray .device-stripe::after,.device-iphone-8.device-spacegray .device-stripe::before{border-color:rgba(204,204,204,.35)}.device-iphone-8.device-spacegray .device-btns,.device-iphone-8.device-spacegray .device-btns::after,.device-iphone-8.device-spacegray .device-btns::before{background:#74747a}.device-the-iphone{height:610px;width:320px}.device-the-iphone .device-frame{background:#010101;border:1px solid #a9a9a9;border-radius:56px;box-shadow:inset 0 0 4px 3px #010101,inset 0 0 2px 13px #f5f5f5;height:610px;padding:100px 22px;width:320px}.device-the-iphone .device-frame::before{border:8px solid #010101;border-left-width:2px;border-radius:48px;border-right-width:2px;box-shadow:inset 0 0 8px 2px #010101;content:"";height:594px;left:2px;position:absolute;top:9px;width:316px}.device-the-iphone .device-frame::after{border:4px solid #dcdcdc;border-radius:38px;content:"";height:590px;left:13px;position:absolute;top:11px;width:294px}.device-the-iphone .device-screen{border:2px solid #272727;border-radius:4px;height:410px;width:276px}.device-the-iphone .device-sensors::before{background:linear-gradient(to bottom,#272727 50%,rgba(220,220,220,.25) 50%,#a9a9a9);border-radius:5px;content:"";height:10px;left:50%;margin-left:-28px;position:absolute;top:52px;width:56px}.device-the-iphone .device-sensors::after{background:#272727;border:1px solid #010101;border-radius:3px;content:"";height:6px;left:50%;margin-left:-26px;position:absolute;top:54px;width:52px}.device-the-iphone .device-btns{background:#696969;border-radius:2px 0 0 2px;height:30px;left:-2px;position:absolute;top:60px;width:2px}.device-the-iphone .device-btns::after,.device-the-iphone .device-btns::before{background:#696969;content:"";height:56px;left:0;position:absolute;width:2px}.device-the-iphone .device-btns::after{border-radius:2px 0 0 50%;top:50px}.device-the-iphone .device-btns::before{border-radius:50% 0 0 2px;top:131px}.device-the-iphone .device-home{background:radial-gradient(circle at top center,#010101 70%,rgba(220,220,220,.25) 70%,#a9a9a9);border:1px solid #292929;border-radius:50%;bottom:28px;height:56px;left:50%;margin-left:-28px;position:absolute;width:56px}.device-the-iphone .device-home::before{border:1px solid #dcdcdc;border-radius:4px;content:"";height:20px;left:17px;position:absolute;top:17px;width:20px}.device-the-iphone .device-power{background:#696969;border-radius:2px 2px 0 0;height:2px;position:absolute;right:52px;top:-2px;width:52px}.device-google-pixel-6-pro{height:862px;width:404px}.device-google-pixel-6-pro .device-frame{background:#121212;border-radius:28px;box-shadow:inset 0 0 12px #8d8d86,inset 0 7px 0 3px #fdfdfc,inset 0 -6px 0 3px #fdfdfc;height:862px;margin:0 2px;padding:20px 12px 26px 12px;width:400px}.device-google-pixel-6-pro .device-screen{border-radius:27px;height:816px;width:376px}.device-google-pixel-6-pro .device-header{background:linear-gradient(to bottom,#8d8d86 0,#cbcbc8 30%,#cbcbc8 100%);height:10px;left:50%;margin-left:-147px;position:absolute;top:0;width:294px}.device-google-pixel-6-pro .device-stripe::after{background:linear-gradient(to top,#121212,#666661);border-radius:50px 50px 0 0;bottom:0;content:"";height:2px;left:50%;margin-left:-22px;position:absolute;width:44px}.device-google-pixel-6-pro .device-stripe::before{background:#cbcbc8;bottom:0;content:"";height:9px;left:50%;margin-left:40px;position:absolute;width:11px}.device-google-pixel-6-pro .device-sensors{background:#121212;border-radius:50%;height:22px;left:50%;margin-left:-11px;margin-top:-11px;position:absolute;top:39px;width:22px}.device-google-pixel-6-pro .device-sensors::after,.device-google-pixel-6-pro .device-sensors::before{content:"";position:absolute}.device-google-pixel-6-pro .device-sensors::after{background:linear-gradient(to bottom,#121212,#666661);border-radius:0 0 50px 50px;height:4px;left:50%;margin-left:-103px;top:-18px;width:206px}.device-google-pixel-6-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:8px;left:7px;top:7px;width:8px}.device-google-pixel-6-pro .device-btns{background:#b2b2ae;height:102px;position:absolute;right:0;top:306px;width:3px}.device-google-pixel-6-pro .device-power{background:#b2b2ae;height:58px;position:absolute;right:0;top:194px;width:3px}.device-google-pixel-6-pro.device-gold .device-frame{box-shadow:inset 0 0 12px #ff962e,inset 0 7px 0 3px #fff,inset 0 -6px 0 3px #fff}.device-google-pixel-6-pro.device-gold .device-header{background:linear-gradient(to bottom,#ff962e 0,#ffd6ad 30%,#ffd6ad 100%)}.device-google-pixel-6-pro.device-gold .device-stripe::after{background:linear-gradient(to top,#121212,#e07000)}.device-google-pixel-6-pro.device-gold .device-stripe::before{background:#ffd6ad}.device-google-pixel-6-pro.device-gold .device-btns{background:#ffbd7a}.device-google-pixel-6-pro.device-gold .device-power{background:#ffbd7a}.device-google-pixel-6-pro.device-black .device-frame{box-shadow:inset 0 0 12px #000,inset 0 7px 0 3px #646668,inset 0 -6px 0 3px #646668}.device-google-pixel-6-pro.device-black .device-header{background:linear-gradient(to bottom,#000 0,#323334 30%,#323334 100%)}.device-google-pixel-6-pro.device-black .device-stripe::after{background:linear-gradient(to top,#121212,#000)}.device-google-pixel-6-pro.device-black .device-stripe::before{background:#323334}.device-google-pixel-6-pro.device-black .device-btns{background:#191a1a}.device-google-pixel-6-pro.device-black .device-power{background:#191a1a}.device-google-pixel-2-xl{height:832px;width:404px}.device-google-pixel-2-xl .device-frame{background:#121212;border-radius:36px;box-shadow:inset 0 0 0 2px #cfcfcf,inset 0 0 0 7px #9c9c9c;height:832px;padding:56px 22px;width:404px}.device-google-pixel-2-xl .device-screen{border-radius:27px;height:720px;width:360px}.device-google-pixel-2-xl .device-header{height:832px;left:50%;margin-left:-150px;position:absolute;top:0;width:300px}.device-google-pixel-2-xl .device-header::after,.device-google-pixel-2-xl .device-header::before{background:#333;border-radius:3px;content:"";height:6px;left:50%;margin-left:-73px;margin-top:-3px;position:absolute;width:146px}.device-google-pixel-2-xl .device-header::after{top:24px}.device-google-pixel-2-xl .device-header::before{bottom:28px}.device-google-pixel-2-xl .device-sensors{background:#333;border-radius:7px;height:14px;left:54px;margin-top:-7px;position:absolute;top:36px;width:14px}.device-google-pixel-2-xl .device-btns{background:#cfcfcf;height:102px;position:absolute;right:-3px;top:306px;width:3px}.device-google-pixel-2-xl .device-power{background:#cfcfcf;height:58px;position:absolute;right:-3px;top:194px;width:3px}.device-google-pixel{height:744px;width:360px}.device-google-pixel .device-frame{background:#f7f7f8;border-radius:54px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4,inset 0 0 0 10px #fff;height:744px;padding:82px 18px 86px 18px;width:360px}.device-google-pixel .device-screen{border:2px solid #222;border-radius:2px;height:576px;width:324px}.device-google-pixel .device-stripe{border-top:6px solid rgba(51,51,51,.15);bottom:0;left:254px;position:absolute;top:0;width:8px}.device-google-pixel .device-stripe::after,.device-google-pixel .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:0 6px;content:"";height:10px;left:-254px;position:absolute;width:360px;z-index:9}.device-google-pixel .device-stripe::after{top:60px}.device-google-pixel .device-stripe::before{bottom:46px}.device-google-pixel .device-sensors{background:#ddd;border-radius:2.5px;height:5px;left:50%;margin-left:-39px;margin-top:-2.5px;position:absolute;top:41px;width:78px}.device-google-pixel .device-sensors::after,.device-google-pixel .device-sensors::before{background:#333;border-radius:6px;content:"";position:absolute}.device-google-pixel .device-sensors::after{height:12px;left:50%;margin-left:-14px;top:21.5px;width:28px}.device-google-pixel .device-sensors::before{height:10px;left:-81px;margin-top:-5px;top:50%;width:10px}.device-google-pixel .device-btns{background:#c8cacb;height:102px;position:absolute;right:-2px;top:298px;width:3px}.device-google-pixel .device-power{background:#c8cacb;height:50px;position:absolute;right:-2px;top:184px;width:3px}.device-google-pixel.device-black .device-frame{background:#211d1c;box-shadow:inset 0 0 0 2px #363635,inset 0 0 0 6px #6a6967,inset 0 0 0 10px #3d3533}.device-google-pixel.device-black .device-stripe,.device-google-pixel.device-black .device-stripe::after,.device-google-pixel.device-black .device-stripe::before{border-color:rgba(13,13,13,.35)}.device-google-pixel.device-black .device-sensors{background:#444}.device-google-pixel.device-black .device-sensors::after{background:#0d0d0d}.device-google-pixel.device-black .device-btns,.device-google-pixel.device-black .device-btns::after,.device-google-pixel.device-black .device-btns::before{background:#363635}.device-google-pixel.device-black .device-power{background:#363635}.device-google-pixel.device-blue .device-frame{box-shadow:inset 0 0 0 2px #2a5aff,inset 0 0 0 6px #7695ff,inset 0 0 0 10px #fff}.device-google-pixel.device-blue .device-btns,.device-google-pixel.device-blue .device-btns::after,.device-google-pixel.device-blue .device-btns::before{background:#2a5aff}.device-google-pixel.device-blue .device-power{background:#2a5aff}.device-galaxy-s8{height:828px;width:380px}.device-galaxy-s8 .device-frame{background:#222;border:solid #cfcfcf;border-radius:55px;border-width:5px 0;box-shadow:inset 0 0 0 2px #9c9c9c;height:828px;padding:48px 10px 40px 10px;width:380px}.device-galaxy-s8 .device-screen{border:2px solid #222;border-radius:34px;height:740px;width:360px}.device-galaxy-s8 .device-stripe::after,.device-galaxy-s8 .device-stripe::before{border:solid rgba(51,51,51,.15);border-width:5px 0;content:"";height:828px;position:absolute;top:0;width:6px;z-index:9}.device-galaxy-s8 .device-stripe::after{left:48px}.device-galaxy-s8 .device-stripe::before{right:48px}.device-galaxy-s8 .device-sensors{background:#666;border-radius:3px;height:6px;left:50%;margin-left:-24px;margin-top:-3px;position:absolute;top:32px;width:48px}.device-galaxy-s8 .device-sensors::after,.device-galaxy-s8 .device-sensors::before{background:#666;border-radius:50%;content:"";position:absolute;top:50%}.device-galaxy-s8 .device-sensors::after{box-shadow:-192px 0 #333,-174px 0 #333,-240px 0 #333;height:8px;margin-top:-4px;right:-90px;width:8px}.device-galaxy-s8 .device-sensors::before{box-shadow:186px 0 #666;height:12px;left:-90px;margin-top:-6px;width:12px}.device-galaxy-s8 .device-btns{background:#9c9c9c;border-radius:3px 0 0 3px;height:116px;left:-3px;position:absolute;top:144px;width:3px}.device-galaxy-s8 .device-btns::after{background:#9c9c9c;border-radius:3px 0 0 3px;content:"";height:54px;left:0;position:absolute;top:164px;width:3px}.device-galaxy-s8 .device-power{background:#9c9c9c;border-radius:0 3px 3px 0;height:54px;position:absolute;right:-3px;top:260px;width:3px}.device-galaxy-s8.device-blue .device-frame{border-color:#a3c5e8;box-shadow:inset 0 0 0 2px #5192d4}.device-galaxy-s8.device-blue .device-stripe::after,.device-galaxy-s8.device-blue .device-stripe::before{border-color:rgba(255,255,255,.35)}.device-galaxy-s8.device-blue .device-btns,.device-galaxy-s8.device-blue .device-btns::after{background:#5192d4}.device-galaxy-s8.device-blue .device-power{background:#5192d4}.device-macbook-pro{height:434px;width:740px}.device-macbook-pro .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:418px;margin:0 auto;padding:9px 9px 23px 9px;position:relative;width:618px}.device-macbook-pro .device-frame::after{background:linear-gradient(to bottom,#272727,#0d0d0d);border-radius:0 0 20px 20px;bottom:2px;content:"";height:24px;left:2px;position:absolute;width:614px}.device-macbook-pro .device-header{background:#0d0d0d;border-bottom-left-radius:4px;border-bottom-right-radius:4px;height:12px;left:50%;margin-left:-32px;position:absolute;top:11px;width:64px;z-index:2}.device-macbook-pro .device-header::after,.device-macbook-pro .device-header::before{content:"";height:4px;position:absolute;top:0;width:4px}.device-macbook-pro .device-header::after{background:radial-gradient(circle at bottom left,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%);left:-4px}.device-macbook-pro .device-header::before{background:radial-gradient(circle at bottom right,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%);right:-4px}.device-macbook-pro .device-screen{border:2px solid #121212;border-radius:10px 10px 0 0;height:375px;width:600px}.device-macbook-pro .device-power{background:radial-gradient(circle at center,#e2e3e4 85%,#c8cacb 100%);border:solid #a0a3a7;border-radius:2px 2px 12px 12px;border-width:1px 2px 0 2px;box-shadow:inset 0 -2px 8px 0 #6c7074;height:24px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro .device-power::after{background:#e2e3e4;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;content:"";height:10px;left:50%;margin-left:-60px;position:absolute;top:0;width:120px}.device-macbook-pro .device-power::before{background:0 0;border-radius:0 0 3px 3px;bottom:-2px;box-shadow:-300px 0 #272727,300px 0 #272727;content:"";height:2px;left:50%;margin-left:-20px;position:absolute;width:40px}.device-macbook-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro.device-spacegray .device-power{background:radial-gradient(circle at center,#83878a 85%,#767a7d 100%);border-color:#454749;box-shadow:inset 0 -2px 8px 0 #202121}.device-macbook-pro.device-spacegray .device-power::after{background:#b7babc;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro-2018{height:444px;width:740px}.device-macbook-pro-2018 .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px 19px;position:relative;width:614px}.device-macbook-pro-2018 .device-frame::after{background:#272727;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook-pro-2018 .device-frame::before{bottom:10px;color:#c8cacb;content:"MacBook Pro";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook-pro-2018 .device-screen{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook-pro-2018 .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:2px 4px 0 4px;height:14px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook-pro-2018 .device-power::after,.device-macbook-pro-2018 .device-power::before{content:"";position:absolute}.device-macbook-pro-2018 .device-power::after{background:#d5d6d8;border-radius:0 0 10px 10px;box-shadow:inset 0 0 4px 2px #babdbf;height:10px;left:50%;margin-left:-60px;top:-2px;width:120px}.device-macbook-pro-2018 .device-power::before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 12px 12px;box-shadow:inset 0 -2px 6px 0 #474a4d;height:12px;left:-4px;margin:0 auto;top:10px;width:740px}.device-macbook-pro-2018.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook-pro-2018.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook-pro-2018.device-spacegray .device-power::after{background:#83878a;box-shadow:inset 0 0 4px 2px #6a6d70}.device-macbook-pro-2018.device-spacegray .device-power::before{background:#515456;box-shadow:inset 0 -2px 6px 0 #000}.device-macbook{height:432px;width:740px}.device-macbook .device-frame{background:#0d0d0d;border-radius:20px;box-shadow:inset 0 0 0 2px #c8cacb;height:428px;margin:0 auto;padding:29px 19px 39px 19px;position:relative;width:614px}.device-macbook .device-frame::after{background:#272727;border-radius:0 0 20px 20px;bottom:2px;content:"";height:26px;left:2px;position:absolute;width:610px}.device-macbook .device-frame::before{bottom:10px;color:#c8cacb;content:"MacBook";font-size:12px;height:16px;left:50%;line-height:16px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:1}.device-macbook .device-screen{border:2px solid #121212;border-radius:2px;height:360px;width:576px}.device-macbook .device-power{background:#e2e3e4;border:solid #d5d6d8;border-radius:2px 2px 0 0;border-width:0 4px;height:4px;margin-top:-10px;position:relative;width:740px;z-index:9}.device-macbook .device-power::after,.device-macbook .device-power::before{content:"";position:absolute}.device-macbook .device-power::after{background:radial-gradient(circle at center,#e2e3e4 0,#e2e3e4 85%,#a0a3a7 100%);border:solid #adb0b3;border-width:0 2px;height:4px;left:50%;margin-left:-60px;width:120px}.device-macbook .device-power::before{background:#a0a3a7;border-radius:0 0 180px 180px/0 0 10px 10px;box-shadow:inset 0 -2px 6px 0 #474a4d;height:10px;left:-4px;margin:0 auto;top:4px;width:740px}.device-macbook.device-gold .device-frame{box-shadow:inset 0 0 0 2px #edccb4}.device-macbook.device-gold .device-power{background:#f7e8dd;border-color:#edccb4}.device-macbook.device-gold .device-power::after{background:radial-gradient(circle at center,#f7e8dd 0,#f7e8dd 85%,#dfa276 100%);border-color:#e4b08a}.device-macbook.device-gold .device-power::before{background:#edccb4;box-shadow:inset 0 -2px 6px 0 #83491f}.device-macbook.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a}.device-macbook.device-rosegold .device-power{background:#facfc9;border-color:#f6a69a}.device-macbook.device-rosegold .device-power::after{background:radial-gradient(circle at center,#facfc9 0,#facfc9 85%,#ef6754 100%);border-color:#f6a69a}.device-macbook.device-rosegold .device-power::before{background:#f6a69a;box-shadow:inset 0 -2px 6px 0 #851b0c}.device-macbook.device-spacegray .device-frame{box-shadow:inset 0 0 0 2px #767a7d}.device-macbook.device-spacegray .device-power{background:#909496;border-color:#767a7d}.device-macbook.device-spacegray .device-power::after{background:radial-gradient(circle at center,#909496 0,#909496 85%,#515456 100%);border-color:#5d6163}.device-macbook.device-spacegray .device-power::before{background:#515456;box-shadow:inset 0 -2px 6px 0 #000}.device-imac{height:540px;width:640px}.device-imac .device-frame{background:#edeef0;border-radius:18px;box-shadow:inset 0 0 0 1px #d4d5d7;height:440px;padding:16px 16px 80px 16px;position:relative;width:640px}.device-imac .device-frame::after{background:#d4d5d7;border-radius:0 0 18px 18px;bottom:1px;box-shadow:inset 0 0 18px 0 #c7c8cb;content:"";height:63px;left:1px;position:absolute;width:638px}.device-imac .device-frame::before{background:#050505;border-radius:50%;content:"";height:6px;left:50%;margin-left:-3px;position:absolute;text-align:center;top:6px;width:6px;z-index:9}.device-imac .device-screen{border:2px solid #121212;border-radius:2px;height:342px;width:608px}.device-imac .device-power::after{background:radial-gradient(circle at center,#d4d5d7 85%,#9fa1a6 100%);border-top:1px solid #d4d5d7;content:"";height:6px;margin:0 auto;position:relative;width:152px}.device-imac .device-power::before{background:linear-gradient(to bottom,#9fa1a6 0,#c7c8cb 40%,#c7c8cb 85%,#fff 90%,#6b6e74 100%);content:"";height:92px;margin:0 auto;position:relative;width:152px}.device-imac .device-home{background:0 0;border-radius:0 0 3px 3px;bottom:0;box-shadow:-61px 0 #d4d5d7,61px 0 #d4d5d7;height:2px;left:50%;margin-left:-15px;position:absolute;width:30px}.device-imac.device-blue .device-frame{box-shadow:inset 0 0 0 2px #b4c7da}.device-imac.device-blue .device-frame::after{background:#b4c7da;box-shadow:inset 0 0 18px 0 #a3bad2}.device-imac.device-blue .device-power::after{background:radial-gradient(circle at center,#b4c7da 85%,#7094b8 100%);border-top-color:#b4c7da}.device-imac.device-blue .device-power::before{background:linear-gradient(to bottom,#7094b8 0,#a3bad2 40%,#a3bad2 85%,#fff 90%,#406182 100%)}.device-imac.device-blue .device-home{box-shadow:-61px 0 #b4c7da,61px 0 #b4c7da}.device-imac.device-green .device-frame{box-shadow:inset 0 0 0 2px #bbd0c8}.device-imac.device-green .device-frame::after{background:#bbd0c8;box-shadow:inset 0 0 18px 0 #acc6bc}.device-imac.device-green .device-power::after{background:radial-gradient(circle at center,#bbd0c8 85%,#7fa697 100%);border-top-color:#bbd0c8}.device-imac.device-green .device-power::before{background:linear-gradient(to bottom,#7fa697 0,#acc6bc 40%,#acc6bc 85%,#fff 90%,#4e7164 100%)}.device-imac.device-green .device-home{box-shadow:-61px 0 #bbd0c8,61px 0 #bbd0c8}.device-imac.device-pink .device-frame{box-shadow:inset 0 0 0 2px #edccc6}.device-imac.device-pink .device-frame::after{background:#edccc6;box-shadow:inset 0 0 18px 0 #e7bbb3}.device-imac.device-pink .device-power::after{background:radial-gradient(circle at center,#edccc6 85%,#d58778 100%);border-top-color:#edccc6}.device-imac.device-pink .device-power::before{background:linear-gradient(to bottom,#d58778 0,#e7bbb3 40%,#e7bbb3 85%,#fff 90%,#b04a37 100%)}.device-imac.device-pink .device-home{box-shadow:-61px 0 #edccc6,61px 0 #edccc6}.device-imac.device-yellow .device-frame{box-shadow:inset 0 0 0 2px #f4d595}.device-imac.device-yellow .device-frame::after{background:#f4d595;box-shadow:inset 0 0 18px 0 #f2cc7e}.device-imac.device-yellow .device-power::after{background:radial-gradient(circle at center,#f4d595 85%,#eab039 100%);border-top-color:#f4d595}.device-imac.device-yellow .device-power::before{background:linear-gradient(to bottom,#eab039 0,#f2cc7e 40%,#f2cc7e 85%,#fff 90%,#ab7912 100%)}.device-imac.device-yellow .device-home{box-shadow:-61px 0 #f4d595,61px 0 #f4d595}.device-imac.device-orange .device-frame{box-shadow:inset 0 0 0 2px #e9b5a0}.device-imac.device-orange .device-frame::after{background:#e9b5a0;box-shadow:inset 0 0 18px 0 #e4a58b}.device-imac.device-orange .device-power::after{background:radial-gradient(circle at center,#e9b5a0 85%,#d6744d 100%);border-top-color:#e9b5a0}.device-imac.device-orange .device-power::before{background:linear-gradient(to bottom,#d6744d 0,#e4a58b 40%,#e4a58b 85%,#fff 90%,#994524 100%)}.device-imac.device-orange .device-home{box-shadow:-61px 0 #e9b5a0,61px 0 #e9b5a0}.device-imac.device-purple .device-frame{box-shadow:inset 0 0 0 2px #c4c4e5}.device-imac.device-purple .device-frame::after{background:#c4c4e5;box-shadow:inset 0 0 18px 0 #b2b2dd}.device-imac.device-purple .device-power::after{background:radial-gradient(circle at center,#c4c4e5 85%,#7d7dc6 100%);border-top-color:#c4c4e5}.device-imac.device-purple .device-power::before{background:linear-gradient(to bottom,#7d7dc6 0,#b2b2dd 40%,#b2b2dd 85%,#fff 90%,#449 100%)}.device-imac.device-purple .device-home{box-shadow:-61px 0 #c4c4e5,61px 0 #c4c4e5}.device-imac-pro{height:484px;width:624px}.device-imac-pro .device-frame{background:#0d0d0d;border-radius:18px;box-shadow:inset 0 0 0 2px #080808;height:428px;padding:24px 24px 80px 24px;position:relative;width:624px}.device-imac-pro .device-frame::after{background:#2f2e33;border-radius:0 0 18px 18px;bottom:2px;content:"";height:54px;left:2px;position:absolute;width:620px}.device-imac-pro .device-frame::before{bottom:15px;color:#0d0d0d;content:"";font-size:24px;height:24px;left:50%;line-height:24px;margin-left:-100px;position:absolute;text-align:center;width:200px;z-index:9}.device-imac-pro .device-screen{border:2px solid #121212;border-radius:2px;height:324px;width:576px}.device-imac-pro .device-power::after,.device-imac-pro .device-power::before{content:""}.device-imac-pro .device-power::after{background:#222225;border-radius:2px;height:6px;margin:0 auto;position:relative;width:180px}.device-imac-pro .device-power::before{border:solid transparent;border-bottom-color:#333;border-width:0 8px 50px 8px;height:50px;margin:0 auto;position:relative;width:130px}.device-surface-book{height:424px;width:728px}.device-surface-book .device-frame{background:#0d0d0d;border-radius:12px;box-shadow:inset 0 0 0 2px #c8c8c8;height:408px;margin:0 auto;padding:24px 22px;position:relative;width:584px}.device-surface-book .device-screen{border:2px solid #121212;border-radius:2px;height:360px;width:540px}.device-surface-book .device-btns::after,.device-surface-book .device-btns::before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-book .device-btns::after{left:122px;width:20px}.device-surface-book .device-btns::before{left:168px;width:44px}.device-surface-book .device-power{background:linear-gradient(to bottom,#eee,#c8c8c8);border:solid #c8c8c8;border-radius:2px;border-width:0 2px;height:16px;margin-top:4px;position:relative;width:728px}.device-surface-book .device-power::after,.device-surface-book .device-power::before{content:"";position:absolute}.device-surface-book .device-power::after{background:radial-gradient(circle at center,#eee 0,#eee 95%,#a2a2a2 100%);border-radius:0 0 6px 6px;height:8px;left:50%;margin-left:-125px;top:0;width:250px;z-index:1}.device-surface-book .device-power::before{background:linear-gradient(to bottom,#eee,#c8c8c8);border-radius:2px 2px 0 0;bottom:16px;height:8px;left:50%;margin-left:-292px;width:584px}.device-surface-studio{height:506px;width:640px}.device-surface-studio .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #000;height:440px;padding:20px;width:640px}.device-surface-studio .device-screen{border:2px solid #121212;border-radius:2px;height:400px;width:600px}.device-surface-studio .device-stripe{background:#444;border-radius:0 0 2px 2px;bottom:0;height:4px;left:50%;margin-left:-117px;position:absolute;width:234px}.device-surface-studio .device-stripe::after,.device-surface-studio .device-stripe::before{content:"";left:50%;position:absolute;top:-75px}.device-surface-studio .device-stripe::after{border:1px solid #e2e3e4;border-radius:0 0 18px 18px;border-top:0;box-shadow:inset 0 0 4px 1px #c8cacb,inset 0 0 4px 2px #e2e3e4,inset 0 0 0 8px #c8cacb;height:60px;margin-left:-140px;width:280px;z-index:-1}.device-surface-studio .device-stripe::before{border:15px solid #e2e3e4;border-radius:0 0 8px 8px;border-top:0;height:70px;margin-left:-150px;width:300px;z-index:-2}.device-surface-studio .device-power{background:radial-gradient(circle at center,#e2e3e4 85%,#c8cacb 100%);border-radius:0 0 2px 2px;height:32px;margin:30px auto 0 auto;position:relative;width:250px}.device-surface-studio .device-power::after{background:#babdbf;content:"";height:1px;left:0;position:absolute;top:4px;width:250px}.device-ipad-pro{height:778px;width:560px}.device-ipad-pro .device-frame{background:#0d0d0d;border-radius:36px;box-shadow:inset 0 0 0 1px #babdbf,inset 0 0 1px 3px #e2e3e4;height:778px;padding:27px;width:560px}.device-ipad-pro .device-screen{border:2px solid #121212;border-radius:11px;height:724px;width:506px}.device-ipad-pro .device-btns::after,.device-ipad-pro .device-btns::before{background:#babdbf;content:"";position:absolute}.device-ipad-pro .device-btns::after{height:2px;right:40px;top:-2px;width:36px}.device-ipad-pro .device-btns::before{box-shadow:0 37px #babdbf;height:32px;right:-2px;top:63px;width:2px}.device-ipad-pro .device-sensors::after,.device-ipad-pro .device-sensors::before{content:"";position:absolute}.device-ipad-pro .device-sensors::after{background:#1a1a1a;border-radius:17px;box-shadow:-20px 0 #1a1a1a,70px 0 #1a1a1a;height:10px;left:50%;margin-left:-30px;top:12px;width:10px}.device-ipad-pro .device-sensors::before{background:radial-gradient(farthest-corner at 20% 20%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);border-radius:50%;box-shadow:0 0 1px 1px rgba(255,255,255,.05);height:6px;left:50%;margin-left:-3px;top:14px;width:6px}.device-ipad-pro.device-spacegray .device-frame{box-shadow:inset 0 0 0 1px #6a6d70,inset 0 0 1px 3px #83878a}.device-ipad-pro.device-spacegray .device-btns::after,.device-ipad-pro.device-spacegray .device-btns::before{background:#6a6d70}.device-ipad-pro.device-spacegray .device-btns::before{box-shadow:0 37px #6a6d70}.device-ipad-pro-2017{height:804px;width:560px}.device-ipad-pro-2017 .device-frame{background:#fff;border-radius:38px;box-shadow:inset 0 0 0 2px #c8cacb,inset 0 0 0 6px #e2e3e4;height:804px;padding:62px 25px;width:560px}.device-ipad-pro-2017 .device-screen{border:2px solid #222;border-radius:2px;height:680px;width:510px}.device-ipad-pro-2017 .device-home{border:2px solid #c8cacb;border-radius:50%;bottom:17px;height:34px;left:50%;margin-left:-17px;position:absolute;width:34px}.device-ipad-pro-2017 .device-sensors{background:#666;border-radius:50%;height:10px;left:50%;margin-left:-5px;margin-top:-5px;position:absolute;top:34px;width:10px}.device-ipad-pro-2017.device-gold .device-frame{box-shadow:inset 0 0 0 2px #e4b08a,inset 0 0 0 6px #f7e8dd}.device-ipad-pro-2017.device-gold .device-header{border-color:#e4b08a}.device-ipad-pro-2017.device-rosegold .device-frame{box-shadow:inset 0 0 0 2px #f6a69a,inset 0 0 0 6px #facfc9}.device-ipad-pro-2017.device-rosegold .device-home{border-color:#f6a69a}.device-ipad-pro-2017.device-spacegray .device-frame{background:#222;box-shadow:inset 0 0 0 2px #818187,inset 0 0 0 6px #9b9ba0}.device-ipad-pro-2017.device-spacegray .device-home{border-color:#818187}.device-surface-pro-2017{height:394px;width:561px}.device-surface-pro-2017 .device-frame{background:#0d0d0d;border-radius:10px;box-shadow:inset 0 0 0 2px #c8c8c8;height:394px;margin:0 auto;padding:26px 24px;width:561px}.device-surface-pro-2017 .device-screen{border:2px solid #121212;border-radius:2px;height:342px;width:513px}.device-surface-pro-2017 .device-btns::after,.device-surface-pro-2017 .device-btns::before{background:#c8c8c8;content:"";height:2px;position:absolute;top:-2px}.device-surface-pro-2017 .device-btns::after{left:48px;width:26px}.device-surface-pro-2017 .device-btns::before{left:94px;width:48px}.device-surface-pro-2017 .device-sensors{background:#333;border-radius:50%;height:6px;left:50%;margin-left:-3px;margin-top:-3px;position:absolute;top:14px;width:6px}.device-apple-watch-ultra{height:380px;width:360px}.device-apple-watch-ultra .device-frame{background:#0d0d0d;border-radius:92px;box-shadow:inset 0 0 12px 1px rgba(13,13,13,.75),inset 0 0 0 6px #d6ccc2,inset 0 0 0 12px #d6ccc2;height:380px;margin:0 20px;padding:38px;position:relative;width:320px}.device-apple-watch-ultra .device-frame::before{border:1px solid #f5f2f0;border-radius:80px;box-shadow:0 0 6px rgba(13,13,13,.2),inset 0 0 4px 1px #f5f2f0,inset 0 0 0 10px #d6ccc2;content:"";height:356px;left:12px;position:absolute;top:12px;width:296px}.device-apple-watch-ultra .device-screen{border:2px solid #121212;border-radius:62px;height:304px;width:244px}.device-apple-watch-ultra .device-header{background:radial-gradient(circle at center,#d6ccc2 50%,#ebe6e1 85%,#a38c76 100%);border-radius:4px 4px 4px 4px/8px 4px 4px 8px;box-shadow:inset 0 0 16px 1px rgba(13,13,13,.5),-8px 0 4px rgba(13,13,13,.2),inset 4px 0 4px rgba(13,13,13,.2);height:214px;margin-top:-107px;position:absolute;right:4px;top:50%;width:18px;z-index:1}.device-apple-watch-ultra .device-header::before{border-radius:8px 4px 4px 8px/32px 4px 4px 32px;box-shadow:-10px 0 8px rgba(13,13,13,.2);content:"";height:194px;margin-top:-97px;position:absolute;right:8px;top:50%;width:12px}.device-apple-watch-ultra .device-btns{background:#d6ccc2;border-left:1px solid #4c4033;border-radius:8px 6px 6px 8px/20px 6px 6px 20px;box-shadow:inset 8px 0 8px 0 #5c4d3e,inset -2px 0 6px #a38c76;height:72px;position:absolute;right:1px;top:108px;width:24px;z-index:9}.device-apple-watch-ultra .device-btns::after{background:#d6ccc2;border-radius:2px 4px 4px 2px/20px 8px 8px 20px;box-shadow:inset -2px 0 2px 0 #6b5948,inset -6px 0 18px #a38c76;content:"";height:78px;position:absolute;right:0;top:-4px;width:6px}.device-apple-watch-ultra .device-btns::before{background:#d6ccc2;border-radius:20%;box-shadow:0 -30px rgba(163,140,118,.5),0 -27px #d6ccc2,0 -25px #89735c,0 -21px rgba(163,140,118,.5),0 -18px #d6ccc2,0 -16px #89735c,0 -12px rgba(163,140,118,.5),0 -9px #d6ccc2,0 -7px #89735c,0 -3px rgba(163,140,118,.5),0 0 #d6ccc2,0 2px #89735c,0 6px rgba(163,140,118,.5),0 9px #d6ccc2,0 11px #89735c,0 15px rgba(163,140,118,.5),0 18px #d6ccc2,0 20px #89735c,0 24px rgba(163,140,118,.5),0 27px #d6ccc2,0 29px #89735c;content:"";height:3px;margin-top:-2px;position:absolute;right:2px;top:50%;width:16px;z-index:9}.device-apple-watch-ultra .device-stripe{background:#e0d9d1;border-radius:2px 8px 8px 2px;box-shadow:0 14px 0 #d6ccc2,0 28px 0 #d6ccc2;height:10px;left:19px;position:absolute;top:98px;width:4px;z-index:1}.device-apple-watch-ultra .device-power{background:#d6ccc2;border-radius:2px 4px 4px 2px/2px 8px 8px 2px;box-shadow:inset 0 0 2px 1px #a38c76;height:72px;position:absolute;right:1px;top:212px;width:4px}.device-apple-watch-ultra .device-home{background:#f18f42;border:1px solid #a7500c;border-radius:2px 4px 4px 2px/2px 8px 8px 2px;box-shadow:inset 0 0 1px 1px #ef812a;height:106px;left:19px;position:absolute;top:162px;width:4px;z-index:1}.device-apple-watch-s8{height:380px;width:360px}.device-apple-watch-s8 .device-frame{background:#0d0d0d;border-radius:92px;box-shadow:inset 0 0 24px 1px #0d0d0d,inset 0 0 0 12px #606c78;height:380px;margin:0 20px;padding:28px 26px;position:relative;width:320px}.device-apple-watch-s8 .device-frame::before{border:1px solid #0d0d0d;border-radius:80px;box-shadow:0 0 12px rgba(255,255,255,.5),inset 0 0 12px 2px rgba(255,255,255,.75);content:"";height:356px;left:12px;position:absolute;top:12px;width:298px}.device-apple-watch-s8 .device-screen{border:2px solid #121212;border-radius:62px;height:324px;width:268px}.device-apple-watch-s8 .device-btns{background:#606c78;border-left:1px solid #000;border-radius:8px 6px 6px 8px/20px 6px 6px 20px;box-shadow:inset 8px 0 8px 0 #1c1f23,inset -2px 0 6px #272c31,-4px 0 8px rgba(13,13,13,.25);height:72px;position:absolute;right:10px;top:108px;width:18px;z-index:9}.device-apple-watch-s8 .device-btns::after{background:#272c31;border-radius:2px 4px 4px 2px/20px 8px 8px 20px;box-shadow:inset -2px 0 2px 0 #000,inset -6px 0 18px #272c31;content:"";height:72px;position:absolute;right:0;top:0;width:6px}.device-apple-watch-s8 .device-btns::before{background:#272c31;border-radius:20%;box-shadow:0 -30px rgba(62,70,77,.75),0 -27px #272c31,0 -25px #000,0 -21px rgba(62,70,77,.75),0 -18px #272c31,0 -16px #000,0 -12px rgba(62,70,77,.75),0 -9px #272c31,0 -7px #000,0 -3px rgba(62,70,77,.75),0 0 #272c31,0 2px #000,0 6px rgba(62,70,77,.75),0 9px #272c31,0 11px #000,0 15px rgba(62,70,77,.75),0 18px #272c31,0 20px #000,0 24px rgba(62,70,77,.75),0 27px #272c31,0 29px #000;content:"";height:3px;margin-top:-2px;position:absolute;right:2px;top:50%;width:10px;z-index:9}.device-apple-watch-s8 .device-power{background:#272c31;border-radius:2px 4px 4px 2px/2px 8px 8px 2px;box-shadow:inset 0 0 2px 1px #101315;height:72px;position:absolute;right:18px;top:212px;width:4px}.device-homepod{height:395px;width:320px}.device-homepod .device-frame{background:linear-gradient(to right,#36373a 0,#8d8f95 25%,#1d1e20 60%,#111112 90%,#1d1e20 100%);border-radius:80px;box-shadow:inset 0 0 0 2px #36373a,inset 0 0 40px 1px #1d1e20,inset 0 12px 40px 1px #fff,inset 0 -24px 40px 1px #000;height:385px;margin:5px auto;overflow:hidden;position:relative;width:320px}.device-homepod .device-stripe{background:repeating-linear-gradient(45deg,rgba(141,143,149,.35) 0,rgba(141,143,149,.35) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(135deg,rgba(141,143,149,.35) 0,rgba(141,143,149,.35) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(45deg,transparent 0,transparent 2px,rgba(29,30,32,.35) 2px,rgba(29,30,32,.35) 4px,transparent 4px,transparent 6px),repeating-linear-gradient(135deg,transparent 0,transparent 2px,rgba(29,30,32,.35) 2px,rgba(29,30,32,.35) 4px,transparent 4px,transparent 6px);border-radius:80px;box-shadow:inset 0 0 0 2px #36373a,inset 0 0 40px 1px #1d1e20,inset 0 12px 24px 1px #9b9ca1,inset 0 -12px 24px 1px #050505;height:385px;left:0;overflow:hidden;position:absolute;top:5px;width:320px;z-index:9}.device-homepod .device-stripe::before{top:0;transform:translateY(-34%) perspective(500px) rotateX(51deg)}.device-homepod .device-stripe::after{bottom:0;transform:translateY(34%) perspective(500px) rotateX(-51deg)}.device-homepod .device-home::after,.device-homepod .device-home::before{background:#36373a;content:"";left:50%;position:absolute}.device-homepod .device-home::before{border-radius:50% 50% 8px 8px;height:10px;margin-left:-85px;top:0;width:170px}.device-homepod .device-home::after{border-radius:0 0 10% 10%/0 0 8px 8px;bottom:0;box-shadow:inset 0 0 4px 0 #111112;height:5px;margin-left:-85px;width:170px}.device-pro-display-xdr{height:475px;width:640px}.device-pro-display-xdr .device-frame{background:#151515;border-radius:4px;box-shadow:inset 0 0 2px #d4d5d7;height:368px;padding:8px;position:relative;width:640px}.device-pro-display-xdr .device-frame::before{background:#050505;border-radius:50%;content:"";height:6px;left:50%;margin-left:-3px;position:absolute;text-align:center;top:6px;width:6px;z-index:9}.device-pro-display-xdr .device-screen{border:2px solid #121212;border-radius:2px;height:352px;width:624px}.device-pro-display-xdr .device-power::after{background:radial-gradient(circle at center,#d4d5d7 85%,#9fa1a6 100%);border-top:1px solid #d4d5d7;content:"";height:6px;margin:0 auto;position:relative;width:152px}.device-pro-display-xdr .device-power::before{background:linear-gradient(to bottom,#9fa1a6 0,#c7c8cb 40%,#c7c8cb 85%,#fff 90%,#6b6e74 100%);content:"";height:102px;margin:0 auto;position:relative;width:152px}.device-pro-display-xdr .device-home{background:0 0;border-radius:0 0 3px 3px;bottom:-2px;box-shadow:-61px 0 #6b6e74,61px 0 #6b6e74;height:1px;left:50%;margin-left:-15px;position:absolute;width:30px}
/* Simple scrollbar styling for TomSelect dropdowns */

/* Only show scrollbar when content is scrollable */
.show-scrollbar {
  overflow-y: auto !important;
  scrollbar-width: auto !important; /* For Firefox */
}

/* Webkit scrollbar styling - make more visible */
.show-scrollbar::-webkit-scrollbar {
  width: 8px !important; /* Slightly wider for better visibility */
  display: block !important;
}

.show-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
  border-radius: 4px !important;
}

.show-scrollbar::-webkit-scrollbar-thumb {
  background: #888 !important; /* Darker color for better visibility */
  border-radius: 4px !important;
}

.show-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555 !important;
} 
/**
 * tom-select.css (v2.2.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
:root {
    --ts-pr-clear-button:	0;
    --ts-pr-caret:	0;
    --ts-pr-min:	.75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
    cursor: pointer;
}

.ts-control {
    padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
    visibility: visible !important;
    background: #f2f2f2 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: 0 none !important;
    box-shadow: inset 0 0 12px 4px #fff;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
    content: "!";
    visibility: hidden;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
    margin-right: 0.5rem;
}

.plugin-clear_button {
    --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(8px - 6px);
    margin-right: 0 !important;
    background: transparent !important;
    transition: opacity 0.5s;
    cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
    right: max( var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
    opacity: 1;
}

.ts-wrapper .dropdown-header {
    position: relative;
    padding: 10px 8px;
    border-bottom: 1px solid #d0d0d0;
    background: #f8f8f8;
    border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
    position: absolute;
    right: 8px;
    top: 50%;
    color: #303030;
    opacity: 0.4;
    margin-top: -12px;
    line-height: 20px;
    font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
    color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
    box-shadow: none;
    border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
    border: 1px solid #d0d0d0;
    border-width: 0 0 1px 0;
    display: block;
    padding: 8px 8px;
    box-shadow: none;
    width: 100%;
    background: transparent;
}
.plugin-dropdown_input .items-placeholder {
    border: 0 none !important;
    box-shadow: none !important;
    width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
    display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
    min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
    flex: none;
    min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
    color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
    color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
    display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
    border-right: 1px solid #f2f2f2;
    border-top: 0 none;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
    border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
    display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
    border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
    display: inline-flex;
    align-items: center;
    padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button .item .remove {
    color: inherit;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    padding: 0 6px;
    border-radius: 0 2px 2px 0;
    box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
    background: none;
}

.ts-wrapper.plugin-remove_button .remove-single {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left: 1px solid #d0d0d0;
    margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
    border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
    border-left-color: white;
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
    border-right: 1px solid #d0d0d0;
    margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
    border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
    border-right-color: white;
}

.ts-wrapper {
    position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
    color: #303030;
    font-family: inherit;
    font-size: 1rem;
    line-height: 30px;
    font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
    cursor: text;

    /* Add caret https://github.com/orchidjs/tom-select/discussions/384 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border-color: #6b7280;
    border-radius: 0.5rem;
}

.ts-control {
    padding: 8px 8px;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 3px;
    display: flex;
    flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
    padding: calc( 8px - 2px - 0px) 8px calc( 8px - 2px - 3px - 0px);
}
.full .ts-control {
    background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
    cursor: default !important;
}
.focus .ts-control {
    box-shadow: none;
}
.ts-control > * {
    vertical-align: baseline;
    display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    background: #f2f2f2;
    color: #303030;
    border: 0px solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
    background: #e8e8e8;
    color: #303030;
    border: 0px solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
    color: #7d7d7d;
    background: white;
    border: 0px solid white;
}
.ts-control > input {
    flex: 1 1 auto;
    min-width: 7rem;
    display: inline-block !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
    box-shadow: none !important;
}
.ts-control > input::-ms-clear {
    display: none;
}
.ts-control > input:focus {
    outline: none !important;
}
.has-items .ts-control > input {
    margin: 0px 4px !important;
}
.ts-control.rtl {
    text-align: right;
}
.ts-control.rtl.single .ts-control:after {
    left: 15px;
    right: auto;
}
.ts-control.rtl .ts-control > input {
    margin: 0px 4px 0px -2px !important;
}
.disabled .ts-control {
    opacity: 0.5;
    background-color: #fafafa;
}
.input-hidden .ts-control > input {
    opacity: 0;
    position: absolute;
    left: -10000px;
}

.ts-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    /* Dropdowns are parented to <body> (select_controller dropdownParent),
       so they must sit above the z-50 modal overlay. */
    z-index: 60;
    border: 1px solid #d0d0d0;
    background: #fff;
    margin: 0.25rem 0 0 0;
    border-top: 0 none;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
    cursor: pointer;
    overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
    background: rgba(125, 168, 208, 0.2);
    border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
    cursor: inherit;
    opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
    opacity: 1;
    cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
    border-top: 0 none;
}
.ts-dropdown .optgroup-header {
    color: #303030;
    background: #fff;
    cursor: default;
}
.ts-dropdown .active {
    background-color: #f5fafd;
    color: #495c68;
}
.ts-dropdown .active.create {
    color: #495c68;
}
.ts-dropdown .create {
    color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 5px 8px;
}
.ts-dropdown .spinner:after {
    content: " ";
    display: block;
    width: 24px;
    height: 24px;
    margin: 3px;
    border-radius: 50%;
    border: 5px solid #d0d0d0;
    border-color: #d0d0d0 transparent #d0d0d0 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.ts-dropdown-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 200px;
    overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.ts-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}
/*# sourceMappingURL=tom_select.css.map */

/*https://github.com/orchidjs/tom-select/discussions/160*/

.ts-wrapper {
    @apply
    w-full
    border-coolGray-200
    rounded-md
}

.ts-control {
    @apply
    shadow-sm
    rounded-md
    font-normal
    border-coolGray-200
    bg-white
    py-2
    px-3
    text-base;

    /* Add caret https://github.com/orchidjs/tom-select/discussions/384 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border-color: #6b7280;
    border-radius: 0.5rem;
}

.ts-dropdown {
    @apply rounded-md border border-solid border-t border-neutral-200 text-base;
}

.ts-dropdown [data-selectable].option:first-child {
    @apply rounded-t-lg;
}

.ts-dropdown [data-selectable].option:last-child {
    @apply rounded-b-lg;
}

.ts-dropdown .create:hover, .ts-dropdown .option:hover{
    @apply bg-sky-50 text-sky-900;
}

.ts-dropdown .active {
    @apply bg-neutral-100 text-neutral-900;
}
/*# class: "appearance-none w-full py-2.5 px-4 text-coolGray-900 text-base font-normal hover:border-royalGreen rounded-lg shadow-input "\*/
/*#   "border-coolGray-200", # #{answers_and_response[:response]&.errors&.any? ? 'border-red-500' :*/
/* Mobile-First Upload Form Scroll Fixes */

/* Main form container - fixed positioning with full viewport height */
.upload-form-container {
  /* Use modern viewport units for better mobile support */
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  
  /* Ensure proper stacking and positioning */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 50;
  
  /* Smooth transitions */
  transition: transform 0.3s ease-in-out;
  
  /* Hardware acceleration */
  transform: translateZ(0);
  will-change: transform;
  
  /* Prevent content overflow */
  overflow: hidden;
}

/* Dedicated scroll wrapper - this is the key to reliable mobile scrolling */
.upload-form-scroll-wrapper {
  /* Full height of container */
  height: 100%;
  width: 100%;
  
  /* Scroll properties */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  
  /* Mobile-specific scroll fixes */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  
  /* Hardware acceleration for smooth scrolling */
  transform: translateZ(0);
  will-change: scroll-position;
  backface-visibility: hidden;
  perspective: 1000px;
  
  /* Prevent momentum scrolling issues on iOS */
  -webkit-transform: translate3d(0, 0, 0);
}

/* Content container with proper flex layout */
.upload-form-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--neutral-50));
}

/* Main content area */
.upload-form-main {
  flex: 1;
  padding: 0.75rem; /* p-3 */
  position: relative;
}

/* Responsive padding for larger screens */
@media (min-width: 640px) {
  .upload-form-main {
    padding: 1.5rem; /* sm:p-6 */
  }
}

/* Bottom spacer to ensure content can scroll above mobile UI */
.upload-form-spacer {
  height: 1rem;
  flex-shrink: 0;
}

/* Scroll anchor - invisible element at the top for reliable scroll targeting */
.upload-form-scroll-anchor {
  height: 0;
  width: 100%;
  position: relative;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  .upload-form-container {
    /* Ensure full coverage on mobile */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }
  
  .upload-form-scroll-wrapper {
    /* Enhanced mobile scroll performance */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
    
    /* Prevent rubber band effect */
    overscroll-behavior-y: contain;
    
    /* Force GPU acceleration */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  
  /* Prevent body scroll when form is open */
  body.upload-form-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .upload-form-container {
    /* Use safe area insets for devices with notches */
    height: calc(100vh - env(safe-area-inset-bottom));
    height: calc(100dvh - env(safe-area-inset-bottom));
  }
  
  .upload-form-scroll-wrapper {
    /* Enhanced iOS scroll behavior */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
    
    /* Prevent iOS scroll bounce at boundaries */
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
  }
}

/* Android Chrome specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .upload-form-scroll-wrapper {
    /* Android Chrome scroll optimization */
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
  }
}

/* High DPI mobile devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .upload-form-scroll-wrapper {
    /* Enhanced rendering for high DPI screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Landscape orientation fixes */
@media (orientation: landscape) and (max-height: 500px) {
  .upload-form-container {
    /* Adjust for landscape mobile */
    height: 100vh;
    height: 100dvh;
  }
  
  .upload-form-main {
    /* Reduce padding in landscape for more content space */
    padding: 0.5rem;
  }
}

/* Focus and accessibility improvements */
.upload-form-scroll-wrapper:focus-within {
  /* Ensure focused elements are visible */
  scroll-behavior: smooth;
}

/* Smooth transitions for form visibility */
.upload-form-container.translate-y-full {
  transform: translateY(100%) translateZ(0);
}

.upload-form-container.translate-y-0 {
  transform: translateY(0) translateZ(0);
}

/* Loading state optimizations */
.upload-form-container[data-loading="true"] .upload-form-scroll-wrapper {
  /* Disable smooth scrolling during loading for better performance */
  scroll-behavior: auto;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .upload-form-container {
    transition: none;
  }
  
  .upload-form-scroll-wrapper {
    scroll-behavior: auto;
  }
}
/*
 * 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.
 *


 */

@font-face {
    font-family: 'Clarissa';
    src: url(https://theysaidyes.rsvp/assets/Clarissa-a6a9c83762d30e56f2d5ae59823440d7e959ecba760886e0a6a46aa022e9ad86.ttf)
}

@font-face {
    font-family: 'Fathan-Display';
    src: url(https://theysaidyes.rsvp/assets/Fathan-DisplaySerif-cb5cec5e30af58ef1aa2720aa4c1793c71f165875a57ca22139873b3c6a81a18.otf) format("opentype");
}

.clarissa {
    font-family: 'Clarissa', cursive;
}

.fathan-display {
    font-family: 'Fathan-Display', serif;
}

.fade-in-off {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(15px);
    transition: opacity 2s, filter 2s, transform 2s;
}

.fade-in-on {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

@media(prefers-reduced-motion) {
    .fade-in-off {
        transition: none;
    }
}

[x-cloak] { 
    display: none !important; 
}