@charset "UTF-8";
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */
@import url(/assets/actiontext-d7ef2c0077a9317e42c4f0571904ed0eddda9db6c8b76a1d5cf0f29698200747.css);
/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-container {
  -webkit-touch-callout: none;
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-container img {
  backface-visibility: hidden;
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-canvas, .cropper-wrap-box {
  overflow: hidden;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-modal {
  background-color: #000;
  opacity: .5;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: .5;
  position: absolute;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: .75;
  position: absolute;
  top: 50%;
  width: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-center:after, .cropper-center:before {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-face, .cropper-line, .cropper-point {
  display: block;
  height: 100%;
  opacity: .1;
  position: absolute;
  width: 100%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-line {
  background-color: #39f;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: .75;
  width: 5px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  /* line 9, app/assets/stylesheets/other/cropper.min.css */
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  /* line 9, app/assets/stylesheets/other/cropper.min.css */
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  /* line 9, app/assets/stylesheets/other/cropper.min.css */
  .cropper-point.point-se {
    height: 5px;
    opacity: .75;
    width: 5px;
  }
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-invisible {
  opacity: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-hidden {
  display: none !important;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-move {
  cursor: move;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-crop {
  cursor: crosshair;
}

/* line 9, app/assets/stylesheets/other/cropper.min.css */
.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* line 1, app/assets/stylesheets/general/_reset.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* line 22, app/assets/stylesheets/general/_reset.scss */
:focus:not(:focus-visible) {
  outline: none;
}

/* line 26, app/assets/stylesheets/general/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 31, app/assets/stylesheets/general/_reset.scss */
body {
  line-height: 1;
}

/* line 35, app/assets/stylesheets/general/_reset.scss */
ol, ul {
  list-style: none;
}

/* line 39, app/assets/stylesheets/general/_reset.scss */
blockquote, q {
  quotes: none;
}

/* line 43, app/assets/stylesheets/general/_reset.scss */
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* line 49, app/assets/stylesheets/general/_reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 54, app/assets/stylesheets/general/_reset.scss */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* line 62, app/assets/stylesheets/general/_reset.scss */
input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* line 70, app/assets/stylesheets/general/_reset.scss */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/* line 76, app/assets/stylesheets/general/_reset.scss */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  max-width: 100%;
}

/* line 85, app/assets/stylesheets/general/_reset.scss */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* line 90, app/assets/stylesheets/general/_reset.scss */
[hidden] {
  display: none;
}

/* line 94, app/assets/stylesheets/general/_reset.scss */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/* line 100, app/assets/stylesheets/general/_reset.scss */
a:focus {
  outline: thin dotted;
}

/* line 104, app/assets/stylesheets/general/_reset.scss */
a:active,
a:hover {
  outline: 0;
}

/* line 109, app/assets/stylesheets/general/_reset.scss */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/* line 115, app/assets/stylesheets/general/_reset.scss */
figure {
  margin: 0;
}

/* line 119, app/assets/stylesheets/general/_reset.scss */
form {
  margin: 0;
}

/* line 124, app/assets/stylesheets/general/_reset.scss */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/* line 131, app/assets/stylesheets/general/_reset.scss */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

/* line 139, app/assets/stylesheets/general/_reset.scss */
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}

/* line 151, app/assets/stylesheets/general/_reset.scss */
button,
input {
  line-height: normal;
}

/* line 157, app/assets/stylesheets/general/_reset.scss */
button,
select {
  text-transform: none;
}

/* line 163, app/assets/stylesheets/general/_reset.scss */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
  *overflow: visible;
}

/* line 173, app/assets/stylesheets/general/_reset.scss */
button[disabled],
html input[disabled] {
  cursor: default;
}

/* line 178, app/assets/stylesheets/general/_reset.scss */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

/* line 186, app/assets/stylesheets/general/_reset.scss */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/* line 193, app/assets/stylesheets/general/_reset.scss */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* line 198, app/assets/stylesheets/general/_reset.scss */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* line 204, app/assets/stylesheets/general/_reset.scss */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* line 209, app/assets/stylesheets/general/_reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 214, app/assets/stylesheets/general/_reset.scss */
html,
button,
input,
select,
textarea {
  color: #222;
}

/* line 222, app/assets/stylesheets/general/_reset.scss */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

/* line 227, app/assets/stylesheets/general/_reset.scss */
::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/* line 232, app/assets/stylesheets/general/_reset.scss */
img {
  vertical-align: middle;
}

/* line 236, app/assets/stylesheets/general/_reset.scss */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* line 242, app/assets/stylesheets/general/_reset.scss */
textarea {
  resize: vertical;
}

/* line 246, app/assets/stylesheets/general/_reset.scss */
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* line 253, app/assets/stylesheets/general/_reset.scss */
summary::marker {
  content: '';
}

/* Screen Break Points */
/* EMOTE DEFAULT SIZE 88x88px */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/roboto-vf-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/roboto-vf-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(/fonts/montserrat-900-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(/fonts/montserrat-900-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* line 1, app/assets/stylesheets/general/_typography.scss */
html, body {
  font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  letter-spacing: 0.02rem;
}

/* line 9, app/assets/stylesheets/general/_typography.scss */
a {
  color: #0f68d3;
}

/* line 13, app/assets/stylesheets/general/_typography.scss */
h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
}

/* line 18, app/assets/stylesheets/general/_typography.scss */
h1 {
  font-size: 4.5rem;
}

/* line 20, app/assets/stylesheets/general/_typography.scss */
h1 svg {
  max-height: 4.5rem;
}

/* line 25, app/assets/stylesheets/general/_typography.scss */
h2 {
  font-size: 4rem;
}

/* line 27, app/assets/stylesheets/general/_typography.scss */
h2 svg {
  max-height: 4rem;
}

/* line 32, app/assets/stylesheets/general/_typography.scss */
h3 {
  font-size: 3rem;
}

/* line 34, app/assets/stylesheets/general/_typography.scss */
h3 svg {
  max-height: 3rem;
}

/* line 39, app/assets/stylesheets/general/_typography.scss */
h4 {
  font-size: 2rem;
}

/* line 41, app/assets/stylesheets/general/_typography.scss */
h4 svg {
  max-height: 2rem;
}

/* line 46, app/assets/stylesheets/general/_typography.scss */
h5 {
  font-size: 1rem;
}

/* line 48, app/assets/stylesheets/general/_typography.scss */
h5 svg {
  max-height: 1rem;
}

/* line 53, app/assets/stylesheets/general/_typography.scss */
h6 {
  font-size: .875rem;
}

/* line 55, app/assets/stylesheets/general/_typography.scss */
h6 svg {
  max-height: .875rem;
}

@media only screen and (max-width: 64rem) {
  /* line 61, app/assets/stylesheets/general/_typography.scss */
  h1 {
    font-size: 3.33rem;
  }
  /* line 63, app/assets/stylesheets/general/_typography.scss */
  h1 svg {
    max-height: 3.33rem;
  }
  /* line 68, app/assets/stylesheets/general/_typography.scss */
  h2 {
    font-size: 2.66rem;
  }
  /* line 70, app/assets/stylesheets/general/_typography.scss */
  h2 svg {
    max-height: 2.66rem;
  }
  /* line 75, app/assets/stylesheets/general/_typography.scss */
  h3 {
    font-size: 2rem;
  }
  /* line 77, app/assets/stylesheets/general/_typography.scss */
  h3 svg {
    max-height: 2rem;
  }
  /* line 82, app/assets/stylesheets/general/_typography.scss */
  h4 {
    font-size: 1.33rem;
  }
  /* line 84, app/assets/stylesheets/general/_typography.scss */
  h4 svg {
    max-height: 1.33rem;
  }
  /* line 89, app/assets/stylesheets/general/_typography.scss */
  h5 {
    font-size: 1rem;
  }
  /* line 91, app/assets/stylesheets/general/_typography.scss */
  h5 svg {
    max-height: 1rem;
  }
  /* line 96, app/assets/stylesheets/general/_typography.scss */
  h6 {
    font-size: 0.875rem;
  }
  /* line 98, app/assets/stylesheets/general/_typography.scss */
  h6 svg {
    max-height: 0.875rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 105, app/assets/stylesheets/general/_typography.scss */
  h1 {
    font-size: 2.5rem;
  }
  /* line 107, app/assets/stylesheets/general/_typography.scss */
  h1 svg {
    max-height: 2.5rem;
  }
  /* line 112, app/assets/stylesheets/general/_typography.scss */
  h2 {
    font-size: 2rem;
  }
  /* line 114, app/assets/stylesheets/general/_typography.scss */
  h2 svg {
    max-height: 2rem;
  }
  /* line 119, app/assets/stylesheets/general/_typography.scss */
  h3 {
    font-size: 1.5rem;
  }
  /* line 121, app/assets/stylesheets/general/_typography.scss */
  h3 svg {
    max-height: 1.5rem;
  }
  /* line 126, app/assets/stylesheets/general/_typography.scss */
  h4 {
    font-size: 1.25rem;
  }
  /* line 128, app/assets/stylesheets/general/_typography.scss */
  h4 svg {
    max-height: 1.25rem;
  }
  /* line 133, app/assets/stylesheets/general/_typography.scss */
  h5 {
    font-size: 1rem;
  }
  /* line 135, app/assets/stylesheets/general/_typography.scss */
  h5 svg {
    max-height: 1rem;
  }
  /* line 140, app/assets/stylesheets/general/_typography.scss */
  h6 {
    font-size: 0.875rem;
  }
  /* line 142, app/assets/stylesheets/general/_typography.scss */
  h6 svg {
    max-height: 0.875rem;
  }
}

/* line 149, app/assets/stylesheets/general/_typography.scss */
p {
  font-size: 1.125rem;
  line-height: 1.5;
}

/* line 155, app/assets/stylesheets/general/_typography.scss */
.size--sm {
  font-size: 1rem;
}

/* line 159, app/assets/stylesheets/general/_typography.scss */
.size--md {
  font-size: 1.25rem;
  font-weight: 300;
}

/* line 164, app/assets/stylesheets/general/_typography.scss */
.size--lg {
  font-size: 2rem;
  font-weight: 300;
}

/* line 170, app/assets/stylesheets/general/_typography.scss */
.dark {
  color: #161616 !important;
}

/* line 174, app/assets/stylesheets/general/_typography.scss */
.light {
  color: #0f68d3 !important;
}

/* line 178, app/assets/stylesheets/general/_typography.scss */
.white {
  color: #fff !important;
}

/* line 182, app/assets/stylesheets/general/_typography.scss */
.discord-color {
  color: #5865F2;
}

/* line 186, app/assets/stylesheets/general/_typography.scss */
.twitch-color {
  color: #6441a5;
}

/* line 190, app/assets/stylesheets/general/_typography.scss */
.slack-color {
  color: #4A154B;
}

/* line 194, app/assets/stylesheets/general/_typography.scss */
a {
  text-decoration: none;
}

/* line 197, app/assets/stylesheets/general/_typography.scss */
a:hover {
  text-decoration: underline;
}

/* line 202, app/assets/stylesheets/general/_typography.scss */
.info-text {
  opacity: .9;
  font-size: .875rem;
  line-height: 1.25;
  flex-basis: min-content;
  flex-grow: 1;
}

/* line 209, app/assets/stylesheets/general/_typography.scss */
.info-text--click {
  display: flex;
  cursor: pointer;
  font-weight: 500;
}

/* line 214, app/assets/stylesheets/general/_typography.scss */
.info-text--click:after {
  opacity: .9;
  content: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="16px" width="16px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M7.41527,7.75061v3.68905H6.3764v1.576h4.24028v-1.576H9.599v-5.265H6.3764v1.576Zm.27562-2.69847A1.19081,1.19081,0,0,0,9.72622,4.2135a1.16411,1.16411,0,0,0-.34629-.8457,1.19293,1.19293,0,0,0-1.69258,0,1.15814,1.15814,0,0,0-.34982.8457A1.14424,1.14424,0,0,0,7.69089,5.05214Z"/></svg>');
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}

/* line 223, app/assets/stylesheets/general/_typography.scss */
.info-text--sm {
  font-size: .75rem;
}

/* line 226, app/assets/stylesheets/general/_typography.scss */
.info-text--sm a {
  color: #0f68d3;
}

/* line 233, app/assets/stylesheets/general/_typography.scss */
.text-center {
  text-align: center;
}

/* line 238, app/assets/stylesheets/general/_typography.scss */
.headline {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: .25em;
}

/* line 244, app/assets/stylesheets/general/_typography.scss */
.headline-center {
  justify-content: center;
}

/* line 248, app/assets/stylesheets/general/_typography.scss */
.headline svg {
  fill: #161616;
}

@media only screen and (max-width: 32rem) {
  /* line 255, app/assets/stylesheets/general/_typography.scss */
  .size--sm {
    font-size: 1rem;
  }
  /* line 259, app/assets/stylesheets/general/_typography.scss */
  .size--md {
    font-size: 1.125rem;
  }
  /* line 263, app/assets/stylesheets/general/_typography.scss */
  .size--lg {
    font-size: 1.25rem;
  }
}

/* line 1, app/assets/stylesheets/general/_general.scss */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 6, app/assets/stylesheets/general/_general.scss */
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* line 12, app/assets/stylesheets/general/_general.scss */
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  background-image: url(/assets/bg-4ba2d54b1fed95e3aebe422b6fdbd39f331716c0b87214cbefc513f5cc444cb0.svg);
  background-size: 100%;
}

/* line 20, app/assets/stylesheets/general/_general.scss */
.section {
  position: relative;
  padding: 4rem 2rem;
  width: 100%;
}

@media only screen and (max-width: 64rem) {
  /* line 20, app/assets/stylesheets/general/_general.scss */
  .section {
    padding: 2rem 1rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 20, app/assets/stylesheets/general/_general.scss */
  .section {
    padding: 2rem .5rem;
  }
}

/* line 33, app/assets/stylesheets/general/_general.scss */
.section--hero {
  padding: 2em 2em 4em 2em;
  background: #161616;
  color: #fff;
  overflow: hidden;
}

@media only screen and (max-width: 64rem) {
  /* line 33, app/assets/stylesheets/general/_general.scss */
  .section--hero {
    padding: 2em 1em 1em 1em;
  }
}

/* line 45, app/assets/stylesheets/general/_general.scss */
.container {
  position: relative;
  display: block;
  max-width: 90rem;
  margin: 0 auto;
}

/* line 51, app/assets/stylesheets/general/_general.scss */
.container--slg-display {
  max-width: 100rem;
}

/* line 55, app/assets/stylesheets/general/_general.scss */
.container--lg-display {
  max-width: 90rem;
}

/* line 59, app/assets/stylesheets/general/_general.scss */
.container--md-display {
  max-width: 64rem;
}

/* line 63, app/assets/stylesheets/general/_general.scss */
.container--sm-display {
  max-width: 32rem;
}

/* line 68, app/assets/stylesheets/general/_general.scss */
.head-container {
  display: flex;
  flex-flow: column;
  position: relative;
  margin: 2rem 0;
  gap: 1rem;
}

/* line 75, app/assets/stylesheets/general/_general.scss */
.head-container--hero {
  gap: 1.5rem;
}

/* line 80, app/assets/stylesheets/general/_general.scss */
.head-container--center {
  align-items: center;
}

/* line 84, app/assets/stylesheets/general/_general.scss */
.head-container__headline {
  --headline-icon-size: 1em;
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: .1em;
  line-height: 1.05;
}

/* line 93, app/assets/stylesheets/general/_general.scss */
.head-container__headline-text {
  min-width: 0;
}

/* line 97, app/assets/stylesheets/general/_general.scss */
.head-container__headline svg {
  display: block;
  flex: 0 0 auto;
  width: var(--headline-icon-size);
  height: var(--headline-icon-size);
  max-width: none;
  max-height: none;
  fill: #161616;
}

/* line 109, app/assets/stylesheets/general/_general.scss */
summary {
  display: flex;
  height: 100%;
  width: 100%;
  clear: both;
}

/* line 116, app/assets/stylesheets/general/_general.scss */
.content-and-image {
  display: flex;
  flex-flow: row;
  gap: 5rem;
}

/* line 121, app/assets/stylesheets/general/_general.scss */
.content-and-image__content, .content-and-image__image {
  width: 100%;
}

/* line 125, app/assets/stylesheets/general/_general.scss */
.content-and-image__image {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 130, app/assets/stylesheets/general/_general.scss */
.content-and-image__image img {
  max-width: 30rem;
}

/* line 2, app/assets/stylesheets/general/_misc.scss */
.mt-1 {
  margin-top: 0.5rem;
}

/* line 5, app/assets/stylesheets/general/_misc.scss */
.mt-2 {
  margin-top: 1rem;
}

/* line 8, app/assets/stylesheets/general/_misc.scss */
.mt-3 {
  margin-top: 1.5rem;
}

/* line 11, app/assets/stylesheets/general/_misc.scss */
.mt-4 {
  margin-top: 2rem;
}

/* line 14, app/assets/stylesheets/general/_misc.scss */
.mt-5 {
  margin-top: 2.5rem;
}

/* line 18, app/assets/stylesheets/general/_misc.scss */
.mb-1 {
  margin-bottom: 0.5rem;
}

/* line 21, app/assets/stylesheets/general/_misc.scss */
.mb-2 {
  margin-bottom: 1rem;
}

/* line 24, app/assets/stylesheets/general/_misc.scss */
.mb-3 {
  margin-bottom: 1.5rem;
}

/* line 27, app/assets/stylesheets/general/_misc.scss */
.mb-4 {
  margin-bottom: 2rem;
}

/* line 30, app/assets/stylesheets/general/_misc.scss */
.mb-5 {
  margin-bottom: 2.5rem;
}

/* line 34, app/assets/stylesheets/general/_misc.scss */
.mr-1 {
  margin-right: 0.5rem;
}

/* line 37, app/assets/stylesheets/general/_misc.scss */
.mr-2 {
  margin-right: 1rem;
}

/* line 40, app/assets/stylesheets/general/_misc.scss */
.mr-3 {
  margin-right: 1.5rem;
}

/* line 43, app/assets/stylesheets/general/_misc.scss */
.mr-4 {
  margin-right: 2rem;
}

/* line 46, app/assets/stylesheets/general/_misc.scss */
.mr-5 {
  margin-right: 2.5rem;
}

/* line 50, app/assets/stylesheets/general/_misc.scss */
.ml-1 {
  margin-left: 0.5rem;
}

/* line 53, app/assets/stylesheets/general/_misc.scss */
.ml-2 {
  margin-left: 1rem;
}

/* line 56, app/assets/stylesheets/general/_misc.scss */
.ml-3 {
  margin-left: 1.5rem;
}

/* line 59, app/assets/stylesheets/general/_misc.scss */
.ml-4 {
  margin-left: 2rem;
}

/* line 62, app/assets/stylesheets/general/_misc.scss */
.ml-5 {
  margin-left: 2.5rem;
}

/* line 68, app/assets/stylesheets/general/_misc.scss */
.pt-0 {
  padding-top: 0rem;
}

/* line 71, app/assets/stylesheets/general/_misc.scss */
.pt-1 {
  padding-top: 0.5rem;
}

/* line 74, app/assets/stylesheets/general/_misc.scss */
.pt-2 {
  padding-top: 1rem;
}

/* line 77, app/assets/stylesheets/general/_misc.scss */
.pt-3 {
  padding-top: 1.5rem;
}

/* line 80, app/assets/stylesheets/general/_misc.scss */
.pt-4 {
  padding-top: 2rem;
}

/* line 83, app/assets/stylesheets/general/_misc.scss */
.pt-5 {
  padding-top: 2.5rem;
}

/* line 87, app/assets/stylesheets/general/_misc.scss */
.pb-0 {
  padding-bottom: 0rem;
}

/* line 90, app/assets/stylesheets/general/_misc.scss */
.pb-1 {
  padding-bottom: 0.5rem;
}

/* line 93, app/assets/stylesheets/general/_misc.scss */
.pb-2 {
  padding-bottom: 1rem;
}

/* line 96, app/assets/stylesheets/general/_misc.scss */
.pb-3 {
  padding-bottom: 1.5rem;
}

/* line 99, app/assets/stylesheets/general/_misc.scss */
.pb-4 {
  padding-bottom: 2rem;
}

/* line 102, app/assets/stylesheets/general/_misc.scss */
.pb-5 {
  padding-bottom: 2.5rem;
}

/* line 106, app/assets/stylesheets/general/_misc.scss */
.pr-0 {
  padding-right: 0rem;
}

/* line 109, app/assets/stylesheets/general/_misc.scss */
.pr-1 {
  padding-right: 0.5rem;
}

/* line 112, app/assets/stylesheets/general/_misc.scss */
.pr-2 {
  padding-right: 1rem;
}

/* line 115, app/assets/stylesheets/general/_misc.scss */
.pr-3 {
  padding-right: 1.5rem;
}

/* line 118, app/assets/stylesheets/general/_misc.scss */
.pr-4 {
  padding-right: 2rem;
}

/* line 121, app/assets/stylesheets/general/_misc.scss */
.pr-5 {
  padding-right: 2.5rem;
}

/* line 125, app/assets/stylesheets/general/_misc.scss */
.pl-0 {
  padding-left: 0rem;
}

/* line 128, app/assets/stylesheets/general/_misc.scss */
.pl-1 {
  padding-left: 0.5rem;
}

/* line 131, app/assets/stylesheets/general/_misc.scss */
.pl-2 {
  padding-left: 1rem;
}

/* line 134, app/assets/stylesheets/general/_misc.scss */
.pl-3 {
  padding-left: 1.5rem;
}

/* line 137, app/assets/stylesheets/general/_misc.scss */
.pl-4 {
  padding-left: 2rem;
}

/* line 140, app/assets/stylesheets/general/_misc.scss */
.pl-5 {
  padding-left: 2.5rem;
}

/* line 146, app/assets/stylesheets/general/_misc.scss */
.w-25 {
  width: 25%;
}

/* line 149, app/assets/stylesheets/general/_misc.scss */
.w-50 {
  width: 50%;
}

/* line 152, app/assets/stylesheets/general/_misc.scss */
.w-75 {
  width: 75%;
}

/* line 155, app/assets/stylesheets/general/_misc.scss */
.w-100 {
  width: 100%;
}

/* line 160, app/assets/stylesheets/general/_misc.scss */
.hyphen {
  width: 1px;
  height: 75%;
  display: inline-block;
  margin: 0 1rem;
  background: rgba(22, 22, 22, 0.12);
}

/* line 168, app/assets/stylesheets/general/_misc.scss */
.flash-message {
  display: none;
  opacity: 0;
}

/* line 173, app/assets/stylesheets/general/_misc.scss */
*[disabled] {
  cursor: default;
  opacity: .5 !important;
}

/* line 178, app/assets/stylesheets/general/_misc.scss */
.hide {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* line 183, app/assets/stylesheets/general/_misc.scss */
.checkerboard-pattern {
  background-color: #fff;
  background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* line 189, app/assets/stylesheets/general/_misc.scss */
.checkerboard-pattern--dark {
  background-color: #9f9f9f;
  background-image: linear-gradient(45deg, #d9d9d9 25%, transparent 25%), linear-gradient(-45deg, #d9d9d9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d9d9d9 75%), linear-gradient(-45deg, transparent 75%, #d9d9d9 75%);
}

/* line 195, app/assets/stylesheets/general/_misc.scss */
.emote-image--blurred {
  filter: blur(10px);
}

/* line 200, app/assets/stylesheets/general/_misc.scss */
.background-color-secondary {
  background-color: #161616;
}

/* line 204, app/assets/stylesheets/general/_misc.scss */
.background-color-discord {
  background-color: #5865F2;
}

/* line 208, app/assets/stylesheets/general/_misc.scss */
.background-color-twitch {
  background-color: #6441a5;
}

/* line 212, app/assets/stylesheets/general/_misc.scss */
.background-color-slack {
  background-color: #4A154B;
}

/* line 218, app/assets/stylesheets/general/_misc.scss */
.color-secondary {
  color: #161616 !important;
}

/* line 222, app/assets/stylesheets/general/_misc.scss */
.color-discord {
  color: #5865F2 !important;
}

/* line 226, app/assets/stylesheets/general/_misc.scss */
.color-twitch {
  color: #6441a5 !important;
}

/* line 230, app/assets/stylesheets/general/_misc.scss */
.color-slack {
  color: #4A154B !important;
}

/* line 236, app/assets/stylesheets/general/_misc.scss */
.emote-status-icon--ai-reviewing {
  animation: emote-status-spin 1.6s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* line 242, app/assets/stylesheets/general/_misc.scss */
.emote-status-text--ai-reviewing {
  display: inline-flex;
  align-items: center;
}

/* line 247, app/assets/stylesheets/general/_misc.scss */
.emote-status-dots {
  display: inline-flex;
  align-items: center;
}

/* line 252, app/assets/stylesheets/general/_misc.scss */
.emote-status-dot {
  display: inline-block;
  width: 0.35em;
  text-align: center;
  opacity: 0.2;
  animation: emote-status-dot 1.2s infinite;
}

/* line 260, app/assets/stylesheets/general/_misc.scss */
.emote-status-dot:nth-child(2) {
  animation-delay: 0.2s;
}

/* line 264, app/assets/stylesheets/general/_misc.scss */
.emote-status-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* line 268, app/assets/stylesheets/general/_misc.scss */
.muted-box {
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}

/* line 277, app/assets/stylesheets/general/_misc.scss */
.muted-box strong {
  font-weight: 700;
}

/* line 282, app/assets/stylesheets/general/_misc.scss */
.muted-box--warning {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* line 288, app/assets/stylesheets/general/_misc.scss */
.muted-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* line 295, app/assets/stylesheets/general/_misc.scss */
.muted-box__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  background: #fffbeb;
  border: 1px solid rgba(146, 64, 14, 0.25);
  color: #92400e;
  font-weight: 600;
  text-decoration: none;
  transition: 160ms ease-in-out;
}

/* line 309, app/assets/stylesheets/general/_misc.scss */
.muted-box__link:hover {
  background: #fff7ed;
  border-color: #f59e0b;
}

@keyframes emote-status-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes emote-status-dot {
  0%,
20%,
100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

/* line 74, app/assets/stylesheets/partials/_modal_surface.scss */
.modal-surface-close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.modal-surface-close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.modal-surface-close:hover, .modal-surface-close:focus-visible, .modal-surface-close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.modal-surface-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 1, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog-lock {
  overflow: hidden;
}

/* line 5, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* line 17, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog.is-visible {
  opacity: 1;
}

/* line 21, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: 1.45rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  max-height: 88vh;
  overflow: auto;
  transform: translateY(0.85rem) scale(0.98);
  transition: transform 180ms ease;
}

/* line 29, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog.is-visible .confirmation-dialog__panel {
  transform: translateY(0) scale(1);
}

/* line 33, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(rgba(15, 104, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.055) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  mask-image: linear-gradient(135deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 78%);
}

/* line 47, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* line 56, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.22);
}

/* line 66, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__icon::before,
.confirmation-dialog__icon::after {
  content: "";
  display: block;
  grid-area: 1 / 1;
}

/* line 73, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__icon::before {
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid #0f68d3;
  border-radius: 999px;
}

/* line 80, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__icon::after {
  width: .18rem;
  height: .72rem;
  border-radius: 999px;
  background: #0f68d3;
  box-shadow: 0 0.55rem 0 -0.2rem #0f68d3;
}

/* line 88, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__icon {
  background: rgba(225, 29, 72, 0.1);
  box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.24);
}

/* line 93, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__icon::before {
  border-color: #e11d48;
}

/* line 97, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__icon::after {
  background: #e11d48;
  box-shadow: 0 .55rem 0 -.2rem #e11d48;
}

/* line 102, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__close {
  position: relative;
  flex: 0 0 auto;
}

/* line 107, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 112, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__copy {
  position: relative;
  display: grid;
  gap: .5rem;
}

/* line 118, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 122, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__eyebrow {
  color: #e11d48;
}

/* line 126, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__title {
  margin: 0;
  color: #161616;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 130, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__message {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

/* line 136, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: .7rem;
  margin-top: 1.35rem;
}

/* line 144, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__button {
  min-width: 7.5rem;
}

/* line 148, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__button--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
  color: rgba(22, 22, 22, 0.78);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.14);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

/* line 154, app/assets/stylesheets/partials/_modal_surface.scss */
.confirmation-dialog__button--secondary:hover, .confirmation-dialog__button--secondary:focus-visible {
  background: #f8fbff;
  color: #161616;
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.24), 0 0.8rem 1.4rem rgba(15, 23, 42, 0.08);
}

/* line 152, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog__button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.confirmation-dialog__button--primary:hover, .confirmation-dialog__button--primary:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 156, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__button--primary {
  background: #e11d48;
  box-shadow: 0 0.9rem 1.8rem rgba(225, 29, 72, 0.22);
}

/* line 161, app/assets/stylesheets/partials/_confirmation_dialog.scss */
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__button--primary:hover,
.confirmation-dialog[data-variant="danger"] .confirmation-dialog__button--primary:focus-visible {
  background: #be123c;
}

@media (max-width: 640px) {
  /* line 167, app/assets/stylesheets/partials/_confirmation_dialog.scss */
  .confirmation-dialog {
    align-items: end;
    padding: .75rem;
  }
  /* line 172, app/assets/stylesheets/partials/_confirmation_dialog.scss */
  .confirmation-dialog__panel {
    width: 100%;
    padding: 1rem;
  }
  /* line 177, app/assets/stylesheets/partials/_confirmation_dialog.scss */
  .confirmation-dialog__actions {
    flex-direction: column-reverse;
  }
  /* line 181, app/assets/stylesheets/partials/_confirmation_dialog.scss */
  .confirmation-dialog__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 187, app/assets/stylesheets/partials/_confirmation_dialog.scss */
  .confirmation-dialog,
.confirmation-dialog__panel,
.confirmation-dialog__button,
.confirmation-dialog__close {
    transition: none;
  }
}

/* line 1, app/assets/stylesheets/partials/_buttons.scss */
button, input, textarea {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif, 'Segoe UI Symbol';
}

/* line 9, app/assets/stylesheets/partials/_buttons.scss */
button {
  user-select: none;
}

/* line 17, app/assets/stylesheets/partials/_buttons.scss */
.button {
  --button-bg: #fff;
  --button-bg-hover: #f7faff;
  --button-color: #161616;
  --button-border: rgba(15, 23, 42, .14);
  --button-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 .55rem 1.25rem rgba(15, 23, 42, .06);
  --button-shadow-hover: 0 1px 2px rgba(15, 23, 42, .05), 0 .8rem 1.5rem rgba(15, 23, 42, .1);
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  gap: .5rem;
  padding: .78rem 1.15rem;
  border: 1px solid var(--button-border);
  border-radius: 0.5rem;
  background: var(--button-bg);
  color: var(--button-color);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: var(--button-shadow);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

/* line 48, app/assets/stylesheets/partials/_buttons.scss */
.button:hover {
  border-color: rgba(15, 104, 211, 0.3);
  background: var(--button-bg-hover);
  color: var(--button-color);
  box-shadow: var(--button-shadow-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

/* line 57, app/assets/stylesheets/partials/_buttons.scss */
.button:active {
  transform: translateY(0);
  box-shadow: var(--button-shadow);
}

/* line 62, app/assets/stylesheets/partials/_buttons.scss */
.button:focus-visible {
  outline: 3px solid rgba(15, 104, 211, 0.28);
  outline-offset: 2px;
}

/* line 67, app/assets/stylesheets/partials/_buttons.scss */
.button:disabled, .button[aria-disabled='true'], .button.is-disabled {
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* line 77, app/assets/stylesheets/partials/_buttons.scss */
.button svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
}

/* line 85, app/assets/stylesheets/partials/_buttons.scss */
.button--primary {
  --button-bg: #0f68d3;
  --button-bg-hover: #0d58b2;
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .65rem 1.35rem rgba($primary-color, .2);
  --button-shadow-hover: 0 .85rem 1.6rem rgba($primary-color, .28);
}

/* line 93, app/assets/stylesheets/partials/_buttons.scss */
.button--primary:hover {
  color: #fff;
}

/* line 98, app/assets/stylesheets/partials/_buttons.scss */
.button--secondary {
  --button-bg: #fff;
  --button-bg-hover: #f7faff;
  --button-color: #161616;
}

/* line 104, app/assets/stylesheets/partials/_buttons.scss */
.button--ghost {
  --button-bg: rgba(15, 104, 211, 0.07);
  --button-bg-hover: rgba(15, 104, 211, 0.12);
  --button-color: #0f68d3;
  --button-border: rgba(15, 104, 211, 0.22);
  --button-shadow: none;
  --button-shadow-hover: 0 1rem 2rem rgba(15, 104, 211, 0.14);
}

/* line 112, app/assets/stylesheets/partials/_buttons.scss */
.button--ghost:hover, .button--ghost:focus-visible {
  border-color: rgba(15, 104, 211, 0.36);
  color: #0f68d3;
  transform: translateY(-0.2rem);
}

/* line 120, app/assets/stylesheets/partials/_buttons.scss */
.button--tertiary {
  --button-bg: transparent;
  --button-bg-hover: rgba($primary-color, .08);
  --button-color: #0f68d3;
  --button-border: transparent;
  --button-shadow: none;
  --button-shadow-hover: none;
}

/* line 128, app/assets/stylesheets/partials/_buttons.scss */
.button--tertiary:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* line 134, app/assets/stylesheets/partials/_buttons.scss */
.button--danger {
  --button-bg: #dc2626;
  --button-bg-hover: #b91c1c;
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .65rem 1.35rem rgba(220, 38, 38, .18);
  --button-shadow-hover: 0 .85rem 1.6rem rgba(220, 38, 38, .24);
}

/* line 142, app/assets/stylesheets/partials/_buttons.scss */
.button--danger:hover {
  color: #fff;
}

/* line 147, app/assets/stylesheets/partials/_buttons.scss */
.button--dark {
  --button-bg: #161616;
  --button-bg-hover: #000;
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .65rem 1.35rem rgba(22, 22, 22, .18);
  --button-shadow-hover: 0 .85rem 1.6rem rgba(22, 22, 22, .24);
}

/* line 155, app/assets/stylesheets/partials/_buttons.scss */
.button--dark:hover {
  color: #fff;
}

/* line 160, app/assets/stylesheets/partials/_buttons.scss */
.button--on-dark {
  --button-bg: #fff;
  --button-bg-hover: rgba(255, 255, 255, .9);
  --button-color: #0f68d3;
  --button-border: transparent;
}

/* line 167, app/assets/stylesheets/partials/_buttons.scss */
.button--on-dark-outline {
  --button-bg: transparent;
  --button-bg-hover: rgba(255, 255, 255, .12);
  --button-color: #fff;
  --button-border: rgba(255, 255, 255, .55);
  --button-shadow: none;
  --button-shadow-hover: none;
}

/* line 175, app/assets/stylesheets/partials/_buttons.scss */
.button--on-dark-outline:hover {
  border-color: #fff;
  color: #fff;
}

/* line 181, app/assets/stylesheets/partials/_buttons.scss */
.button--grow {
  flex-grow: 1;
}

/* line 185, app/assets/stylesheets/partials/_buttons.scss */
.button--block {
  width: 100%;
}

/* line 189, app/assets/stylesheets/partials/_buttons.scss */
.button--with-icon {
  gap: .6rem;
}

/* line 193, app/assets/stylesheets/partials/_buttons.scss */
.button--discord {
  --button-bg: #5865F2;
  --button-bg-hover: #4752d7;
  --button-color: #fff;
  --button-border: transparent;
}

/* line 199, app/assets/stylesheets/partials/_buttons.scss */
.button--discord svg {
  fill: currentColor;
  stroke: none;
}

/* line 204, app/assets/stylesheets/partials/_buttons.scss */
.button--discord:hover {
  color: #fff;
}

/* line 209, app/assets/stylesheets/partials/_buttons.scss */
.button--discord-outline {
  --button-bg: transparent;
  --button-bg-hover: rgba($discord-color, .1);
  --button-color: #5865F2;
  --button-border: rgba($discord-color, .42);
  --button-shadow: none;
  --button-shadow-hover: none;
}

/* line 217, app/assets/stylesheets/partials/_buttons.scss */
.button--discord-outline:hover {
  border-color: #5865F2;
  color: #5865F2;
}

/* line 223, app/assets/stylesheets/partials/_buttons.scss */
.button--twitch {
  --button-bg: #6441a5;
  --button-bg-hover: #543486;
  --button-color: #fff;
  --button-border: transparent;
}

/* line 229, app/assets/stylesheets/partials/_buttons.scss */
.button--twitch svg,
.button--twitch svg path {
  fill: currentColor;
  stroke: none;
}

/* line 235, app/assets/stylesheets/partials/_buttons.scss */
.button--twitch:hover {
  color: #fff;
}

/* line 240, app/assets/stylesheets/partials/_buttons.scss */
.button--twitch-outline {
  --button-bg: transparent;
  --button-bg-hover: rgba($twitch-color, .1);
  --button-color: #6441a5;
  --button-border: rgba($twitch-color, .42);
  --button-shadow: none;
  --button-shadow-hover: none;
}

/* line 248, app/assets/stylesheets/partials/_buttons.scss */
.button--twitch-outline:hover {
  border-color: #6441a5;
  color: #6441a5;
}

/* line 254, app/assets/stylesheets/partials/_buttons.scss */
.button--slack {
  --button-bg: #4A154B;
  --button-bg-hover: #351036;
  --button-color: #fff;
  --button-border: transparent;
}

/* line 260, app/assets/stylesheets/partials/_buttons.scss */
.button--slack svg {
  fill: currentColor;
  stroke: none;
}

/* line 265, app/assets/stylesheets/partials/_buttons.scss */
.button--slack:hover {
  color: #fff;
}

/* line 270, app/assets/stylesheets/partials/_buttons.scss */
.button--slack-outline {
  --button-bg: transparent;
  --button-bg-hover: rgba($slack-color, .1);
  --button-color: #4A154B;
  --button-border: rgba($slack-color, .42);
  --button-shadow: none;
  --button-shadow-hover: none;
}

/* line 278, app/assets/stylesheets/partials/_buttons.scss */
.button--slack-outline:hover {
  border-color: #4A154B;
  color: #4A154B;
}

/* line 284, app/assets/stylesheets/partials/_buttons.scss */
.button--whatsapp {
  --button-bg: #25D366;
  --button-bg-hover: #1fb458;
  --button-color: #fff;
  --button-border: transparent;
}

/* line 290, app/assets/stylesheets/partials/_buttons.scss */
.button--whatsapp svg {
  fill: currentColor;
  stroke: none;
}

/* line 295, app/assets/stylesheets/partials/_buttons.scss */
.button--whatsapp:hover {
  color: #fff;
}

/* line 300, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator {
  --button-bg: #fff;
  --button-bg-hover: #f9fbff;
  --button-color: #0f68d3;
  --button-border: rgba(15, 104, 211, 0.28);
  --button-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 .75rem 1.65rem rgba(15, 104, 211, 0.18);
  --button-shadow-hover: 0 1px 2px rgba(15, 23, 42, .1), 0 1rem 2rem rgba(15, 104, 211, 0.26);
  position: relative;
  overflow: hidden;
  padding-inline: 1.35rem;
  font-weight: 700;
}

/* line 312, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator .button--ai-creator__spark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* line 317, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator .button--ai-creator__spark svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: #3b8af0;
  transition: transform 180ms ease;
}

/* line 325, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator .button--ai-creator__label {
  line-height: 1;
}

/* line 329, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator .button--ai-creator__badge {
  display: inline-grid;
  place-items: center;
  margin-left: .1rem;
  padding: .16rem .42rem;
  border-radius: .42rem;
  background: linear-gradient(135deg, #3b8af0 0%, #0f68d3 55%, #7b48f0 130%);
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 104, 211, 0.28);
}

/* line 344, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(123, 72, 240, 0.22) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .6s ease;
  pointer-events: none;
}

/* line 354, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator:hover {
  color: #0f68d3;
}

/* line 356, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator:hover .button--ai-creator__spark svg {
  transform: translateX(3px) rotate(8deg) scale(1.08);
}

/* line 359, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator:hover::after {
  transform: translateX(130%);
}

/* line 364, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator--primary {
  --button-bg: #0f68d3;
  --button-bg-hover: #0d58b2;
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .75rem 1.65rem rgba(15, 104, 211, 0.24);
  --button-shadow-hover: 0 1rem 2rem rgba(15, 104, 211, 0.32);
}

/* line 372, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator--primary .button--ai-creator__spark svg {
  fill: currentColor;
}

/* line 376, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator--primary .button--ai-creator__badge {
  background: #fff;
  color: #0f68d3;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}

/* line 382, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator--primary::after {
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
}

/* line 386, app/assets/stylesheets/partials/_buttons.scss */
.button--ai-creator--primary:hover {
  color: #fff;
}

/* line 392, app/assets/stylesheets/partials/_buttons.scss */
.button--download-png {
  --button-bg: #2bc45a;
  --button-bg-hover: #27b451;
  --button-color: #fff;
  --button-border: transparent;
}

/* line 398, app/assets/stylesheets/partials/_buttons.scss */
.button--download-png svg {
  height: 1rem;
  width: 1rem;
  stroke: #fff;
}

/* line 404, app/assets/stylesheets/partials/_buttons.scss */
.button--download-png:hover {
  color: #fff;
}

/* line 407, app/assets/stylesheets/partials/_buttons.scss */
.button--download-emote {
  --button-bg: #2bc49b;
  --button-bg-hover: #29b993;
  --button-color: #fff;
  --button-border: transparent;
}

/* line 413, app/assets/stylesheets/partials/_buttons.scss */
.button--download-emote svg {
  fill: #fff;
  height: 1rem;
  width: 1rem;
}

/* line 419, app/assets/stylesheets/partials/_buttons.scss */
.button--download-emote:hover {
  color: #fff;
}

/* line 423, app/assets/stylesheets/partials/_buttons.scss */
.button--dropdown::after {
  content: "▼";
  font-size: 12px;
  cursor: pointer;
  margin-left: 0.25em;
}

/* line 432, app/assets/stylesheets/partials/_buttons.scss */
.button--sign-in {
  width: -webkit-fill-available;
  width: -moz-available;
  line-height: 1.5;
}

/* line 437, app/assets/stylesheets/partials/_buttons.scss */
.button--sign-in svg {
  max-height: 1.25rem;
  max-width: 1.25rem;
}

/* line 443, app/assets/stylesheets/partials/_buttons.scss */
.button--sign-in-google svg {
  fill: none;
}

/* line 447, app/assets/stylesheets/partials/_buttons.scss */
.button--small {
  min-height: 2.35rem;
  padding: .58rem .9rem;
  font-size: .82rem;
}

/* line 453, app/assets/stylesheets/partials/_buttons.scss */
.button--large {
  min-height: 3.25rem;
  padding: .95rem 1.4rem;
  font-size: 1rem;
}

/* line 459, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon, .button-icon {
  position: relative;
  height: 1.5rem;
  width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  font-size: 1.5rem;
  border-radius: 0.5rem;
  border: none;
  box-shadow: none;
  opacity: .8;
}

/* line 472, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon svg, .button-icon svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
}

/* line 478, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon.button--icon-download, .button.button--icon--download, .button-icon.button--icon-download, .button-icon--download {
  background: #0f68d3;
}

/* line 485, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon.button--icon-default svg, .button.button--icon--default svg, .button-icon.button--icon-default svg, .button-icon--default svg {
  fill: #161616;
}

/* line 488, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon.button--icon-default svg.no-fill, .button.button--icon--default svg.no-fill, .button-icon.button--icon-default svg.no-fill, .button-icon--default svg.no-fill {
  fill: transparent;
}

/* line 494, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon:hover, .button-icon:hover {
  opacity: 1;
}

/* line 498, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon.button--icon-small, .button.button--icon--small, .button-icon.button--icon-small, .button-icon--small {
  font-size: 1.25rem;
  height: 1.25rem;
  width: 1.25rem;
}

/* line 504, app/assets/stylesheets/partials/_buttons.scss */
.button.button--icon.button--icon-small svg, .button.button--icon--small svg, .button-icon.button--icon-small svg, .button-icon--small svg {
  height: 1.25rem;
  width: 1.25rem;
}

/* line 514, app/assets/stylesheets/partials/_buttons.scss */
fieldset.inputs[disabled] input, fieldset.inputs[disabled] textarea {
  opacity: .5;
}

/* line 519, app/assets/stylesheets/partials/_buttons.scss */
.button-group {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: .5rem 1rem;
}

/* line 525, app/assets/stylesheets/partials/_buttons.scss */
.button-group--center {
  justify-content: center;
}

/* line 529, app/assets/stylesheets/partials/_buttons.scss */
.button-group--flex-column {
  flex-flow: column;
}

/* line 533, app/assets/stylesheets/partials/_buttons.scss */
.button-group--justify-center {
  justify-content: center;
}

/* line 537, app/assets/stylesheets/partials/_buttons.scss */
.button-group--align-start {
  align-items: flex-start;
}

/* line 541, app/assets/stylesheets/partials/_buttons.scss */
.button-group--align-none {
  align-items: unset;
}

/* line 546, app/assets/stylesheets/partials/_buttons.scss */
.download-selector {
  --download-selector-accent: #159173;
  --download-selector-accent-rgb: 21, 145, 115;
  --download-selector-accent-strong: #0f7a61;
  --download-selector-logo-image: none;
  --download-selector-logo-size: 5.5rem;
  --download-selector-logo-size-mobile: 4.6rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  align-items: stretch;
  gap: 0;
}

/* line 560, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-theme="original"] {
  --download-selector-accent: #161616;
  --download-selector-accent-rgb: 22, 22, 22;
  --download-selector-accent-strong: #0d0d0d;
}

/* line 566, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-theme="discord"] {
  --download-selector-accent: #5865f2;
  --download-selector-accent-rgb: 88, 101, 242;
  --download-selector-accent-strong: #4753d8;
  --download-selector-logo-size: 6.6rem;
  --download-selector-logo-size-mobile: 5.5rem;
}

/* line 574, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-theme="twitch"] {
  --download-selector-accent: #9146ff;
  --download-selector-accent-rgb: 145, 70, 255;
  --download-selector-accent-strong: #7d33f2;
}

/* line 580, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-theme="slack"] {
  --download-selector-accent: #4a154b;
  --download-selector-accent-rgb: 74, 21, 75;
  --download-selector-accent-strong: #39103a;
}

/* line 586, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-theme="whatsapp"] {
  --download-selector-accent: #25d366;
  --download-selector-accent-rgb: 37, 211, 102;
  --download-selector-accent-strong: #1fb458;
}

/* line 592, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__primary {
  min-width: 0;
  min-height: 4.8rem;
  padding: 0.95rem 1.15rem 1rem;
  text-align: left;
  flex: 1 1 auto;
  text-wrap: wrap;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  justify-content: flex-start;
  background: #fff;
  color: #161616;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-right: 0;
  border-radius: 0.5rem 0 0 0.5rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* line 612, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__primary:hover, .download-selector__primary:focus, .download-selector__primary:active {
  text-decoration: none;
  color: #161616;
  background: rgba(var(--download-selector-accent-rgb), 0.05);
  border-color: rgba(var(--download-selector-accent-rgb), 0.18);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* line 623, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-decorated="true"] .download-selector__primary {
  padding-right: 3.2rem;
}

/* line 627, app/assets/stylesheets/partials/_buttons.scss */
.download-selector[data-download-selector-decorated="true"] .download-selector__primary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  width: var(--download-selector-logo-size);
  height: var(--download-selector-logo-size);
  transform: translateY(-50%);
  background-image: var(--download-selector-logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.14;
  pointer-events: none;
}

/* line 643, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__primary-copy {
  min-width: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.2rem;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

/* line 654, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__primary-label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--download-selector-accent-strong);
}

/* line 662, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__primary-meta {
  max-width: 100%;
  font-size: 0.8rem;
  color: rgba(var(--download-selector-accent-rgb), 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 671, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__toggle {
  min-width: 0;
  min-height: 0;
  width: 5.4rem;
  min-height: 4.8rem;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: #fff;
  color: rgba(22, 22, 22, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

/* line 687, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__toggle span {
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* line 694, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__toggle svg {
  fill: none;
  stroke: currentColor;
  width: 0.68rem;
  height: 0.68rem;
  transition: transform 180ms ease;
}

/* line 702, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__toggle:hover, .download-selector__toggle:focus, .download-selector__toggle:active {
  background: rgba(var(--download-selector-accent-rgb), 0.05);
  color: #161616;
  border-color: rgba(var(--download-selector-accent-rgb), 0.18);
}

/* line 708, app/assets/stylesheets/partials/_buttons.scss */
.download-selector__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* line 714, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown {
  position: fixed;
  display: none;
  flex-flow: column;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  text-align: left;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(12px);
  z-index: 9000;
  padding: 0.45rem;
  overflow: hidden;
}

/* line 729, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown[hidden] {
  display: none !important;
}

/* line 733, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-open {
  display: flex;
}

/* line 737, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__header {
  display: flex;
  flex-flow: column;
  gap: 0.25rem;
  padding: 0.7rem 0.8rem 0.55rem;
}

/* line 744, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
  font-weight: 700;
}

/* line 752, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__hint {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(22, 22, 22, 0.72);
}

/* line 758, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item {
  --download-accent: #161616;
  --download-accent-rgb: 22, 22, 22;
  --download-option-logo-image: none;
  --download-option-logo-size: 4.25rem;
  display: flex;
  width: 100%;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  color: #161616;
  padding: 0.85rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* line 781, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item:hover, .download-dropdown__item:active, .download-dropdown__item:focus {
  text-decoration: none;
  background: rgba(15, 23, 42, 0.05);
}

/* line 786, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item.is-preferred {
  background: rgba(var(--download-accent-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--download-accent-rgb), 0.16);
}

/* line 790, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item.is-preferred .download-dropdown__item-default {
  opacity: 1;
}

/* line 795, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item.color-discord {
  --download-accent: #5865f2;
  --download-accent-rgb: 88, 101, 242;
  --download-option-logo-size: 5rem;
}

/* line 801, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item.color-twitch {
  --download-accent: #9146ff;
  --download-accent-rgb: 145, 70, 255;
}

/* line 806, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item.color-slack {
  --download-accent: #4a154b;
  --download-accent-rgb: 74, 21, 75;
}

/* line 811, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item.color-whatsapp {
  --download-accent: #25d366;
  --download-accent-rgb: 37, 211, 102;
}

/* line 817, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item--with-logo {
  position: relative;
  overflow: hidden;
  padding-right: 5.1rem;
}

/* line 822, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item--with-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.35rem;
  width: var(--download-option-logo-size);
  height: var(--download-option-logo-size);
  transform: translateY(-50%);
  background-image: var(--download-option-logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
}

/* line 839, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item-copy {
  min-width: 0;
  display: flex;
  flex-flow: column;
  gap: 0.28rem;
  position: relative;
  z-index: 1;
}

/* line 847, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item-copy strong {
  font-size: 0.95rem;
  font-weight: 500;
}

/* line 853, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* line 858, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item-meta span {
  font-size: 0.74rem;
  background: rgba(15, 23, 42, 0.05);
  color: rgba(22, 22, 22, 0.74);
  padding: 0.22rem 0.45rem;
  border-radius: 0.5rem;
}

/* line 867, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown__item-default {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--download-accent);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* line 881, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-mobile, .download-dropdown.is-sheet {
  width: auto;
  max-width: calc(100vw - 1.5rem);
  padding: 0.6rem;
  border-radius: 1.15rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

/* line 889, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-mobile .download-dropdown__header, .download-dropdown.is-sheet .download-dropdown__header {
  padding: 0.55rem 0.65rem 0.45rem;
}

/* line 893, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-mobile .download-dropdown__item, .download-dropdown.is-sheet .download-dropdown__item {
  align-items: flex-start;
  flex-flow: column;
  gap: 0.55rem;
  padding: 0.85rem;
}

/* line 900, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-mobile .download-dropdown__item--with-logo, .download-dropdown.is-sheet .download-dropdown__item--with-logo {
  padding-right: 4.75rem;
}

/* line 904, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-mobile .download-dropdown__item-default, .download-dropdown.is-sheet .download-dropdown__item-default {
  align-self: flex-start;
}

/* line 909, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
}

/* line 915, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__header {
  grid-column: 1 / -1;
  padding-bottom: 0.25rem;
}

/* line 920, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item {
  min-height: 0;
  padding: 0.75rem;
}

/* line 925, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item--with-logo {
  padding-right: 4.6rem;
}

/* line 929, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item-copy {
  gap: 0.22rem;
}

/* line 933, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item-copy strong {
  font-size: 0.9rem;
}

/* line 937, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item-meta {
  gap: 0.28rem;
}

/* line 941, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item-meta span {
  font-size: 0.68rem;
  padding: 0.18rem 0.38rem;
}

/* line 946, app/assets/stylesheets/partials/_buttons.scss */
.download-dropdown.is-compact .download-dropdown__item-default {
  font-size: 0.68rem;
  padding: 0.24rem 0.45rem;
}

/* line 953, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector {
  --collection-accent-rgb: 22, 22, 22;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  align-items: stretch;
  gap: 0;
}

/* line 963, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary {
  min-width: 0;
  min-height: 4.35rem;
  padding: 0.85rem 1rem;
  text-align: left;
  text-wrap: wrap;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem 0 0 0.5rem;
  justify-content: flex-start;
  background: #fff;
  color: #161616;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-right: 0;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* line 980, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary:hover, .collection-selector__primary:focus, .collection-selector__primary:active {
  text-decoration: none;
  color: #161616;
  background: rgba(22, 22, 22, 0.04);
  border-color: rgba(22, 22, 22, 0.16);
}

/* line 987, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-saved {
  background: rgba(15, 104, 211, 0.08);
  border-color: rgba(15, 104, 211, 0.25);
}

/* line 991, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-saved .collection-selector__primary-label {
  color: #0f68d3;
}

/* line 995, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-saved .collection-selector__primary-meta {
  color: rgba(15, 104, 211, 0.7);
}

/* line 1000, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-loading {
  cursor: wait;
}

/* line 1003, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-loading .collection-selector__icon {
  background: transparent;
}

/* line 1006, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-loading .collection-selector__icon img,
.collection-selector__primary.is-loading .collection-selector__icon svg {
  display: none;
}

/* line 1011, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-loading .collection-selector__icon::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid rgba(15, 104, 211, 0.22);
  border-top-color: #0f68d3;
  border-radius: 999px;
  animation: collection-selector-spin .72s linear infinite;
}

/* line 1022, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary.is-loading.is-retrying .collection-selector__icon::before {
  animation-duration: 1s;
}

/* line 1027, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* line 1033, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary {
  background: #313338;
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* line 1040, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary .collection-selector__icon::after {
  content: "";
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 0.5rem;
  border: 0.14rem solid #313338;
  background-color: #6d6f78;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: 0.62rem;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* line 1057, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary:hover, .collection-selector--discord .collection-selector__primary:focus, .collection-selector--discord .collection-selector__primary:active {
  background: #3b3d43;
  border-color: rgba(var(--collection-accent-rgb), 0.42);
  color: #fff;
}

/* line 1062, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary:hover .collection-selector__icon::after, .collection-selector--discord .collection-selector__primary:focus .collection-selector__icon::after, .collection-selector--discord .collection-selector__primary:active .collection-selector__icon::after {
  border-color: #3b3d43;
}

/* line 1069, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-saved {
  background: linear-gradient(90deg, rgba(35, 165, 90, 0.16) 0%, rgba(35, 165, 90, 0.04) 42%, transparent 100%), #313338;
  border-color: rgba(35, 165, 90, 0.55);
  box-shadow: inset 0.18rem 0 0 #23a55a;
}

/* line 1074, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-saved .collection-selector__primary-label {
  color: #fff;
}

/* line 1078, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-saved .collection-selector__primary-meta {
  color: rgba(255, 255, 255, 0.68);
}

/* line 1082, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-saved .collection-selector__icon::after {
  background-color: #23a55a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E");
  background-size: 0.66rem;
}

/* line 1089, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-saved:hover, .collection-selector--discord .collection-selector__primary.is-saved:focus, .collection-selector--discord .collection-selector__primary.is-saved:active {
  border-color: rgba(35, 165, 90, 0.72);
}

/* line 1092, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-saved:hover .collection-selector__icon::after, .collection-selector--discord .collection-selector__primary.is-saved:focus .collection-selector__icon::after, .collection-selector--discord .collection-selector__primary.is-saved:active .collection-selector__icon::after {
  border-color: #3b3d43;
}

/* line 1098, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-loading .collection-selector__icon::after {
  display: none;
}

/* line 1102, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary.is-loading .collection-selector__icon::before {
  border-color: rgba(255, 255, 255, 0.24);
  border-top-color: #fff;
}

/* line 1109, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary-label {
  color: #fff;
}

/* line 1113, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__primary-meta {
  color: rgba(255, 255, 255, 0.68);
}

/* line 1117, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin-right: 0.65rem;
  border-radius: 0.55rem;
  background: rgba(var(--collection-accent-rgb), 0.12);
  color: rgba(var(--collection-accent-rgb), 1);
}

/* line 1130, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
}

/* line 1137, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__icon--image {
  background: #313338;
  color: #fff;
}

/* line 1141, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__icon--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* line 1150, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary-copy {
  min-width: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.15rem;
  line-height: 1.2;
}

/* line 1159, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary-label {
  max-width: 100%;
  overflow: hidden;
  color: #161616;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1170, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__primary-meta {
  max-width: 100%;
  overflow: hidden;
  color: rgba(22, 22, 22, 0.55);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1179, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__toggle {
  min-width: 0;
  width: 5.4rem;
  min-height: 4.35rem;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border-radius: 0 0.5rem 0.5rem 0;
  background: #fff;
  color: rgba(22, 22, 22, 0.72);
  border: 1px solid rgba(22, 22, 22, 0.1);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* line 1193, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__toggle span {
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* line 1200, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__toggle svg {
  fill: none;
  stroke: currentColor;
  width: 0.68rem;
  height: 0.68rem;
  transition: transform 0.2s ease;
}

/* line 1208, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__toggle:hover, .collection-selector__toggle:focus, .collection-selector__toggle:active {
  background: rgba(22, 22, 22, 0.04);
  color: #161616;
  border-color: rgba(22, 22, 22, 0.16);
}

/* line 1214, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* line 1219, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__toggle {
  background: #313338;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
}

/* line 1224, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector--discord .collection-selector__toggle:hover, .collection-selector--discord .collection-selector__toggle:focus, .collection-selector--discord .collection-selector__toggle:active {
  background: #3b3d43;
  border-color: rgba(var(--collection-accent-rgb), 0.42);
  color: #fff;
}

/* line 1231, app/assets/stylesheets/partials/_buttons.scss */
.collection-selector.is-busy .collection-selector__toggle, .collection-selector.is-clear-blocked .collection-selector__toggle {
  opacity: 0.58;
  pointer-events: none;
}

@keyframes collection-selector-spin {
  to {
    transform: rotate(360deg);
  }
}

/* line 1244, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown {
  position: fixed;
  display: none;
  flex-flow: column;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.75rem;
  text-align: left;
  box-shadow: 0 12px 40px rgba(22, 22, 22, 0.18);
  z-index: 9000;
  padding: 0.5rem;
  overflow: hidden;
}

/* line 1258, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown[hidden] {
  display: none !important;
}

/* line 1262, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown.is-open {
  display: flex;
}

/* line 1266, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create {
  padding: 0.5rem;
}

/* line 1270, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-form {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
}

/* line 1279, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-prompt {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

/* line 1286, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-prompt-copy {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
}

/* line 1292, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-label, .collection-dropdown__create-prompt strong {
  color: #0f68d3;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 1302, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-prompt span, .collection-dropdown__create-note {
  margin: 0;
  color: rgba(22, 22, 22, 0.7);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* line 1310, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-row {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* line 1316, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-icon {
  position: absolute;
  top: 50%;
  left: 0.65rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: rgba(22, 22, 22, 0.45);
  pointer-events: none;
}

/* line 1327, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-input {
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2rem;
  border: 1px solid rgba(22, 22, 22, 0.18);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: none;
  color: #161616;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 1343, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-input::placeholder {
  color: rgba(22, 22, 22, 0.4);
  font-weight: 500;
}

/* line 1348, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-input:focus {
  border-color: #0f68d3;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 1353, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-input:disabled {
  cursor: not-allowed;
  background: rgba(22, 22, 22, 0.04);
  opacity: 1;
}

/* line 1360, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown form.collection-dropdown__create-form input.collection-dropdown__create-input[type=text], .collection-dropdown__create-form input.collection-dropdown__create-input[type=text] {
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  padding: 0.6rem 0.75rem 0.6rem 2rem;
  border: 1px solid rgba(22, 22, 22, 0.18);
  border-radius: var(--control-radius, 0.5rem);
  background: #fff;
  box-shadow: none;
  color: #161616;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 1379, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown form.collection-dropdown__create-form input.collection-dropdown__create-input[type=text]::placeholder, .collection-dropdown__create-form input.collection-dropdown__create-input[type=text]::placeholder {
  color: rgba(22, 22, 22, 0.4);
  font-weight: 500;
}

/* line 1384, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown form.collection-dropdown__create-form input.collection-dropdown__create-input[type=text]:focus, .collection-dropdown__create-form input.collection-dropdown__create-input[type=text]:focus {
  border-color: #0f68d3;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 1389, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown form.collection-dropdown__create-form input.collection-dropdown__create-input[type=text]:disabled, .collection-dropdown__create-form input.collection-dropdown__create-input[type=text]:disabled {
  cursor: not-allowed;
  background: rgba(22, 22, 22, 0.04);
  opacity: 1;
}

/* line 1396, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.6rem 1.05rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* line 1415, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-button:hover, .collection-dropdown__create-button:focus, .collection-dropdown__create-button:active {
  background: #0c55ad;
  color: #fff;
  text-decoration: none;
}

/* line 1421, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__create-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* line 1427, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  box-shadow: none;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* line 1446, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__signin:hover, .collection-dropdown__signin:focus, .collection-dropdown__signin:active {
  background: rgba(15, 104, 211, 0.2);
  color: #0f68d3;
  text-decoration: none;
}

/* line 1453, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__status {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: rgba(22, 22, 22, 0.06);
  color: rgba(22, 22, 22, 0.76);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

/* line 1463, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__status[data-status="error"] {
  background: rgba(211, 48, 15, 0.1);
  color: #b3260b;
}

/* line 1468, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__status[data-status="success"] {
  background: rgba(15, 157, 88, 0.12);
  color: #0b7b44;
}

/* line 1474, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item {
  --collection-accent-rgb: 15, 104, 211;
  display: flex;
  width: 100%;
  gap: 0.6rem;
  align-items: center;
  align-self: stretch;
  color: #161616;
  padding: 0.55rem;
  border-radius: 0.5rem;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 1492, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item:hover, .collection-dropdown__item:active, .collection-dropdown__item:focus {
  background: rgba(22, 22, 22, 0.04);
  text-decoration: none;
}

/* line 1497, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item.is-preferred {
  background: rgba(15, 104, 211, 0.08);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.3);
}

/* line 1503, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item--discord .collection-dropdown__item-icon {
  background: #313338;
  color: #fff;
}

/* line 1510, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 1519, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row:hover, .collection-dropdown__saved-row:focus-within {
  background: rgba(22, 22, 22, 0.04);
}

/* line 1524, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row.is-preferred {
  background: rgba(15, 104, 211, 0.08);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.3);
}

/* line 1529, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row--discord.is-preferred {
  background: rgba(var(--collection-accent-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--collection-accent-rgb), 0.34);
}

/* line 1535, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row--inactive-discord .collection-dropdown__item {
  cursor: default;
  opacity: 0.52;
}

/* line 1539, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row--inactive-discord .collection-dropdown__item:hover, .collection-dropdown__saved-row--inactive-discord .collection-dropdown__item:active, .collection-dropdown__saved-row--inactive-discord .collection-dropdown__item:focus {
  background: transparent;
}

/* line 1546, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item--saved {
  min-width: 0;
  border-radius: 0;
}

/* line 1550, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item--saved:hover, .collection-dropdown__item--saved:active, .collection-dropdown__item--saved:focus, .collection-dropdown__item--saved.is-preferred {
  background: transparent;
  box-shadow: none;
}

/* line 1557, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 2rem;
  min-height: 2rem;
  margin: 0.3rem 0.3rem 0.3rem 0;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(22, 22, 22, 0.5);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* line 1573, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__delete svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
}

/* line 1580, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__delete:hover, .collection-dropdown__delete:focus, .collection-dropdown__delete:active {
  background: rgba(211, 48, 15, 0.1);
  color: #b3260b;
}

/* line 1585, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__delete:disabled {
  cursor: wait;
  opacity: 0.5;
}

/* line 1591, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__invite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2rem;
  margin: 0.3rem 0.3rem 0.3rem 0;
  padding: 0 0.65rem;
  border-radius: 0.5rem;
  background: rgba(88, 101, 242, 0.14);
  color: #5865f2;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* line 1609, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__invite:hover, .collection-dropdown__invite:focus, .collection-dropdown__invite:active {
  background: rgba(88, 101, 242, 0.24);
  color: #3242ef;
  text-decoration: none;
}

/* line 1616, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__saved-row:hover .collection-dropdown__delete, .collection-dropdown__saved-row:focus-within .collection-dropdown__delete {
  opacity: 1;
  pointer-events: auto;
}

/* line 1622, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.28);
  color: #161616;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* line 1638, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo:hover, .collection-dropdown__discord-promo:focus, .collection-dropdown__discord-promo:active {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.5);
}

/* line 1643, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  background: #5865f2;
  color: #fff;
}

/* line 1654, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 1660, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo-copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.15rem;
}

/* line 1667, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo-copy strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: #161616;
}

/* line 1673, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo-copy span {
  font-size: 0.74rem;
  color: rgba(22, 22, 22, 0.66);
}

/* line 1679, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__discord-promo-chevron {
  width: 0.7rem;
  height: 1rem;
  flex: 0 0 auto;
  color: #5865f2;
}

/* line 1687, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  color: rgba(var(--collection-accent-rgb), 1);
  background: rgba(var(--collection-accent-rgb), 0.12);
}

/* line 1698, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
}

/* line 1705, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-icon--image {
  overflow: hidden;
  background: #313338;
  color: #fff;
}

/* line 1710, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-icon--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1718, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-copy {
  min-width: 0;
  display: flex;
  flex-flow: column;
  gap: 0.12rem;
}

/* line 1724, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-copy strong,
.collection-dropdown__item-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1731, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-copy strong {
  color: #161616;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.15;
}

/* line 1738, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown__item-copy span {
  color: rgba(22, 22, 22, 0.55);
  font-size: 0.72rem;
  line-height: 1.25;
}

/* line 1745, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown.is-mobile, .collection-dropdown.is-sheet {
  width: auto;
  max-width: calc(100vw - 1.5rem);
  padding: 0.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(22, 22, 22, 0.22);
}

/* line 1754, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown.is-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  align-content: start;
}

/* line 1760, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown.is-compact .collection-dropdown__create,
.collection-dropdown.is-compact .collection-dropdown__status {
  grid-column: 1 / -1;
}

/* line 1765, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown.is-compact .collection-dropdown__item {
  min-height: 0;
  padding: 0.55rem;
}

/* line 1770, app/assets/stylesheets/partials/_buttons.scss */
.collection-dropdown.is-compact .collection-dropdown__delete {
  width: 2.4rem;
}

@media only screen and (max-width: 32rem) {
  /* line 1777, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector,
.collection-selector {
    grid-template-columns: minmax(0, 1fr) 4.6rem;
  }
  /* line 1781, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector__primary,
.collection-selector__primary {
    min-height: 4.45rem;
    padding: 0.85rem 0.95rem 0.9rem;
    border-radius: 0.5rem 0 0 0.5rem;
  }
  /* line 1787, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector[data-download-selector-decorated="true"] .download-selector__primary,
.collection-selector[data-download-selector-decorated="true"] .download-selector__primary {
    padding-right: 2.9rem;
  }
  /* line 1791, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector[data-download-selector-decorated="true"] .download-selector__primary::after,
.collection-selector[data-download-selector-decorated="true"] .download-selector__primary::after {
    right: 0.8rem;
    width: var(--download-selector-logo-size-mobile);
    height: var(--download-selector-logo-size-mobile);
  }
  /* line 1797, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector__primary-label,
.collection-selector__primary-label {
    font-size: 0.94rem;
  }
  /* line 1801, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector__primary-meta,
.collection-selector__primary-meta {
    font-size: 0.74rem;
  }
  /* line 1805, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector__toggle,
.collection-selector__toggle {
    width: auto;
    min-height: 4.45rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    border-radius: 0 0.5rem 0.5rem 0;
  }
  /* line 1812, app/assets/stylesheets/partials/_buttons.scss */
  .download-selector__toggle span,
.collection-selector__toggle span {
    font-size: 0.68rem;
  }
  /* line 1819, app/assets/stylesheets/partials/_buttons.scss */
  .collection-selector__primary {
    border-radius: 0.5rem 0 0 0.5rem;
  }
  /* line 1823, app/assets/stylesheets/partials/_buttons.scss */
  .collection-selector__toggle {
    border-radius: 0 0.5rem 0.5rem 0;
  }
  /* line 1827, app/assets/stylesheets/partials/_buttons.scss */
  .collection-selector__icon {
    width: 2.1rem;
    height: 2.1rem;
    margin-right: 0.55rem;
  }
  /* line 1833, app/assets/stylesheets/partials/_buttons.scss */
  .collection-selector__primary-label {
    font-size: 0.92rem;
  }
  /* line 1837, app/assets/stylesheets/partials/_buttons.scss */
  .collection-selector__primary-meta {
    font-size: 0.74rem;
  }
  /* line 1842, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown,
.collection-dropdown {
    max-width: calc(100vw - 1.5rem);
  }
  /* line 1846, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown__item,
.collection-dropdown__item {
    padding: 0.8rem 0.82rem;
  }
  /* line 1850, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown__item--with-logo,
.collection-dropdown__item--with-logo {
    padding-right: 4.65rem;
  }
  /* line 1854, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown__hint,
.collection-dropdown__hint {
    font-size: 0.78rem;
  }
  /* line 1858, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown__item-copy strong,
.collection-dropdown__item-copy strong {
    font-size: 0.9rem;
  }
  /* line 1862, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown__item-meta,
.collection-dropdown__item-meta {
    gap: 0.3rem;
  }
  /* line 1866, app/assets/stylesheets/partials/_buttons.scss */
  .download-dropdown__item-meta span,
.collection-dropdown__item-meta span {
    font-size: 0.7rem;
    padding: 0.2rem 0.42rem;
  }
}

/* line 1873, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch {
  position: relative;
  display: flex;
  background: #fff;
  border: 1px solid black;
  padding: .2rem .3rem;
  border-radius: 0.5rem;
  align-items: center;
  gap: .5rem;
}

/* line 1883, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch.switching {
  pointer-events: none;
}

/* line 1887, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch__option {
  display: flex;
  flex-flow: row;
  align-items: center;
  opacity: .5;
  cursor: pointer;
  padding: .4rem;
  border-radius: 0.5rem;
  transition: 200ms;
  gap: .25rem;
}

/* line 1898, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch__option svg {
  fill: #161616;
  height: 1rem;
}

/* line 1903, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch__option:hover, .toggle-switch__option:focus, .toggle-switch__option:active {
  background: rgba(22, 22, 22, 0.1);
  opacity: .75;
}

/* line 1908, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch__option.active {
  opacity: 1;
  cursor: default;
  pointer-events: none;
  background: #161616;
  color: #fff;
}

/* line 1915, app/assets/stylesheets/partials/_buttons.scss */
.toggle-switch__option.active svg {
  fill: #fff;
}

/* line 1922, app/assets/stylesheets/partials/_buttons.scss */
.emote-download {
  display: flex;
  flex-flow: column;
  gap: .5rem;
  flex-grow: 1;
}

/* line 1928, app/assets/stylesheets/partials/_buttons.scss */
.emote-download__platform {
  display: flex;
  flex-flow: row;
  gap: .5rem;
  justify-content: center;
  align-items: center;
}

/* line 1935, app/assets/stylesheets/partials/_buttons.scss */
.emote-download__platform-item {
  font-size: .75rem;
  padding: .4rem .3rem .3rem .3rem;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  opacity: 0.5;
}

/* line 1943, app/assets/stylesheets/partials/_buttons.scss */
.emote-download__platform-item.active {
  opacity: 1;
}

/* line 1950, app/assets/stylesheets/partials/_buttons.scss */
.sign-in-form {
  width: 100%;
}

@media only screen and (max-width: 64rem) {
  /* line 1955, app/assets/stylesheets/partials/_buttons.scss */
  .button-group {
    justify-content: center;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 1962, app/assets/stylesheets/partials/_buttons.scss */
  .button-group .button, .button-group form.button_to, .button-group li {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
  }
}

/* line 1, app/assets/stylesheets/partials/_table.scss */
.table {
  width: 100%;
  display: flex;
  flex-flow: column;
}

/* line 6, app/assets/stylesheets/partials/_table.scss */
.table__header, .table__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  width: 100%;
  gap: .5rem;
  padding: .5rem 0;
}

/* line 14, app/assets/stylesheets/partials/_table.scss */
.table__header {
  font-weight: 500;
}

/* line 18, app/assets/stylesheets/partials/_table.scss */
.table__row {
  font-size: .875rem;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* line 24, app/assets/stylesheets/partials/_table.scss */
.table__item--supported, .table__item--not-supported, .table__item--partially {
  font-weight: bold;
  text-align: center;
  cursor: default;
}

/* line 30, app/assets/stylesheets/partials/_table.scss */
.table__item--supported {
  color: #0f68d3;
}

/* line 34, app/assets/stylesheets/partials/_table.scss */
.table__item--not-supported {
  color: #d32727;
}

/* line 38, app/assets/stylesheets/partials/_table.scss */
.table__item--partially {
  color: #161616;
}

/* line 45, app/assets/stylesheets/partials/_table.scss */
.legend {
  display: flex;
  flex-flow: row wrap;
  gap: .5rem;
}

/* line 50, app/assets/stylesheets/partials/_table.scss */
.legend__item {
  font-size: .75rem;
  padding: .5rem .75rem;
  border-radius: 5rem;
  color: #fff;
  background: #0f68d3;
  cursor: default;
}

/* line 58, app/assets/stylesheets/partials/_table.scss */
.legend__item--supported {
  background-color: #0f68d3;
}

/* line 62, app/assets/stylesheets/partials/_table.scss */
.legend__item--not-supported {
  background-color: #d32727;
}

/* line 66, app/assets/stylesheets/partials/_table.scss */
.legend__item--partially {
  background-color: #161616;
}

/* line 1, app/assets/stylesheets/partials/_form.scss */
form {
  display: inline-flex;
  flex-flow: column;
  gap: 1rem;
  --form-error-color: #c6455a;
  --form-error-soft: rgba(198, 69, 90, 0.1);
}

/* line 9, app/assets/stylesheets/partials/_form.scss */
form li::marker {
  content: '';
}

/* line 13, app/assets/stylesheets/partials/_form.scss */
form li.select {
  display: flex;
  flex-flow: column;
  gap: 0.5rem;
}

/* line 20, app/assets/stylesheets/partials/_form.scss */
form label {
  font-weight: 500;
  display: flex;
  gap: .5rem;
  cursor: pointer;
}

/* line 28, app/assets/stylesheets/partials/_form.scss */
form fieldset.inputs ol {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

/* line 34, app/assets/stylesheets/partials/_form.scss */
form fieldset.inputs li {
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

/* line 39, app/assets/stylesheets/partials/_form.scss */
form fieldset.inputs li label {
  font-weight: 500;
  display: flex;
  gap: .5rem;
  cursor: pointer;
}

/* line 48, app/assets/stylesheets/partials/_form.scss */
form input[type=text], form textarea, form input[type=email], form select {
  font-family: 'Roboto', sans-serif, 'Segoe UI Symbol';
  color: #161616;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.5);
  border-radius: 3px;
  padding: .75rem .5rem;
}

/* line 57, app/assets/stylesheets/partials/_form.scss */
form li.error input[type=text], form li.error textarea, form li.error input[type=email], form li.error select {
  box-shadow: inset 0 0 0 1px var(--form-error-color), 0 0 0 3px var(--form-error-soft);
}

/* line 64, app/assets/stylesheets/partials/_form.scss */
form select {
  border: none;
  font-weight: 500;
}

/* line 69, app/assets/stylesheets/partials/_form.scss */
form input.lowercase {
  text-transform: lowercase;
}

/* line 74, app/assets/stylesheets/partials/_form.scss */
.form-error-summary {
  display: flex;
  flex-flow: column;
  gap: .45rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--form-error-color);
  border-radius: 4px;
  background: var(--form-error-soft);
  color: #161616;
}

/* line 85, app/assets/stylesheets/partials/_form.scss */
.form-error-summary__title {
  margin: 0;
  color: var(--form-error-color);
  font-weight: 700;
}

/* line 91, app/assets/stylesheets/partials/_form.scss */
.form-error-summary__list {
  display: flex;
  flex-flow: column;
  gap: .25rem;
  margin: 0;
  padding: 0;
  color: rgba(22, 22, 22, 0.78);
  font-size: .92rem;
}

/* line 101, app/assets/stylesheets/partials/_form.scss */
.inline-errors {
  margin: 0;
  color: var(--form-error-color);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.35;
}

/* line 109, app/assets/stylesheets/partials/_form.scss */
input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: #161616;
  min-width: 1.15rem;
  min-height: 1.15rem;
  max-height: 1.15rem;
  max-width: 1.15rem;
  border: 1px solid rgba(22, 22, 22, 0.5);
  border-radius: 0.15rem;
  transform: translateY(-0.075rem);
  cursor: pointer;
  display: grid;
  place-content: center;
}

/* line 127, app/assets/stylesheets/partials/_form.scss */
input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #161616;
}

/* line 136, app/assets/stylesheets/partials/_form.scss */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid #0f68d3;
  outline-offset: 2px;
}

/* line 142, app/assets/stylesheets/partials/_form.scss */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: .65;
}

/* line 148, app/assets/stylesheets/partials/_form.scss */
input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* line 152, app/assets/stylesheets/partials/_form.scss */
input.image-upload {
  display: none;
}

/* line 156, app/assets/stylesheets/partials/_form.scss */
.image-preview-container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: calc(128px + 8px);
  height: calc(128px + 8px);
  border: 4px dashed #161616;
}

/* line 164, app/assets/stylesheets/partials/_form.scss */
.image-preview-container.has-error {
  border-color: var(--form-error-color);
  box-shadow: 0 0 0 3px var(--form-error-soft);
}

/* line 170, app/assets/stylesheets/partials/_form.scss */
.image-preview {
  width: 128px;
  height: 128px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: none;
  cursor: pointer;
  user-select: none;
}

/* line 180, app/assets/stylesheets/partials/_form.scss */
.image-preview span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-weight: bold;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.85);
}

/* line 193, app/assets/stylesheets/partials/_form.scss */
.image-preview:hover span {
  opacity: 1;
}

/* line 199, app/assets/stylesheets/partials/_form.scss */
.hidden-input {
  display: none;
}

/* line 203, app/assets/stylesheets/partials/_form.scss */
.form-pop {
  margin: 0 auto;
  max-width: 32rem;
  width: 100%;
  padding: 1rem;
  border-radius: 5px;
  display: flex;
  flex-flow: column;
}

/* line 213, app/assets/stylesheets/partials/_form.scss */
.form-inputs {
  display: flex;
  gap: 1rem;
  flex-flow: column;
}

/* line 218, app/assets/stylesheets/partials/_form.scss */
.form-inputs--sm-gap {
  gap: .25rem;
}

/* line 222, app/assets/stylesheets/partials/_form.scss */
.form-inputs--row {
  flex-flow: row wrap;
}

/* line 226, app/assets/stylesheets/partials/_form.scss */
.form-inputs--row-end {
  flex-flow: row wrap;
  align-items: flex-end;
}

@media only screen and (max-width: 32rem) {
  /* line 235, app/assets/stylesheets/partials/_form.scss */
  form fieldset.inputs li {
    width: 100%;
  }
  /* line 240, app/assets/stylesheets/partials/_form.scss */
  form input[type=text] {
    width: 100%;
  }
}

/* line 1, app/assets/stylesheets/partials/_header.scss */
.header {
  position: relative;
  z-index: 999;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 5.75rem;
  background: transparent;
  color: #161616;
}

/* line 14, app/assets/stylesheets/partials/_header.scss */
.main-nav .button.sign-in {
  color: #161616;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.24);
}

/* line 18, app/assets/stylesheets/partials/_header.scss */
.main-nav .button.sign-in:hover, .main-nav .button.sign-in:focus, .main-nav .button.sign-in:active {
  background: rgba(22, 22, 22, 0.06);
  color: #161616;
}

/* line 26, app/assets/stylesheets/partials/_header.scss */
.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100rem;
  padding: 1.5rem 1rem;
  box-sizing: content-box;
}

/* line 35, app/assets/stylesheets/partials/_header.scss */
.main-nav__logo {
  display: flex;
  margin-right: 5rem;
  color: #161616;
}

/* line 40, app/assets/stylesheets/partials/_header.scss */
.main-nav__logo svg {
  width: 100%;
  height: 2rem;
}

/* line 46, app/assets/stylesheets/partials/_header.scss */
.main-nav__navigation {
  flex-grow: 1;
}

/* line 50, app/assets/stylesheets/partials/_header.scss */
.main-nav__buttons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* line 57, app/assets/stylesheets/partials/_header.scss */
.main-nav__buttons > .button,
.main-nav__buttons .main-nav__pfp > details > summary .button {
  padding: 0.6em 1.5em;
}

/* line 63, app/assets/stylesheets/partials/_header.scss */
.main-nav__pfp {
  position: relative;
}

/* line 67, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-left: 0;
}

/* line 75, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-leading, .main-nav__mobile-trailing {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

/* line 83, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-trailing {
  margin-left: auto;
}

/* line 87, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-account {
  position: relative;
}

/* line 91, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: #161616;
  cursor: pointer;
}

/* line 100, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-account-button--signin {
  min-height: 0;
  line-height: 1;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* line 106, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-account-button--avatar {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* line 112, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-account-button--avatar:hover, .main-nav__mobile-account-button--avatar:focus-visible, .main-nav__mobile-account-button--avatar:active {
  transform: translateY(-1px);
}

/* line 118, app/assets/stylesheets/partials/_header.scss */
.main-nav__mobile-account-button--avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12);
}

/* line 129, app/assets/stylesheets/partials/_header.scss */
.main-nav__menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(22, 22, 22, 0.92);
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

/* line 142, app/assets/stylesheets/partials/_header.scss */
.main-nav__menu-button:hover, .main-nav__menu-button:focus-visible, .main-nav__menu-button:active {
  color: #161616;
  transform: translateY(-1px);
}

/* line 149, app/assets/stylesheets/partials/_header.scss */
.main-nav__menu-button.is-active {
  color: #161616;
}

/* line 153, app/assets/stylesheets/partials/_header.scss */
.main-nav__menu-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 22, 22, 0.18);
}

/* line 159, app/assets/stylesheets/partials/_header.scss */
.main-nav__menu-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* line 171, app/assets/stylesheets/partials/_header.scss */
.main-nav__burger-menu {
  display: inline-flex;
  flex-flow: column;
  justify-content: space-between;
  width: 1.75rem;
  height: 1rem;
}

/* line 178, app/assets/stylesheets/partials/_header.scss */
.main-nav__burger-menu span {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  background: currentColor;
  transition: 400ms ease-in-out;
}

/* line 186, app/assets/stylesheets/partials/_header.scss */
.main-nav__burger-menu span::before {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 5px 5px 0 0;
  border-color: currentColor transparent transparent transparent;
}

/* line 199, app/assets/stylesheets/partials/_header.scss */
.main-nav__burger-menu span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 5px 5px;
  border-color: transparent transparent currentColor transparent;
}

/* line 215, app/assets/stylesheets/partials/_header.scss */
.nav-list {
  position: relative;
  display: flex;
  flex-flow: row;
  gap: 2rem;
}

/* line 221, app/assets/stylesheets/partials/_header.scss */
.nav-list__item {
  position: relative;
  padding: 1em 0.5em;
  opacity: 0.75;
  text-align: center;
  transition: opacity 200ms ease-in-out;
}

/* line 228, app/assets/stylesheets/partials/_header.scss */
.nav-list__item a {
  color: #161616;
  font-weight: 600;
  text-decoration: none;
}

/* line 234, app/assets/stylesheets/partials/_header.scss */
.nav-list__item:hover, .nav-list__item:active {
  opacity: 1;
}

/* line 238, app/assets/stylesheets/partials/_header.scss */
.nav-list__item:hover .nav-dropdown-list, .nav-list__item:active .nav-dropdown-list {
  display: block;
}

/* line 243, app/assets/stylesheets/partials/_header.scss */
.nav-list__item--selected {
  opacity: 1;
}

/* line 246, app/assets/stylesheets/partials/_header.scss */
.nav-list__item--selected a {
  font-weight: 900;
}

/* line 253, app/assets/stylesheets/partials/_header.scss */
.nav-list__item--dropdown::after {
  content: " \25BC";
  font-size: 12px;
  cursor: pointer;
}

/* line 261, app/assets/stylesheets/partials/_header.scss */
.nav-list__link {
  display: inline-flex;
  align-items: center;
  min-height: 1.28rem;
  gap: 0.45rem;
}

/* line 268, app/assets/stylesheets/partials/_header.scss */
.nav-list__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1rem;
  padding: 0.14rem 0.4rem;
  border-radius: 0.34rem;
  background: linear-gradient(135deg, #3b8af0, #0f68d3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* line 284, app/assets/stylesheets/partials/_header.scss */
.nav-list__badge--new {
  background: linear-gradient(135deg, #ff2d55, #d90429);
}

/* line 289, app/assets/stylesheets/partials/_header.scss */
.nav-list__buttons {
  display: none;
  justify-content: center;
}

/* line 293, app/assets/stylesheets/partials/_header.scss */
.nav-list__buttons .button {
  margin: 1em;
}

/* line 299, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list {
  position: absolute;
  top: 45px;
  display: none;
  width: 150px;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  text-align: left;
}

/* line 311, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list--explore {
  left: 50%;
  width: 26rem;
  padding: 0.65rem;
  overflow: visible;
  border-radius: 1.15rem;
  box-shadow: 0 22px 50px rgba(3, 7, 18, 0.18), 0 4px 14px rgba(3, 7, 18, 0.08);
  transform: translateX(-50%);
}

/* line 323, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature {
  list-style: none;
}

/* line 327, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 0.9rem;
  background: rgba(22, 22, 22, 0.04);
  color: #161616;
  font-weight: 400;
  text-decoration: none;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 340, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature-link:hover, .nav-dropdown-list__feature-link:active, .nav-dropdown-list__feature-link:focus {
  background: rgba(15, 104, 211, 0.08);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.12);
  color: #161616;
  transform: translateY(-1px);
  text-decoration: none;
}

/* line 351, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature-text {
  display: flex;
  flex-flow: column;
  gap: 0.12rem;
  min-width: 0;
}

/* line 358, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature-title {
  color: #161616;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

/* line 365, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature-copy {
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.2;
}

/* line 372, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__feature-arrow {
  color: rgba(22, 22, 22, 0.42);
  font-size: 1rem;
  line-height: 1;
}

/* line 378, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__grid {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.5rem;
  list-style: none;
}

/* line 384, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* line 388, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* line 392, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__grid--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* line 397, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta {
  margin-top: 0.55rem;
  list-style: none;
}

/* line 402, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-card {
  --nav-cta-accent: #0f68d3;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.78rem;
  min-height: 5.7rem;
  padding: 0.95rem;
  overflow: hidden;
  border-radius: 0.95rem;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.14), rgba(255, 255, 255, 0.95) 48%, rgba(22, 22, 22, 0.04)), #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.16), 0 12px 28px rgba(15, 104, 211, 0.12);
  color: #161616;
  font-weight: 400;
  text-decoration: none;
  isolation: isolate;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

/* line 425, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-card:hover, .nav-dropdown-list__cta-card:active, .nav-dropdown-list__cta-card:focus {
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.34), 0 16px 32px rgba(15, 104, 211, 0.18);
  color: #161616;
  transform: translateY(-1px);
  text-decoration: none;
}

/* line 435, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-card:hover .nav-dropdown-list__cta-arrow, .nav-dropdown-list__cta-card:active .nav-dropdown-list__cta-arrow, .nav-dropdown-list__cta-card:focus .nav-dropdown-list__cta-arrow {
  transform: translateX(2px);
}

/* line 441, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-logo.ai-brand-logo__mark {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 0.82rem;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.06), 0 10px 24px rgba(15, 104, 211, 0.2);
}

/* line 451, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-logo.ai-brand-logo__mark svg {
  width: 1.9rem;
  height: 1.9rem;
}

/* line 457, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  gap: 0.14rem;
  min-width: 0;
}

/* line 466, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-title {
  color: #161616;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
}

/* line 473, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-copy {
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.25;
}

/* line 480, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__cta-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

/* line 496, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card {
  --nav-card-accent: #0f68d3;
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 0.42rem;
  min-height: 7.35rem;
  padding: 0.95rem;
  border-radius: 0.8rem;
  background: rgba(22, 22, 22, 0.035);
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.06);
  color: #161616;
  font-weight: 400;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 514, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card:hover, .nav-dropdown-list__card:active, .nav-dropdown-list__card:focus {
  background: rgba(22, 22, 22, 0.02);
  box-shadow: inset 0 0 0 1px var(--nav-card-accent), 0 10px 20px rgba(3, 7, 18, 0.06);
  color: #161616;
  transform: translateY(-1px);
  text-decoration: none;
}

/* line 526, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card--custom {
  --nav-card-accent: #0f68d3;
}

/* line 530, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card--discord {
  --nav-card-accent: #5865F2;
}

/* line 534, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card--twitch {
  --nav-card-accent: #6441a5;
}

/* line 538, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card--whatsapp {
  --nav-card-accent: #25D366;
}

/* line 542, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card--creator, .nav-dropdown-list__card--avatar {
  --nav-card-accent: #0f68d3;
}

/* line 548, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.72rem;
  background: rgba(22, 22, 22, 0.05);
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.07);
  color: var(--nav-card-accent);
}

/* line 561, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card-icon img,
.nav-dropdown-list__card-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* line 568, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card-title {
  position: relative;
  z-index: 1;
  color: #161616;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.15;
}

/* line 577, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__card-copy {
  position: relative;
  z-index: 1;
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.32;
}

/* line 588, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__item.soon a {
  color: rgba(22, 22, 22, 0.75);
  cursor: not-allowed;
}

/* line 592, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__item.soon a span {
  padding: 0.2rem 0.3rem;
  border-radius: 1rem;
  background: rgba(15, 104, 211, 0.1);
  font-size: 0.75rem;
}

/* line 601, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__item a {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: rgba(22, 22, 22, 0.9);
  font-weight: unset;
  transition: background 100ms ease-in, color 100ms ease-in;
}

/* line 609, app/assets/stylesheets/partials/_header.scss */
.nav-dropdown-list__item a:hover, .nav-dropdown-list__item a:active, .nav-dropdown-list__item a:focus {
  background: rgba(15, 104, 211, 0.1);
  color: #161616;
}

/* line 621, app/assets/stylesheets/partials/_header.scss */
.account-menu {
  position: relative;
}

/* line 624, app/assets/stylesheets/partials/_header.scss */
.account-menu__trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 3px 0.45rem 3px 3px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.05);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 160ms ease, box-shadow 160ms ease;
}

/* line 636, app/assets/stylesheets/partials/_header.scss */
.account-menu__trigger::-webkit-details-marker {
  display: none;
}

/* line 640, app/assets/stylesheets/partials/_header.scss */
.account-menu__trigger:hover {
  background: rgba(22, 22, 22, 0.08);
}

/* line 644, app/assets/stylesheets/partials/_header.scss */
.account-menu__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 22, 22, 0.22);
}

/* line 650, app/assets/stylesheets/partials/_header.scss */
.account-menu[open] .account-menu__trigger {
  background: rgba(22, 22, 22, 0.1);
  box-shadow: 0 0 0 2px rgba(15, 104, 211, 0.7);
}

/* line 655, app/assets/stylesheets/partials/_header.scss */
.account-menu__chevron {
  display: flex;
  color: rgba(22, 22, 22, 0.6);
  transition: transform 200ms ease, color 160ms ease;
}

/* line 660, app/assets/stylesheets/partials/_header.scss */
.account-menu__chevron svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* line 666, app/assets/stylesheets/partials/_header.scss */
.account-menu[open] .account-menu__chevron {
  transform: rotate(180deg);
  color: #161616;
}

/* line 671, app/assets/stylesheets/partials/_header.scss */
.account-menu__avatar {
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(22, 22, 22, 0.08);
}

/* line 679, app/assets/stylesheets/partials/_header.scss */
.account-menu__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 686, app/assets/stylesheets/partials/_header.scss */
.account-menu__avatar--lg {
  width: 2.85rem;
  height: 2.85rem;
}

/* line 692, app/assets/stylesheets/partials/_header.scss */
.account-menu__panel {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  z-index: 1000;
  display: flex;
  flex-flow: column;
  width: 17.5rem;
  padding: 0.5rem;
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: 0 24px 54px rgba(3, 7, 18, 0.24), 0 6px 16px rgba(3, 7, 18, 0.1);
  color: #161616;
  transform-origin: top right;
  animation: account-menu-in 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* line 711, app/assets/stylesheets/partials/_header.scss */
.account-menu__identity {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.65rem;
  border-radius: 0.5rem;
  color: #161616;
  text-decoration: none;
  transition: background 140ms ease;
}

/* line 721, app/assets/stylesheets/partials/_header.scss */
.account-menu__identity:hover, .account-menu__identity:focus-visible {
  background: rgba(22, 22, 22, 0.05);
  color: #161616;
  outline: none;
  text-decoration: none;
}

/* line 730, app/assets/stylesheets/partials/_header.scss */
.account-menu__identity-text {
  display: flex;
  flex-flow: column;
  gap: 0.05rem;
  min-width: 0;
}

/* line 737, app/assets/stylesheets/partials/_header.scss */
.account-menu__name {
  overflow: hidden;
  color: #161616;
  font-size: 0.97rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* line 748, app/assets/stylesheets/partials/_header.scss */
.account-menu__view {
  color: rgba(22, 22, 22, 0.5);
  font-size: 0.78rem;
  font-weight: 500;
}

/* line 754, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-form {
  margin: 0.3rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* line 761, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect {
  display: grid;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0.72rem;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.1), 0 10px 24px rgba(15, 23, 42, 0.07);
  color: #161616;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  text-align: left;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

/* line 783, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect:hover, .account-menu__connect:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.24), 0 12px 26px rgba(15, 104, 211, 0.1);
  outline: none;
  transform: translateY(-1px);
}

/* line 793, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.68rem;
  background: rgba(22, 22, 22, 0.06);
}

/* line 802, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-icon img {
  width: 1.15rem;
  height: 1.15rem;
}

/* line 808, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-copy {
  display: flex;
  flex-flow: column;
  min-width: 0;
  gap: 0.08rem;
  line-height: 1.12;
}

/* line 816, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-label {
  overflow: hidden;
  color: #161616;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 826, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-value {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 836, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  transition: background 150ms ease, transform 150ms ease;
}

/* line 847, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect-arrow svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* line 853, app/assets/stylesheets/partials/_header.scss */
.account-menu__connect:hover .account-menu__connect-arrow, .account-menu__connect:focus-visible .account-menu__connect-arrow {
  background: rgba(15, 104, 211, 0.16);
  transform: translateX(2px);
}

/* line 859, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  margin: 0.3rem 0;
  padding: 0.68rem 0.72rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.12), rgba(255, 255, 255, 0.96) 58%, rgba(22, 22, 22, 0.035)), #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.16), 0 10px 24px rgba(15, 104, 211, 0.08);
  color: #161616;
  text-decoration: none;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

/* line 877, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium:hover, .account-menu__premium:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.34), 0 12px 26px rgba(15, 104, 211, 0.12);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
  text-decoration: none;
}

/* line 889, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium-text {
  display: flex;
  flex-flow: column;
  min-width: 0;
  gap: 0.08rem;
  line-height: 1.12;
}

/* line 897, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium-label {
  overflow: hidden;
  color: #161616;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 907, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium-value {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 917, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  transition: background 150ms ease, transform 150ms ease;
}

/* line 928, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium-arrow svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* line 934, app/assets/stylesheets/partials/_header.scss */
.account-menu__premium:hover .account-menu__premium-arrow, .account-menu__premium:focus-visible .account-menu__premium-arrow {
  background: rgba(15, 104, 211, 0.16);
  transform: translateX(2px);
}

/* line 940, app/assets/stylesheets/partials/_header.scss */
.account-menu__group {
  display: flex;
  flex-flow: column;
}

/* line 945, app/assets/stylesheets/partials/_header.scss */
.account-menu__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  color: rgba(22, 22, 22, 0.86);
  font-size: 0.91rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

/* line 957, app/assets/stylesheets/partials/_header.scss */
.account-menu__item:hover, .account-menu__item:focus-visible {
  background: rgba(22, 22, 22, 0.05);
  color: #161616;
  outline: none;
  text-decoration: none;
}

/* line 965, app/assets/stylesheets/partials/_header.scss */
.account-menu__item--danger {
  color: #d4344a;
}

/* line 968, app/assets/stylesheets/partials/_header.scss */
.account-menu__item--danger:hover, .account-menu__item--danger:focus-visible {
  background: rgba(212, 52, 74, 0.08);
  color: #d4344a;
}

/* line 976, app/assets/stylesheets/partials/_header.scss */
.account-menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border-radius: 0.6rem;
  background: rgba(22, 22, 22, 0.06);
  color: rgba(22, 22, 22, 0.7);
  transition: background 140ms ease, color 140ms ease;
}

/* line 988, app/assets/stylesheets/partials/_header.scss */
.account-menu__item-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 994, app/assets/stylesheets/partials/_header.scss */
.account-menu__item:hover .account-menu__item-icon, .account-menu__item:focus-visible .account-menu__item-icon {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1000, app/assets/stylesheets/partials/_header.scss */
.account-menu__item-copy {
  display: flex;
  flex-flow: column;
  gap: 0.12rem;
  min-width: 0;
}

/* line 1007, app/assets/stylesheets/partials/_header.scss */
.account-menu__item-meta {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.5);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1017, app/assets/stylesheets/partials/_header.scss */
.account-menu__item--danger .account-menu__item-icon {
  background: rgba(212, 52, 74, 0.1);
  color: #d4344a;
}

/* line 1022, app/assets/stylesheets/partials/_header.scss */
.account-menu__item--danger:hover .account-menu__item-icon, .account-menu__item--danger:focus-visible .account-menu__item-icon {
  background: rgba(212, 52, 74, 0.16);
  color: #d4344a;
}

/* line 1028, app/assets/stylesheets/partials/_header.scss */
.account-menu__divider {
  height: 1px;
  margin: 0.35rem 0.4rem;
  background: rgba(22, 22, 22, 0.08);
}

@keyframes account-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* line 1047, app/assets/stylesheets/partials/_header.scss */
.mobile-nav {
  display: none;
}

/* line 1051, app/assets/stylesheets/partials/_header.scss */
body.mobile-nav-open {
  overflow: hidden;
}

/* line 1054, app/assets/stylesheets/partials/_header.scss */
body.mobile-nav-open .main-nav__menu-button {
  opacity: 0.34;
  transform: none;
  pointer-events: none;
  color: rgba(22, 22, 22, 0.46);
}

@media only screen and (max-width: 64rem) {
  /* line 1063, app/assets/stylesheets/partials/_header.scss */
  .header {
    height: 4.25rem;
  }
  @supports (position: sticky) {
    /* line 1063, app/assets/stylesheets/partials/_header.scss */
    .header {
      position: sticky;
      top: 0;
      background-color: rgba(255, 255, 255, 0.96);
      box-shadow: 0 1px 0 rgba(22, 22, 22, 0.08), 0 0.35rem 0.9rem rgba(22, 22, 22, 0.04);
    }
  }
  /* line 1074, app/assets/stylesheets/partials/_header.scss */
  .main-nav {
    gap: 0.9rem;
    padding: 0.65rem 1rem;
    justify-content: space-between;
  }
  /* line 1079, app/assets/stylesheets/partials/_header.scss */
  .main-nav__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    margin-right: 0;
    transform: translate(-50%, -50%);
  }
  /* line 1087, app/assets/stylesheets/partials/_header.scss */
  .main-nav__logo svg {
    height: 1.8rem;
  }
  /* line 1092, app/assets/stylesheets/partials/_header.scss */
  .main-nav__navigation, .main-nav__buttons {
    display: none;
  }
  /* line 1097, app/assets/stylesheets/partials/_header.scss */
  .main-nav__mobile-actions {
    display: flex;
  }
  /* line 1101, app/assets/stylesheets/partials/_header.scss */
  .main-nav__menu-button {
    display: inline-flex;
  }
  /* line 1106, app/assets/stylesheets/partials/_header.scss */
  .main-nav__pfp .sign-in {
    min-height: 2.45rem;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    font-size: 0.88rem;
  }
  /* line 1115, app/assets/stylesheets/partials/_header.scss */
  .main-nav__mobile-account-button--signin {
    padding: 0.6em 1.5em;
    font-size: 1rem;
  }
  /* line 1120, app/assets/stylesheets/partials/_header.scss */
  .main-nav__mobile-account-button--avatar {
    width: 2.45rem;
    height: 2.45rem;
  }
  /* line 1127, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
    pointer-events: none;
  }
  /* line 1134, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav[hidden] {
    display: none;
  }
  /* line 1138, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav.is-open {
    pointer-events: auto;
  }
  /* line 1141, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav.is-open .mobile-nav__backdrop {
    opacity: 1;
  }
  /* line 1145, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav.is-open .mobile-nav__sheet {
    transform: translateY(0);
  }
  /* line 1150, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 21, 0.58);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  /* line 1158, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-flow: column;
    gap: 1.3rem;
    max-height: calc(100vh - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    padding: 1.1rem 1rem 1.4rem;
    border-radius: 1.8rem 1.8rem 0 0;
    background: radial-gradient(600px 180px at 0% 0%, rgba(15, 104, 211, 0.08) 0%, rgba(15, 104, 211, 0) 64%), linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(250, 251, 255, 0.99));
    box-shadow: 0 -30px 70px rgba(3, 7, 18, 0.22), 0 -10px 24px rgba(3, 7, 18, 0.08);
    color: #161616;
    transform: translateY(100%);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* line 1182, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.15rem;
  }
  /* line 1190, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__switcher {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    width: 15rem;
    max-width: 100%;
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(22, 22, 22, 0.05);
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08);
  }
  /* line 1202, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__switcher-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.65rem 0.95rem;
    border-radius: 999px;
    color: rgba(22, 22, 22, 0.58);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
  }
  /* line 1215, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__switcher-button.is-active {
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    color: #161616;
  }
  /* line 1222, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__close {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(22, 22, 22, 0.1);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(22, 22, 22, 0.62);
    font-size: 0;
    cursor: pointer;
    line-height: 1;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
  /* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
  .mobile-nav__close svg {
    width: 1rem;
    height: 1rem;
  }
  /* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
  .mobile-nav__close:hover, .mobile-nav__close:focus-visible, .mobile-nav__close:active {
    background: rgba(15, 104, 211, 0.09);
    color: #161616;
    outline: none;
    transform: translateY(-1px);
  }
  /* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
  .mobile-nav__close:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
  }
  /* line 1226, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__section {
    display: flex;
    flex-flow: column;
    gap: 0.8rem;
  }
  /* line 1231, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__section[hidden] {
    display: none;
  }
  /* line 1236, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
  /* line 1242, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__card {
    display: flex;
    flex-flow: column;
    gap: 0.38rem;
    min-height: 6.3rem;
    padding: 1rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08), 0 14px 32px rgba(15, 23, 42, 0.06);
    color: #161616;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  /* line 1257, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__card:hover, .mobile-nav__card:focus-visible, .mobile-nav__card:active {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12), 0 18px 32px rgba(15, 23, 42, 0.08);
    text-decoration: none;
  }
  /* line 1267, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__card--active {
    background: linear-gradient(180deg, rgba(15, 104, 211, 0.14), rgba(15, 104, 211, 0.08));
    box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.18), 0 18px 34px rgba(15, 104, 211, 0.14);
  }
  /* line 1275, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__card-title {
    color: #161616;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
  }
  /* line 1283, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__card-copy {
    color: rgba(22, 22, 22, 0.66);
    font-size: 0.83rem;
    line-height: 1.45;
    text-wrap: balance;
  }
  /* line 1290, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account {
    display: flex;
    flex-flow: column;
    gap: 0.75rem;
  }
  /* line 1296, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-header {
    display: flex;
    flex-flow: column;
    gap: 0.28rem;
    padding: 0.2rem 0.1rem 0.15rem;
  }
  /* line 1303, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 5.25rem;
    padding: 0.85rem;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08), 0 16px 34px rgba(15, 23, 42, 0.07);
    color: #161616;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  /* line 1318, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-profile:hover, .mobile-nav__account-profile:focus-visible, .mobile-nav__account-profile:active {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12), 0 18px 34px rgba(15, 23, 42, 0.09);
    text-decoration: none;
  }
  /* line 1329, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-avatar {
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(22, 22, 22, 0.06);
  }
  /* line 1337, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* line 1345, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-identity {
    display: flex;
    flex-flow: column;
    gap: 0.12rem;
    min-width: 0;
  }
  /* line 1352, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-kicker {
    color: rgba(22, 22, 22, 0.52);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-transform: uppercase;
  }
  /* line 1361, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-name {
    overflow: hidden;
    color: #161616;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1372, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-action {
    color: rgba(22, 22, 22, 0.55);
    font-size: 0.82rem;
    font-weight: 600;
  }
  /* line 1378, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-copy {
    margin: 0;
    color: rgba(22, 22, 22, 0.72);
    font-size: 0.9rem;
    line-height: 1.55;
  }
  /* line 1385, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-form {
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* line 1392, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect {
    display: grid;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.15rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08), 0 14px 30px rgba(15, 23, 42, 0.06);
    color: #161616;
    cursor: pointer;
    font: inherit;
    min-width: 0;
    text-align: left;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  /* line 1415, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect:hover, .mobile-nav__account-connect:focus-visible, .mobile-nav__account-connect:active {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12), 0 18px 32px rgba(15, 23, 42, 0.08);
    outline: none;
  }
  /* line 1426, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.74rem;
    background: rgba(22, 22, 22, 0.06);
  }
  /* line 1435, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-icon img {
    width: 1.25rem;
    height: 1.25rem;
  }
  /* line 1441, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-copy {
    display: flex;
    flex-flow: column;
    gap: 0.08rem;
    min-width: 0;
    line-height: 1.12;
  }
  /* line 1449, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-label {
    overflow: hidden;
    color: #161616;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1459, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-meta {
    overflow: hidden;
    color: rgba(22, 22, 22, 0.58);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1469, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(15, 104, 211, 0.1);
    color: #0f68d3;
    line-height: 1;
    transition: background 180ms ease, transform 180ms ease;
  }
  /* line 1481, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect-arrow svg {
    width: 0.98rem;
    height: 0.98rem;
  }
  /* line 1487, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-connect:hover .mobile-nav__account-connect-arrow, .mobile-nav__account-connect:focus-visible .mobile-nav__account-connect-arrow, .mobile-nav__account-connect:active .mobile-nav__account-connect-arrow {
    background: rgba(15, 104, 211, 0.16);
    transform: translateX(2px);
  }
  /* line 1494, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 4.35rem;
    padding: 0.75rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(15, 104, 211, 0.13), rgba(255, 255, 255, 0.96) 58%, rgba(22, 22, 22, 0.035)), #fff;
    box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.17), 0 16px 32px rgba(15, 104, 211, 0.1);
    color: #161616;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  /* line 1512, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium:hover, .mobile-nav__account-premium:focus-visible, .mobile-nav__account-premium:active {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.3), 0 18px 34px rgba(15, 104, 211, 0.14);
    text-decoration: none;
  }
  /* line 1523, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  /* line 1529, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile-icon svg {
    width: 1.08rem;
    height: 1.08rem;
  }
  /* line 1535, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium-text {
    display: flex;
    flex-flow: column;
    gap: 0.08rem;
    min-width: 0;
    line-height: 1.1;
  }
  /* line 1543, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium-label {
    overflow: hidden;
    color: #161616;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1553, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium-value {
    overflow: hidden;
    color: rgba(22, 22, 22, 0.58);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* line 1563, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(15, 104, 211, 0.1);
    color: #0f68d3;
    line-height: 1;
    transition: background 180ms ease, transform 180ms ease;
  }
  /* line 1575, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium-arrow svg {
    width: 0.98rem;
    height: 0.98rem;
  }
  /* line 1581, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-premium:hover .mobile-nav__account-premium-arrow, .mobile-nav__account-premium:focus-visible .mobile-nav__account-premium-arrow, .mobile-nav__account-premium:active .mobile-nav__account-premium-arrow {
    background: rgba(15, 104, 211, 0.16);
    transform: translateX(2px);
  }
  /* line 1588, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
  /* line 1594, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile {
    display: flex;
    min-height: 6.2rem;
    flex-flow: column;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 1.05rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08), 0 14px 30px rgba(15, 23, 42, 0.06);
    color: rgba(22, 22, 22, 0.88);
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease;
  }
  /* line 1610, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile:hover, .mobile-nav__account-tile:focus-visible, .mobile-nav__account-tile:active {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12), 0 18px 32px rgba(15, 23, 42, 0.08);
    color: #161616;
    text-decoration: none;
  }
  /* line 1621, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile--danger {
    color: #c73a4d;
  }
  /* line 1624, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile--danger .mobile-nav__account-tile-icon {
    background: rgba(199, 58, 77, 0.1);
    color: #c73a4d;
  }
  /* line 1629, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile--danger:hover, .mobile-nav__account-tile--danger:focus-visible, .mobile-nav__account-tile--danger:active {
    box-shadow: inset 0 0 0 1px rgba(199, 58, 77, 0.18), 0 18px 32px rgba(199, 58, 77, 0.08);
    color: #c73a4d;
  }
  /* line 1640, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile-icon {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.66rem;
    background: rgba(22, 22, 22, 0.06);
    color: rgba(22, 22, 22, 0.72);
    transition: background 180ms ease, color 180ms ease;
  }
  /* line 1649, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile:hover .mobile-nav__account-tile-icon, .mobile-nav__account-tile:focus-visible .mobile-nav__account-tile-icon, .mobile-nav__account-tile:active .mobile-nav__account-tile-icon {
    background: rgba(15, 104, 211, 0.12);
    color: #0f68d3;
  }
  /* line 1656, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile--danger:hover .mobile-nav__account-tile-icon, .mobile-nav__account-tile--danger:focus-visible .mobile-nav__account-tile-icon, .mobile-nav__account-tile--danger:active .mobile-nav__account-tile-icon {
    background: rgba(199, 58, 77, 0.16);
    color: #c73a4d;
  }
  /* line 1663, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile-title {
    color: inherit;
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }
  /* line 1671, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile-meta {
    color: rgba(22, 22, 22, 0.5);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.16;
  }
  /* line 1678, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__community {
    padding-top: 0.1rem;
  }
  /* line 1682, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__discord-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: #5865f2;
    box-shadow: 0 16px 28px rgba(88, 101, 242, 0.2);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }
  /* line 1698, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__discord-cta svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }
  /* line 1703, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__discord-cta svg path {
    fill: #fff;
  }
  /* line 1708, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__discord-cta:hover, .mobile-nav__discord-cta:focus-visible, .mobile-nav__discord-cta:active {
    background: #5562eb;
    box-shadow: 0 18px 30px rgba(88, 101, 242, 0.24);
    transform: translateY(-1px);
    text-decoration: none;
  }
  /* line 1718, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list {
    display: flex;
    flex-flow: column;
    gap: 0.55rem;
  }
  /* line 1724, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.08);
    color: #161616;
    font-size: 0.94rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  /* line 1739, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link:hover, .mobile-nav__list-link:focus-visible, .mobile-nav__list-link:active {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.12), 0 14px 28px rgba(15, 23, 42, 0.06);
    text-decoration: none;
  }
  /* line 1749, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link--primary {
    background: rgba(15, 104, 211, 0.08);
    box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.14);
    color: #161616;
  }
  /* line 1754, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link--primary .mobile-nav__list-arrow {
    color: rgba(15, 104, 211, 0.82);
  }
  /* line 1759, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link--muted {
    color: rgba(22, 22, 22, 0.72);
  }
  /* line 1763, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link--danger {
    color: #c73a4d;
  }
  /* line 1766, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link--danger .mobile-nav__list-arrow {
    color: rgba(199, 58, 77, 0.72);
  }
  /* line 1770, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-link--danger:hover, .mobile-nav__list-link--danger:focus-visible, .mobile-nav__list-link--danger:active {
    box-shadow: inset 0 0 0 1px rgba(199, 58, 77, 0.18), 0 14px 28px rgba(199, 58, 77, 0.08);
  }
  /* line 1780, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__list-arrow {
    color: rgba(22, 22, 22, 0.42);
    font-size: 1rem;
  }
}

@media only screen and (max-width: 40rem) {
  /* line 1789, app/assets/stylesheets/partials/_header.scss */
  .main-nav {
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
  }
  /* line 1794, app/assets/stylesheets/partials/_header.scss */
  .main-nav__logo svg {
    height: 1.58rem;
  }
  /* line 1799, app/assets/stylesheets/partials/_header.scss */
  .main-nav__mobile-actions {
    gap: 0.5rem;
  }
  /* line 1803, app/assets/stylesheets/partials/_header.scss */
  .main-nav__menu-button {
    width: 2.75rem;
    height: 2.1rem;
  }
  /* line 1809, app/assets/stylesheets/partials/_header.scss */
  .main-nav__pfp .sign-in {
    min-height: 2.3rem;
    padding: 0.66rem 0.82rem;
    font-size: 0.84rem;
  }
  /* line 1817, app/assets/stylesheets/partials/_header.scss */
  .main-nav__mobile-account-button--signin {
    padding: 0.6em 1.2em;
    font-size: 0.84rem;
  }
  /* line 1822, app/assets/stylesheets/partials/_header.scss */
  .main-nav__mobile-account-button--avatar {
    width: 2.3rem;
    height: 2.3rem;
  }
  /* line 1830, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__sheet {
    gap: 1.1rem;
    max-height: calc(100vh - 0.5rem);
    max-height: calc(100dvh - 0.5rem);
    padding-right: 0.9rem;
    padding-left: 0.9rem;
  }
  /* line 1838, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__switcher {
    width: 100%;
  }
  /* line 1842, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__grid {
    grid-template-columns: 1fr;
  }
  /* line 1846, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__card {
    min-height: 0;
  }
  /* line 1850, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account {
    gap: 0.65rem;
  }
  /* line 1854, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-profile, .mobile-nav__account-premium {
    border-radius: 1rem;
  }
  /* line 1859, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-avatar {
    width: 3rem;
    height: 3rem;
  }
  /* line 1864, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-name {
    font-size: 0.98rem;
  }
  /* line 1868, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-grid {
    gap: 0.6rem;
  }
  /* line 1872, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile {
    min-height: 5.85rem;
    padding: 0.78rem;
    border-radius: 0.95rem;
  }
  /* line 1878, app/assets/stylesheets/partials/_header.scss */
  .mobile-nav__account-tile-title {
    font-size: 0.86rem;
  }
}

/* line 1, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs {
  display: flex;
  justify-content: center;
  width: 100%;
  background: transparent;
}

/* line 7, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: 100rem;
  padding: 0.55rem 1rem 0.15rem;
  margin: 0;
  list-style: none;
  font-size: 0.78rem;
  box-sizing: content-box;
}

/* line 20, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs__item {
  display: flex;
  align-items: center;
}

/* line 25, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs__link {
  color: rgba(22, 22, 22, 0.55);
  text-decoration: none;
  transition: color 150ms ease;
}

/* line 30, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs__link:hover {
  color: #161616;
}

/* line 35, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs__current {
  color: rgba(22, 22, 22, 0.4);
  font-weight: 400;
}

/* line 40, app/assets/stylesheets/partials/_breadcrumbs.scss */
.breadcrumbs__separator {
  margin: 0 0.45rem;
  color: rgba(22, 22, 22, 0.3);
  font-size: 0.78rem;
  line-height: 1;
}

/* line 1, app/assets/stylesheets/partials/_footer.scss */
.site-footer {
  position: relative;
  margin-top: auto;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.96) 0%, #161616 55%, rgba(0, 0, 0, 0.98) 100%);
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

/* line 14, app/assets/stylesheets/partials/_footer.scss */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 260px at 12% 18%, rgba(15, 104, 211, 0.22) 0%, rgba(15, 104, 211, 0) 62%), radial-gradient(700px 220px at 85% 28%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(900px 320px at 65% 120%, rgba(15, 104, 211, 0.12) 0%, rgba(15, 104, 211, 0) 60%);
  pointer-events: none;
  opacity: 0.9;
}

/* line 26, app/assets/stylesheets/partials/_footer.scss */
.site-footer__inner {
  position: relative;
  padding: 3.5rem 1rem 0 1rem;
  box-sizing: content-box;
}

/* line 33, app/assets/stylesheets/partials/_footer.scss */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-bottom: 3rem;
}

/* line 42, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand {
  display: flex;
  flex-flow: column;
  gap: 1.1rem;
  max-width: 22rem;
}

/* line 49, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 0.75rem;
  padding: 0.25rem 0.25rem 0.25rem 0;
  transition: 160ms ease-in-out;
}

/* line 57, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand-link:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* line 62, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand-link:active {
  transform: translateY(0);
}

/* line 66, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand-link:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 4px;
}

/* line 72, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand-logo {
  height: 2.25rem;
  width: auto;
  display: block;
  color: #fff;
}

/* line 79, app/assets/stylesheets/partials/_footer.scss */
.site-footer__brand-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
}

/* line 85, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social {
  display: flex;
  flex-flow: column;
  gap: 0.65rem;
  margin-top: 0.25rem;
}

/* line 92, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* line 100, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-list {
  display: flex;
  flex-flow: row wrap;
  gap: 0.6rem;
}

/* line 106, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-item {
  display: flex;
}

/* line 110, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: 160ms ease-in-out;
}

/* line 121, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-link:hover {
  transform: translateY(-2px);
  background: rgba(15, 104, 211, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* line 129, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-link:active {
  transform: translateY(0);
}

/* line 133, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-link:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 3px;
}

/* line 139, app/assets/stylesheets/partials/_footer.scss */
.site-footer__social-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* line 146, app/assets/stylesheets/partials/_footer.scss */
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
}

/* line 152, app/assets/stylesheets/partials/_footer.scss */
.site-footer__col {
  display: flex;
  flex-flow: column;
  min-width: 0;
}

/* line 158, app/assets/stylesheets/partials/_footer.scss */
.site-footer__col-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.1rem;
}

/* line 168, app/assets/stylesheets/partials/_footer.scss */
.site-footer__link-list {
  display: flex;
  flex-flow: column;
  gap: 0.2rem;
}

/* line 174, app/assets/stylesheets/partials/_footer.scss */
.site-footer__link-item {
  display: flex;
}

/* line 178, app/assets/stylesheets/partials/_footer.scss */
.site-footer__link {
  position: relative;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  line-height: 1.35;
  transition: 160ms ease-in-out;
  border-radius: 0.35rem;
}

/* line 192, app/assets/stylesheets/partials/_footer.scss */
.site-footer__link:hover {
  color: #fff;
  text-decoration: none;
  transform: translateX(3px);
}

/* line 198, app/assets/stylesheets/partials/_footer.scss */
.site-footer__link:active {
  transform: translateX(1px);
}

/* line 202, app/assets/stylesheets/partials/_footer.scss */
.site-footer__link:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 3px;
}

/* line 209, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0 1.5rem 0;
}

/* line 215, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 0 1rem;
  box-sizing: content-box;
}

/* line 225, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom-links {
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem 1.25rem;
}

/* line 231, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom-link {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-radius: 0.35rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  transition: 160ms ease-in-out;
}

/* line 239, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom-link:hover {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

/* line 244, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom-link:active {
  transform: translateY(1px);
}

/* line 248, app/assets/stylesheets/partials/_footer.scss */
.site-footer__bottom-link:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 3px;
}

/* line 254, app/assets/stylesheets/partials/_footer.scss */
.site-footer__copyright {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.875rem;
  line-height: 1.25;
}

/* line 264, app/assets/stylesheets/partials/_footer.scss */
.site-footer__copyright-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  display: inline-block;
}

/* line 272, app/assets/stylesheets/partials/_footer.scss */
.site-footer__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* line 285, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: calc(100vw - 2rem);
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
  background: rgba(16, 19, 35, 0.94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26);
  color: #fff;
}

/* line 301, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__body {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.1rem 0.45rem;
  align-items: center;
  min-width: 0;
}

/* line 309, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__eyebrow {
  align-self: center;
  padding: 0.1rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(15, 104, 211, 0.22);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

/* line 321, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__label {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* line 329, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__status {
  grid-column: 2;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
}

/* line 336, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__status--on {
  color: #80e09d;
}

/* line 340, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__status--off {
  color: #ffcf70;
}

/* line 345, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
  color: #12131a;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: 150ms ease-in-out;
}

/* line 359, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.9);
}

/* line 364, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__button:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 3px;
}

/* line 370, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__country {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* line 377, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__country-label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
}

/* line 384, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__select {
  min-height: 2rem;
  max-width: 12rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

/* line 395, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__select:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 3px;
}

/* line 400, app/assets/stylesheets/partials/_footer.scss */
.dev-external-scripts__select option {
  color: #12131a;
}

@media (max-width: 520px) {
  /* line 407, app/assets/stylesheets/partials/_footer.scss */
  .dev-external-scripts {
    right: 0.75rem;
    bottom: 0.75rem;
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 64rem) {
  /* line 417, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__inner {
    padding-top: 3rem;
  }
  /* line 421, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
  }
  /* line 427, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__brand {
    max-width: 36rem;
  }
}

@media only screen and (max-width: 48rem) {
  /* line 436, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 446, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__inner {
    padding-top: 2.5rem;
  }
  /* line 450, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__top {
    gap: 2rem;
    padding-bottom: 2rem;
  }
  /* line 455, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__links {
    gap: 1.75rem 1.25rem;
  }
  /* line 459, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__bottom-inner {
    flex-flow: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media only screen and (max-width: 24rem) {
  /* line 470, app/assets/stylesheets/partials/_footer.scss */
  .site-footer__links {
    grid-template-columns: 1fr;
  }
}

/* line 1, app/assets/stylesheets/partials/_social-media.scss */
.social-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* line 8, app/assets/stylesheets/partials/_social-media.scss */
.social-media__item {
  height: 100%;
}

/* line 10, app/assets/stylesheets/partials/_social-media.scss */
.social-media__item a {
  transition: 200ms ease-in-out;
  width: 100%;
}

/* line 14, app/assets/stylesheets/partials/_social-media.scss */
.social-media__item a img {
  width: 2em;
}

/* line 18, app/assets/stylesheets/partials/_social-media.scss */
.social-media__item a:hover {
  opacity: .8;
}

/* line 24, app/assets/stylesheets/partials/_social-media.scss */
.social-media__nav-item {
  height: 100%;
  padding: .8em 0;
  width: 100%;
}

/* line 29, app/assets/stylesheets/partials/_social-media.scss */
.social-media__nav-item a {
  display: flex;
  transition: 200ms ease-in-out;
  width: 100%;
}

/* line 34, app/assets/stylesheets/partials/_social-media.scss */
.social-media__nav-item a img, .social-media__nav-item a svg {
  width: 1.125em;
  height: 1.25rem;
  fill: #161616;
}

/* line 40, app/assets/stylesheets/partials/_social-media.scss */
.social-media__nav-item a:hover {
  opacity: .8;
}

/* line 2, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content {
  --emote-grid-min-column-width-rem: 9.5rem;
  position: relative;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: minmax(9.5rem, auto);
}

/* line 12, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--preview {
  align-content: start;
}

/* line 16, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers {
  --emote-grid-min-column-width-rem: 18rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  grid-auto-rows: minmax(16rem, auto);
}

/* line 22, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .emote-item {
  padding: 1rem 0.9rem;
}

/* line 26, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .emote-item__image,
.emote-item-list__content--stickers .emote-item__image img,
.emote-item-list__content--stickers .emote-item__icon,
.emote-item-list__content--stickers .emote-item__icon svg {
  max-height: 9rem;
  max-width: 9rem;
  height: 9rem;
  width: 9rem;
}

/* line 36, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .emote-item__code {
  font-size: 1rem;
}

/* line 40, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .emote-item__author {
  font-size: 0.875rem;
}

/* line 44, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion {
  grid-column: span 1;
  grid-row: span 1;
  grid-template-rows: 5.8rem minmax(0, 1fr);
  height: 16rem;
  min-height: 0;
}

/* line 52, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__icon-wrap {
  min-height: 5.8rem;
}

/* line 56, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion--banner .discord-server-promotion__icon-wrap {
  left: 0.75rem;
  bottom: -1.5rem;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 1rem;
}

/* line 64, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__icon {
  width: 3.6rem;
  height: 3.6rem;
  border-width: 2px;
  border-radius: 0.9rem;
}

/* line 71, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion--banner .discord-server-promotion__icon {
  width: 3.4rem;
  height: 3.4rem;
  border-width: 0;
  border-radius: 0.86rem;
}

/* line 78, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__body {
  gap: 0.25rem;
  padding: 0.7rem;
}

/* line 83, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__body {
  padding-top: 2rem;
}

/* line 87, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__sponsor {
  top: 0.45rem;
  right: 0.45rem;
  left: 0.45rem;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.32rem;
  padding: 0.28rem 0.34rem;
}

/* line 96, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__sponsor-avatar {
  width: 1.55rem;
  height: 1.55rem;
}

/* line 101, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__sponsor-name {
  font-size: 0.62rem;
}

/* line 105, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__sponsor-badge {
  padding: 0.16rem 0.34rem;
  font-size: 0.46rem;
}

/* line 110, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__eyebrow {
  font-size: 0.58rem;
}

/* line 114, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__name {
  font-size: 0.95rem;
}

/* line 118, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__description {
  -webkit-line-clamp: 1;
  font-size: 0.72rem;
}

/* line 123, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__meta {
  gap: 0.25rem;
}

/* line 127, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__meta {
  left: 5rem;
}

/* line 131, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__meta span {
  padding: 0.22rem 0.35rem;
  font-size: 0.58rem;
}

/* line 136, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__cta {
  min-height: 1.95rem;
  padding: 0.48rem 0.6rem;
  font-size: 0.74rem;
}

/* line 142, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-server-promotion__cta-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* line 147, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion {
  grid-column: span 1;
  grid-row: span 1;
  grid-template-rows: 5.8rem minmax(0, 1fr);
  height: 18rem;
  min-height: 0;
}

/* line 155, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__body {
  gap: 0.25rem;
  padding: 0.7rem;
}

/* line 160, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__avatar-wrap {
  left: 0.75rem;
  bottom: -1.5rem;
  width: 3.8rem;
  height: 3.8rem;
}

/* line 167, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__avatar {
  width: 3.45rem;
  height: 3.45rem;
}

/* line 172, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__sponsor {
  top: 0.45rem;
  right: 4.5rem;
  left: 0.45rem;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.32rem;
  padding: 0.28rem 0.34rem;
}

/* line 181, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__sponsor-avatar {
  width: 1.55rem;
  height: 1.55rem;
}

/* line 186, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__sponsor-name {
  font-size: 0.62rem;
}

/* line 190, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__sponsor-badge {
  padding: 0.16rem 0.34rem;
  font-size: 0.46rem;
}

/* line 195, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__name {
  font-size: 0.95rem;
}

/* line 199, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__title {
  -webkit-line-clamp: 1;
  font-size: 0.72rem;
}

/* line 204, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__meta span {
  padding: 0.22rem 0.35rem;
  font-size: 0.58rem;
}

/* line 209, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .twitch-channel-promotion__cta {
  min-height: 1.95rem;
  padding: 0.48rem 0.6rem;
  font-size: 0.74rem;
}

/* line 217, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__batch {
  display: contents;
}

/* line 221, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content > .mv-ad-box, .emote-item-list__content > .adunit, .emote-item-list__batch > .mv-ad-box, .emote-item-list__batch > .adunit {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 100%;
}

/* line 231, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content > .mv-ad-box, .emote-item-list__batch > .mv-ad-box {
  justify-content: center;
}

/* line 236, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

/* line 243, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list-count {
  font-weight: 500;
  opacity: .5;
}

/* line 249, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card {
  position: relative;
  min-width: 0;
}

/* line 253, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__label {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 4;
  padding: 0.28rem 0.5rem;
  border-radius: 0.35rem;
  background: #0f68d3;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(15, 104, 211, 0.28);
  pointer-events: none;
}

/* line 271, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__pin {
  min-width: 0;
}

/* line 274, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__pin .emote-item {
  height: 100%;
  outline: 2px solid rgba(15, 104, 211, 0.45);
  outline-offset: 2px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(15, 104, 211, 0.16);
}

/* line 282, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__pin .emote-item__quick-action:not(.emote-item__quick-action--admin-block) {
  display: none;
}

/* line 287, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__remove {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(22, 22, 22, 0.78);
  box-shadow: 0 8px 18px rgba(22, 22, 22, 0.16);
  transition: opacity 150ms ease, transform 150ms ease, color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

/* line 305, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__remove:hover, .similar-filter-card__remove:focus-visible {
  color: #0f68d3;
  border-color: rgba(15, 104, 211, 0.24);
  background: #fff;
  outline: none;
}

/* line 313, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__remove:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.16), 0 8px 18px rgba(22, 22, 22, 0.16);
}

/* line 317, app/assets/stylesheets/partials/_emote-item.scss */
.similar-filter-card__remove svg {
  width: 1.22rem;
  height: 1.22rem;
}

/* line 324, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner {
  --discord-sync-banner-column-span: 3;
  display: grid;
  grid-column: span 3;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 0.85rem 2.75rem 0.85rem 0.85rem;
  border: 1px solid rgba(88, 101, 242, 0.24);
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 22, 22, 0.12);
}

/* line 343, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner[hidden] {
  display: none !important;
}

/* line 347, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 0.5rem;
  background: #fff;
  color: rgba(22, 22, 22, 0.55);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 365, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__close:hover, .discord-sync-banner__close:focus-visible {
  border-color: rgba(88, 101, 242, 0.28);
  color: #5865F2;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14);
  outline: none;
}

/* line 373, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 379, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.55rem;
  background: #5865F2;
  color: #fff;
}

/* line 391, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* line 397, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

/* line 404, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__copy strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #161616;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
}

/* line 413, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__copy span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(22, 22, 22, 0.66);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

/* line 422, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.55rem 0.8rem;
  border: 0;
  border-radius: 0.5rem;
  background: #5865F2;
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* line 443, app/assets/stylesheets/partials/_emote-item.scss */
.discord-sync-banner__button:hover, .discord-sync-banner__button:focus-visible {
  background: #3746ef;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
  outline: none;
}

/* line 452, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats {
  position: relative;
  container: promotion-stats / inline-size;
  display: grid;
  grid-column: 1 / -1;
  gap: 1rem;
  min-width: 0;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: 0.85rem;
  background: radial-gradient(circle at 8% 0, rgba(15, 104, 211, 0.16), transparent 18rem), linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244, 247, 255, 0.98));
  box-shadow: 0 14px 34px rgba(22, 22, 22, 0.11);
  color: #161616;
}

/* line 469, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

/* line 476, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__heading {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

/* line 481, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__heading h3,
.promotion-stats__heading p {
  margin: 0;
}

/* line 486, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__heading h3 {
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1.15;
}

/* line 492, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__heading p {
  color: rgba(22, 22, 22, 0.64);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

/* line 500, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__eyebrow {
  color: #0f68d3;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* line 508, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__header-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex: 0 0 auto;
}

/* line 515, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__active-count {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.4rem 0.62rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.09);
  color: #0c51a3;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

/* line 528, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__settings {
  min-height: 2.35rem;
  white-space: nowrap;
}

/* line 533, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platforms {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* line 539, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  opacity: 0.68;
  padding: 0.8rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.8);
  transition: opacity 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* line 550, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform.is-active {
  opacity: 1;
  border-color: rgba(15, 104, 211, 0.24);
  background: rgba(15, 104, 211, 0.055);
}

/* line 557, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-head, .promotion-stats__platform-identity, .promotion-stats__platform-values {
  display: flex;
  align-items: center;
}

/* line 564, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-head {
  gap: 0.65rem;
  justify-content: space-between;
  min-width: 0;
}

/* line 570, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-identity {
  gap: 0.62rem;
  min-width: 0;
}

/* line 574, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-identity img {
  height: 2.2rem;
  width: auto;
  object-fit: contain;
}

/* line 581, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-name {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  color: #161616;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 593, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-name.is-placeholder {
  color: rgba(22, 22, 22, 0.42);
  font-weight: 750;
}

/* line 599, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-slash {
  flex: 0 0 auto;
  margin-right: 0.08rem;
  color: #0f68d3;
  font-size: 1.08rem;
  font-weight: 950;
}

/* line 607, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform--discord .promotion-stats__platform-slash {
  color: #5865F2;
}

/* line 611, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform--twitch .promotion-stats__platform-slash {
  color: #6441a5;
}

/* line 615, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-name > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 620, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-status {
  flex: 0 0 auto;
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 628, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform.is-active .promotion-stats__platform-status {
  color: #0c55ad;
}

/* line 632, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-values {
  gap: 1rem;
}

/* line 635, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-values span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.16rem;
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.68rem;
  font-weight: 700;
}

/* line 645, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-values strong {
  margin-right: 0.16rem;
  color: #161616;
  font-size: 0.82rem;
  font-weight: 900;
}

/* line 653, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__platform-trend {
  padding: 0.22rem 0.38rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0c55ad;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
}

/* line 663, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid rgba(15, 104, 211, 0.2);
  border-radius: 0.72rem;
  background: rgba(15, 104, 211, 0.08);
}

/* line 673, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation[hidden] {
  display: none;
}

/* line 678, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation-icon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.62rem;
  background: #0f68d3;
  color: #fff;
}

/* line 687, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 693, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation-copy {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
}

/* line 698, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation-copy strong {
  font-size: 0.82rem;
  font-weight: 900;
}

/* line 703, app/assets/stylesheets/partials/_emote-item.scss */
.promotion-stats__activation-copy span {
  color: rgba(22, 22, 22, 0.62);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.35;
}

@container promotion-stats (max-width: 46rem) {
  /* line 714, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__header {
    display: grid;
  }
  /* line 718, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__header-actions {
    justify-content: space-between;
    width: 100%;
  }
  /* line 723, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platforms {
    grid-template-columns: minmax(0, 1fr);
  }
  /* line 727, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-values {
    justify-content: space-between;
  }
  /* line 731, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__activation {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* line 734, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__activation .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@container promotion-stats (max-width: 30rem) {
  /* line 743, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats {
    gap: 0.75rem;
    padding: 0.8rem;
  }
  /* line 747, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  /* line 752, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__active-count {
    justify-content: center;
    white-space: normal;
  }
  /* line 757, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__settings {
    width: 100%;
  }
  /* line 761, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  /* line 766, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-identity {
    gap: 0.5rem;
  }
  /* line 769, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-identity img {
    height: 1.8rem;
    max-width: 2.4rem;
  }
  /* line 775, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-name {
    font-size: 0.88rem;
  }
  /* line 779, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-status {
    max-width: 5.5rem;
    text-align: right;
    white-space: normal;
  }
  /* line 785, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  /* line 790, app/assets/stylesheets/partials/_emote-item.scss */
  .promotion-stats__platform-values > span:last-child {
    justify-content: flex-end;
    text-align: right;
  }
}

/* line 798, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion {
  position: relative;
  display: grid;
  grid-column: span 2;
  grid-row: span 2;
  grid-template-rows: 9.6rem minmax(0, 1fr);
  min-width: 0;
  height: calc((9.5rem * 2) + 1rem);
  min-height: calc((9.5rem * 2) + 1rem);
  overflow: hidden;
  border: 1px solid rgba(88, 101, 242, 0.22);
  border-radius: 0.7rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 255, 0.96)), #fff;
  box-shadow: 0 14px 30px rgba(22, 22, 22, 0.14);
  color: #161616;
  isolation: isolate;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* line 819, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion:hover, .discord-server-promotion:focus-visible {
  border-color: rgba(88, 101, 242, 0.42);
  box-shadow: 0 18px 36px rgba(22, 22, 22, 0.18);
  color: #161616;
  outline: none;
  text-decoration: none;
  transform: translateY(-1px);
}

/* line 829, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion.is-rotating {
  opacity: 0.35;
}

/* line 833, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner {
  grid-template-rows: 8rem minmax(0, 1fr);
}

/* line 837, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__invite-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
}

/* line 843, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__invite-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* line 852, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__invite-link:focus-visible {
  outline: 3px solid rgba(88, 101, 242, 0.36);
  outline-offset: -3px;
}

/* line 858, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__media {
  position: relative;
  min-height: 0;
  overflow: visible;
  background: radial-gradient(circle at 20% 0, rgba(88, 101, 242, 0.24), transparent 12rem), linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(88, 101, 242, 0.72));
}

/* line 867, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 874, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__icon-wrap {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 11rem;
}

/* line 881, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner .discord-server-promotion__icon-wrap {
  position: absolute;
  left: 1rem;
  bottom: -2.35rem;
  z-index: 2;
  width: 5.55rem;
  height: 5.55rem;
  min-height: 0;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.2);
}

/* line 894, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__icon {
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.55rem;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  object-fit: cover;
}

/* line 905, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner .discord-server-promotion__icon {
  width: 5.05rem;
  height: 5.05rem;
  border-width: 0;
  border-radius: 1.32rem;
  box-shadow: none;
}

/* line 913, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__body {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 0.35rem;
  align-content: end;
  min-width: 0;
  min-height: 0;
  padding: 0.95rem;
  overflow: hidden;
}

/* line 925, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner .discord-server-promotion__body {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

/* line 929, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__body {
  padding-top: 3rem;
}

/* line 933, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  left: 0.65rem;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
  padding: 0.35rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.72), rgba(88, 101, 242, 0.62)), rgba(22, 22, 22, 0.72);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

/* line 953, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor:hover, .discord-server-promotion__sponsor:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: none;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(15, 104, 211, 0.22);
}

/* line 964, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor-avatar {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.35rem 0.7rem rgba(0, 0, 0, 0.22);
  object-fit: cover;
}

/* line 975, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

/* line 983, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor-name {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 996, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor-name svg {
  width: 0.62rem;
  height: 0.82rem;
  flex: 0 0 auto;
  fill: currentColor;
}

/* line 1004, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__sponsor-badge {
  flex: 0 0 auto;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f68d3;
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 1022, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__eyebrow {
  color: #5865F2;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* line 1030, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__name {
  min-width: 0;
  overflow: hidden;
  color: #161616;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1041, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__description {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(22, 22, 22, 0.68);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

/* line 1053, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
  max-height: 1.6rem;
  overflow: hidden;
}

/* line 1062, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__meta span {
  display: inline-flex;
  min-width: 0;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.1);
  color: #1224e6;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* line 1076, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner .discord-server-promotion__meta {
  position: absolute;
  top: 0.9rem;
  right: 0.95rem;
  left: 0.95rem;
  justify-content: flex-end;
}

/* line 1084, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__meta {
  left: 6.7rem;
  flex-wrap: nowrap;
  gap: 0.3rem;
}

/* line 1090, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__meta span {
  padding: 0.25rem 0.35rem;
  font-size: 0.62rem;
}

/* line 1095, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  background: #5865F2;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

/* line 1111, app/assets/stylesheets/partials/_emote-item.scss */
.discord-server-promotion__cta-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

/* line 1119, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion {
  position: relative;
  display: grid;
  grid-column: span 2;
  grid-row: span 2;
  grid-template-rows: 9.6rem minmax(0, 1fr);
  min-width: 0;
  height: 23rem;
  min-height: 23rem;
  overflow: hidden;
  border: 1px solid rgba(100, 65, 165, 0.24);
  border-radius: 0.7rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 255, 0.96)), #fff;
  box-shadow: 0 14px 30px rgba(22, 22, 22, 0.14);
  color: #161616;
  isolation: isolate;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* line 1140, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion:hover, .twitch-channel-promotion:focus-visible {
  border-color: rgba(100, 65, 165, 0.45);
  box-shadow: 0 18px 36px rgba(22, 22, 22, 0.18);
  color: #161616;
  outline: none;
  text-decoration: none;
  transform: translateY(-1px);
}

/* line 1150, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion.is-rotating {
  opacity: 0.35;
}

/* line 1154, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__channel-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
}

/* line 1160, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__channel-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* line 1169, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__channel-link:focus-visible {
  outline: 3px solid rgba(100, 65, 165, 0.36);
  outline-offset: -3px;
}

/* line 1175, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__media {
  position: relative;
  min-height: 0;
  overflow: visible;
  background: radial-gradient(circle at 20% 0, rgba(100, 65, 165, 0.28), transparent 12rem), linear-gradient(135deg, rgba(22, 22, 22, 0.95), rgba(100, 65, 165, 0.74));
}

/* line 1184, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1191, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__live-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 1.7rem;
  padding: 0.38rem 0.55rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.94);
  color: #fff;
  box-shadow: 0 0.55rem 1.2rem rgba(0, 0, 0, 0.22);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

/* line 1211, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__live-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
}

/* line 1218, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__avatar-wrap {
  position: absolute;
  left: 1rem;
  bottom: -2.35rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 5.55rem;
  height: 5.55rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.2);
}

/* line 1232, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__avatar {
  display: block;
  width: 5.05rem;
  height: 5.05rem;
  border-radius: 50%;
  object-fit: cover;
}

/* line 1240, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__sponsor {
  position: absolute;
  top: 0.65rem;
  right: 5.2rem;
  left: 0.65rem;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
  min-width: 0;
  padding: 0.35rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.72), rgba(100, 65, 165, 0.62)), rgba(22, 22, 22, 0.72);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.22);
  text-decoration: none;
}

/* line 1260, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__sponsor:hover, .twitch-channel-promotion__sponsor:focus-visible {
  color: #fff;
  outline: none;
  text-decoration: none;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(100, 65, 165, 0.22);
}

/* line 1271, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__sponsor-avatar {
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.35rem 0.7rem rgba(0, 0, 0, 0.22);
  object-fit: cover;
}

/* line 1282, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__sponsor-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

/* line 1290, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__sponsor-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1301, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__sponsor-badge {
  flex: 0 0 auto;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f68d3;
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 1319, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__body {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 0.35rem;
  align-content: end;
  min-width: 0;
  min-height: 0;
  padding: 3.15rem 0.95rem 0.95rem;
  overflow: hidden;
}

/* line 1331, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__eyebrow {
  color: #6441a5;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* line 1339, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__name {
  min-width: 0;
  overflow: hidden;
  color: #161616;
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1350, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(22, 22, 22, 0.68);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

/* line 1362, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
  min-height: 0;
  max-height: 1.6rem;
  overflow: hidden;
}

/* line 1371, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__meta span {
  display: inline-flex;
  min-width: 0;
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  background: rgba(100, 65, 165, 0.1);
  color: #4e3380;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* line 1385, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  margin-top: 0.25rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  background: #6441a5;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

/* line 1401, app/assets/stylesheets/partials/_emote-item.scss */
.twitch-channel-promotion__cta-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

/* line 1409, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner {
  --emote-creator-banner-column-span: 999;
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  box-sizing: border-box;
  width: 100%;
  min-height: 13rem;
  min-width: 0;
  padding: 1.35rem clamp(1.4rem, 3vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(169, 140, 255, 0.22);
  border-radius: 0.8rem;
  background: radial-gradient(circle at 20% 0, rgba(137, 92, 255, 0.28), transparent 20rem), radial-gradient(circle at 90% 130%, rgba(37, 140, 255, 0.24), transparent 24rem), linear-gradient(125deg, #16122b 0%, #211947 55%, #111b36 100%);
  box-shadow: 0 0.8rem 2.2rem rgba(22, 18, 43, 0.22);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* line 1436, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner[hidden] {
  display: none;
}

/* line 1440, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner:hover, .emote-creator-banner:focus-visible {
  border-color: rgba(169, 140, 255, 0.45);
  box-shadow: 0 1rem 2.45rem rgba(22, 18, 43, 0.28);
  outline: none;
  transform: translateY(-1px);
}

/* line 1448, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner:focus-visible {
  box-shadow: 0 1rem 2.45rem rgba(22, 18, 43, 0.28), 0 0 0 3px rgba(15, 104, 211, 0.24);
}

/* line 1452, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 0.7px, transparent 0.7px);
  background-size: 14px 14px;
  content: '';
  mask-image: linear-gradient(90deg, #000, transparent 75%);
  pointer-events: none;
}

/* line 1462, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner::after {
  position: absolute;
  top: -8rem;
  right: 20%;
  width: 16rem;
  height: 16rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.018), 0 0 0 6rem rgba(255, 255, 255, 0.012);
  content: '';
  pointer-events: none;
}

/* line 1475, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  min-width: 0;
}

/* line 1483, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__copy strong {
  min-width: 0;
  overflow-wrap: break-word;
  color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
}

/* line 1496, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__description {
  max-width: 25rem;
  min-width: 0;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.45;
}

/* line 1506, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__prompt {
  position: relative;
  min-width: 0;
  margin-top: 0.2rem;
  padding-bottom: 0.3rem;
  color: #fff;
  font-size: clamp(1.18rem, 1.9vw, 1.65rem);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 0.55rem 1.2rem rgba(109, 92, 255, 0.45);
  white-space: nowrap;
}

/* line 1518, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__prompt::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10.5rem;
  max-width: 100%;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, rgba(187, 166, 255, 0.2));
  content: '';
}

/* line 1531, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #bba6ff;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 1542, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__eyebrow svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* line 1548, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__signature {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  z-index: 3;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}

/* line 1562, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__demo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(4.8rem, 0.8fr) 2.2rem minmax(6rem, 1fr) 2.2rem minmax(7.5rem, 1.25fr);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

/* line 1572, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__stage {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

/* line 1578, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__stage-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* line 1588, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__stage-label b {
  color: #ad94ff;
  font-size: 0.54rem;
}

/* line 1594, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__asset {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0.7rem 1.5rem rgba(9, 6, 24, 0.26);
  animation: emote-creator-card-pulse 7.5s ease-in-out infinite;
}

/* line 1607, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1614, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__stage--sheet .emote-creator-banner__asset {
  opacity: 0;
  clip-path: inset(50% 50% 50% 50% round 0.72rem);
  animation: emote-creator-sheet-reveal 7.5s ease-in-out infinite, emote-creator-card-pulse 7.5s ease-in-out 2.15s infinite;
}

/* line 1621, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__stage--sheet .emote-creator-banner__asset img {
  box-sizing: border-box;
  padding: 0.25rem;
  object-fit: contain;
}

/* line 1628, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__asset-status {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid #241b48;
  border-radius: 50%;
  background: #51dcab;
  color: #12251f;
  animation: emote-creator-status 7.5s ease-in-out infinite;
}

/* line 1642, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__asset-status svg {
  width: 0.7rem;
  height: 0.7rem;
}

/* line 1648, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 35%;
  border-bottom: 1px solid rgba(184, 165, 255, 0.8);
  background: linear-gradient(180deg, transparent, rgba(150, 119, 255, 0.2));
  opacity: 0;
  animation: emote-creator-scan 7.5s ease-in-out infinite;
}

/* line 1660, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__flow {
  position: relative;
  display: flex;
  align-items: center;
  color: rgba(184, 165, 255, 0.55);
}

/* line 1666, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__flow span {
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

/* line 1672, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__flow span::after {
  display: block;
  width: 65%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #b49dff);
  content: '';
  animation: emote-creator-flow 7.5s ease-in-out infinite;
  transform: translateX(-120%);
}

/* line 1683, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__flow svg {
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.25rem;
}

/* line 1691, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__flow--second span::after {
  animation-delay: 2.2s;
}

/* line 1695, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__emotes {
  position: relative;
  min-height: 6.8rem;
}

/* line 1699, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__emotes img {
  --emote-rotation: 0deg;
  position: absolute;
  top: 50%;
  left: 34.5%;
  width: 31%;
  max-width: 4.5rem;
  aspect-ratio: 1;
  filter: drop-shadow(0 0.65rem 0.65rem rgba(9, 6, 24, 0.32));
  object-fit: contain;
  opacity: 0;
  transform: translateY(-50%) rotate(var(--emote-rotation)) scale(0.7);
  animation: emote-creator-emote-pop 7.5s cubic-bezier(0.2, 0.9, 0.25, 1.2) infinite;
}

/* line 1714, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__emotes img:nth-child(1) {
  --emote-rotation: -3deg;
  left: 0;
  animation-delay: 0s;
}

/* line 1721, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__emotes img:nth-child(2) {
  animation-delay: 0.18s;
}

/* line 1725, app/assets/stylesheets/partials/_emote-item.scss */
.emote-creator-banner__emotes img:nth-child(3) {
  --emote-rotation: 3deg;
  right: 0;
  left: auto;
  animation-delay: 0.36s;
}

@keyframes emote-creator-card-pulse {
  0%, 18%, 100% {
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(0);
  }
  6%, 12% {
    border-color: rgba(188, 168, 255, 0.65);
    transform: translateY(-0.18rem);
  }
}

@keyframes emote-creator-status {
  0%, 3% {
    opacity: 0;
    transform: scale(0.55);
  }
  7%, 82% {
    opacity: 1;
    transform: scale(1);
  }
  92%, 100% {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes emote-creator-scan {
  0%, 25%, 100% {
    opacity: 0;
    transform: translateY(-100%);
  }
  30% {
    opacity: 1;
    transform: translateY(-100%);
  }
  45% {
    opacity: 1;
    transform: translateY(280%);
  }
  49% {
    opacity: 0;
    transform: translateY(280%);
  }
}

@keyframes emote-creator-sheet-reveal {
  0%, 24%, 100% {
    opacity: 0;
    clip-path: inset(50% 50% 50% 50% round 0.72rem);
  }
  31%, 90% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0.72rem);
  }
  96% {
    opacity: 0;
    clip-path: inset(0 0 0 0 round 0.72rem);
  }
}

@keyframes emote-creator-flow {
  0%, 14%, 100% {
    opacity: 0;
    transform: translateX(-120%);
  }
  18% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateX(170%);
  }
  36% {
    opacity: 0;
    transform: translateX(170%);
  }
}

@keyframes emote-creator-emote-pop {
  0%, 61%, 100% {
    opacity: 0;
  }
  67%, 88% {
    opacity: 1;
    transform: translateY(-50%) rotate(var(--emote-rotation)) scale(1);
  }
  96% {
    opacity: 0;
    transform: translateY(-50%) rotate(var(--emote-rotation)) scale(0.92);
  }
}

@media only screen and (max-width: 64rem) {
  /* line 1774, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    min-height: 0;
    padding: 1.25rem;
  }
  /* line 1780, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__demo {
    grid-template-columns: minmax(0, 0.8fr) clamp(0.75rem, 4vw, 2.2rem) minmax(0, 1fr) clamp(0.75rem, 4vw, 2.2rem) minmax(0, 1.25fr);
    grid-row: 1;
    justify-self: center;
    width: 100%;
    max-width: 38rem;
  }
}

/* line 1790, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner {
  --discord-sync-banner-column-span: 2;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1.1rem;
  grid-column: span 2;
  align-content: center;
  min-height: 14rem;
  padding: 1.2rem 3rem 1.2rem 1.3rem;
}

/* line 1800, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.7rem;
}

/* line 1805, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__icon svg {
  width: 2.35rem;
  height: 2.35rem;
}

/* line 1811, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy {
  gap: 0.35rem;
}

/* line 1815, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy strong {
  font-size: 1.35rem;
}

/* line 1819, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy span {
  max-width: 30rem;
  font-size: 0.96rem;
}

/* line 1824, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__button {
  grid-column: auto;
  width: auto;
  min-width: 9.5rem;
  min-height: 2.8rem;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
}

@media only screen and (max-width: 30rem) {
  /* line 1836, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__pagination {
    flex-flow: column;
    gap: 2rem;
  }
  /* line 1841, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list-count {
    order: 3;
  }
  /* line 1846, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-sync-banner {
    --discord-sync-banner-column-span: 999;
    grid-column: 1 / -1;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.75rem 2.65rem 0.75rem 0.75rem;
  }
  /* line 1854, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-sync-banner__icon {
    width: 2.2rem;
    height: 2.2rem;
  }
  /* line 1858, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-sync-banner__icon svg {
    width: 1.18rem;
    height: 1.18rem;
  }
  /* line 1864, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-sync-banner__copy strong {
    font-size: 0.94rem;
  }
  /* line 1868, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-sync-banner__copy span {
    font-size: 0.76rem;
  }
  /* line 1873, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 6.8rem minmax(0, 1fr);
    height: 17.75rem;
    min-height: 0;
  }
  /* line 1881, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__media {
    min-height: 100%;
  }
  /* line 1885, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__banner {
    min-height: 100%;
  }
  /* line 1889, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__icon-wrap {
    min-height: 100%;
  }
  /* line 1893, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion--banner .discord-server-promotion__icon-wrap {
    left: 0.7rem;
    bottom: -1.65rem;
    width: 4.05rem;
    height: 4.05rem;
    min-height: 0;
    border-radius: 1.05rem;
  }
  /* line 1902, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__icon {
    width: 3.15rem;
    height: 3.15rem;
    border-width: 2px;
    border-radius: 0.85rem;
  }
  /* line 1909, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion--banner .discord-server-promotion__icon {
    width: 3.65rem;
    height: 3.65rem;
    border-width: 0;
    border-radius: 0.92rem;
  }
  /* line 1916, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__body {
    gap: 0.25rem;
    padding: 0.75rem;
  }
  /* line 1921, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__body {
    padding-top: 2.25rem;
  }
  /* line 1925, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion--banner.discord-server-promotion--icon .discord-server-promotion__meta {
    left: 5.25rem;
  }
  /* line 1929, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__sponsor {
    top: 0.45rem;
    right: 0.45rem;
    left: 0.45rem;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 0.34rem;
    padding: 0.3rem 0.36rem;
  }
  /* line 1938, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__sponsor-avatar {
    width: 1.6rem;
    height: 1.6rem;
  }
  /* line 1943, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__sponsor-name {
    font-size: 0.64rem;
  }
  /* line 1947, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__sponsor-badge {
    padding: 0.16rem 0.34rem;
    font-size: 0.48rem;
  }
  /* line 1952, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__name {
    font-size: 0.98rem;
  }
  /* line 1956, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__description {
    -webkit-line-clamp: 1;
    font-size: 0.74rem;
  }
  /* line 1961, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__meta span {
    font-size: 0.62rem;
  }
  /* line 1965, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-server-promotion__cta {
    min-height: 2rem;
    font-size: 0.76rem;
  }
  /* line 1971, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 6.8rem minmax(0, 1fr);
    height: 20.5rem;
    min-height: 0;
  }
  /* line 1979, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__media, .twitch-channel-promotion__thumbnail {
    min-height: 100%;
  }
  /* line 1984, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__avatar-wrap {
    left: 0.7rem;
    bottom: -1.65rem;
    width: 4.05rem;
    height: 4.05rem;
  }
  /* line 1991, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__avatar {
    width: 3.65rem;
    height: 3.65rem;
  }
  /* line 1996, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__sponsor {
    top: 0.45rem;
    right: 4.4rem;
    left: 0.45rem;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 0.34rem;
    padding: 0.3rem 0.36rem;
  }
  /* line 2005, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__sponsor-avatar {
    width: 1.6rem;
    height: 1.6rem;
  }
  /* line 2010, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__sponsor-name {
    font-size: 0.64rem;
  }
  /* line 2014, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__sponsor-badge {
    padding: 0.16rem 0.34rem;
    font-size: 0.48rem;
  }
  /* line 2019, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__body {
    gap: 0.25rem;
    padding: 2.25rem 0.75rem 0.75rem;
  }
  /* line 2024, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__name {
    font-size: 0.98rem;
  }
  /* line 2028, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__title {
    -webkit-line-clamp: 1;
    font-size: 0.74rem;
  }
  /* line 2033, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__meta span {
    font-size: 0.62rem;
  }
  /* line 2037, app/assets/stylesheets/partials/_emote-item.scss */
  .twitch-channel-promotion__cta {
    min-height: 2rem;
    font-size: 0.76rem;
  }
  /* line 2043, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner {
    gap: 1rem;
    padding: 1rem;
  }
  /* line 2047, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__copy strong {
    font-size: clamp(1.15rem, 6vw, 1.45rem);
  }
  /* line 2051, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__description {
    font-size: 0.76rem;
  }
  /* line 2055, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__prompt {
    font-size: clamp(0.9rem, 4.5vw, 1.2rem);
  }
  /* line 2059, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__signature {
    right: 0.8rem;
    bottom: 0.65rem;
  }
  /* line 2064, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__demo {
    grid-template-columns: minmax(0, 0.8fr) clamp(0.55rem, 3vw, 1rem) minmax(0, 1fr) clamp(0.55rem, 3vw, 1rem) minmax(0, 1.25fr);
    gap: 0.25rem;
  }
  /* line 2069, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__stage-label {
    gap: 0.2rem;
    font-size: 0.45rem;
  }
  /* line 2073, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__stage-label b {
    display: none;
  }
  /* line 2078, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__asset {
    border-radius: 0.5rem;
  }
  /* line 2082, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__flow svg {
    width: 0.7rem;
    height: 0.7rem;
  }
  /* line 2087, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__emotes {
    min-height: 0;
    aspect-ratio: 1.25;
  }
  /* line 2093, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.65rem;
    min-height: 0;
    padding: 0.75rem 2.65rem 0.75rem 0.75rem;
  }
  /* line 2099, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.55rem;
  }
  /* line 2104, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__icon svg {
    width: 1.18rem;
    height: 1.18rem;
  }
  /* line 2110, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy {
    gap: 0.25rem;
  }
  /* line 2114, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy strong {
    font-size: 0.94rem;
  }
  /* line 2118, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy span {
    max-width: none;
    font-size: 0.76rem;
  }
  /* line 2123, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
  }
}

@media only screen and (min-width: 32rem) and (max-width: 64rem) {
  /* line 2136, app/assets/stylesheets/partials/_emote-item.scss */
  .discord-sync-banner {
    --discord-sync-banner-column-span: 2;
    grid-column: span 2;
  }
  /* line 2142, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner {
    padding-inline: 1.3rem;
  }
  /* line 2146, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner {
    --discord-sync-banner-column-span: 999;
    grid-column: 1 / -1;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    min-height: 10rem;
    padding: 1rem 3rem 1rem 1rem;
  }
  /* line 2154, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__icon {
    width: 3.5rem;
    height: 3.5rem;
  }
  /* line 2158, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__icon svg {
    width: 1.9rem;
    height: 1.9rem;
  }
  /* line 2164, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy strong {
    font-size: 1.18rem;
  }
  /* line 2168, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item-list__content--stickers .discord-sync-banner .discord-sync-banner__copy span {
    font-size: 0.88rem;
  }
}

@media only screen and (max-width: 24rem) {
  /* line 2176, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner {
    gap: 0.85rem;
    padding: 0.8rem;
    border-radius: 0.65rem;
  }
  /* line 2181, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__copy {
    gap: 0.45rem;
  }
  /* line 2185, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__copy strong {
    font-size: 1.08rem;
  }
  /* line 2189, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__description {
    font-size: 0.7rem;
    line-height: 1.35;
  }
  /* line 2194, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__prompt {
    font-size: 0.9rem;
  }
  /* line 2198, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__signature {
    right: 0.65rem;
    bottom: 0.55rem;
    font-size: 0.54rem;
  }
  /* line 2204, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__eyebrow {
    font-size: 0.57rem;
  }
  /* line 2208, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__demo {
    grid-template-columns: minmax(0, 0.8fr) 0.55rem minmax(0, 1fr) 0.55rem minmax(0, 1.25fr);
    gap: 0.15rem;
  }
  /* line 2213, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__stage {
    gap: 0.3rem;
  }
  /* line 2217, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__stage-label {
    font-size: 0.4rem;
    letter-spacing: 0.02em;
  }
  /* line 2222, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__asset-status {
    right: 0.2rem;
    bottom: 0.2rem;
    width: 0.9rem;
    height: 0.9rem;
    border-width: 1px;
  }
  /* line 2229, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__asset-status svg {
    width: 0.55rem;
    height: 0.55rem;
  }
  /* line 2236, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__flow span {
    display: none;
  }
  /* line 2240, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__flow svg {
    width: 0.55rem;
    height: 0.55rem;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 2251, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__asset, .emote-creator-banner__asset-status, .emote-creator-banner__scan, .emote-creator-banner__flow span::after, .emote-creator-banner__emotes img {
    animation: none;
  }
  /* line 2259, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__asset-status, .emote-creator-banner__stage--sheet .emote-creator-banner__asset, .emote-creator-banner__emotes img {
    opacity: 1;
  }
  /* line 2265, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__stage--sheet .emote-creator-banner__asset {
    clip-path: none;
  }
  /* line 2269, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__emotes img:nth-child(1) {
    transform: translateY(-50%) rotate(var(--emote-rotation)) scale(1);
  }
  /* line 2273, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__emotes img:nth-child(2) {
    transform: translateY(-50%) rotate(var(--emote-rotation)) scale(1);
  }
  /* line 2277, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-creator-banner__emotes img:nth-child(3) {
    transform: translateY(-50%) rotate(var(--emote-rotation)) scale(1);
  }
}

/* line 2283, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  flex-flow: column;
  border-radius: 3px;
  width: 100%;
  padding: .75rem .5rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
  cursor: pointer;
  box-sizing: border-box;
  transition: 200ms;
}

/* line 2301, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item:hover .emote-item__quick-action, .emote-item:focus-within .emote-item__quick-action {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* line 2308, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item.pending_review {
  opacity: .75;
}

/* line 2312, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item.is-admin-blocked {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

/* line 2318, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item.is_private {
  /*box-shadow: 0px 1px 3px rgba(114, 7, 7, 0.5)*/
}

/* line 2325, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item--creator:hover .emote-item__creator-actions, .emote-item--creator:focus-within .emote-item__creator-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* line 2333, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-actions {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 4;
  display: inline-flex;
  gap: 0.35rem;
  opacity: 0;
  transform: translateY(-0.2rem);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* line 2346, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.emote-item__quick-action--creator {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  text-decoration: none;
  position: static;
  top: auto;
  right: auto;
}

/* line 2356, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.emote-item__quick-action--creator.emote-item__quick-action--danger:hover, .emote-item__quick-action.emote-item__quick-action--creator.emote-item__quick-action--danger:focus-visible {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.32);
  background: #fff;
}

/* line 2363, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.emote-item__quick-action--creator.emote-item__quick-action--danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16), 0 8px 18px rgba(22, 22, 22, 0.16);
}

/* line 2369, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(22, 22, 22, 0.32);
  background-image: linear-gradient(110deg, rgba(22, 22, 22, 0.02) 8%, rgba(15, 104, 211, 0.1) 18%, rgba(22, 22, 22, 0.02) 33%);
  background-size: 250% 100%;
  animation: emote-item-creator-shimmer 1600ms linear infinite;
}

/* line 2380, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-placeholder svg {
  width: 60%;
  height: 60%;
}

/* line 2386, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(22, 22, 22, 0.75);
}

/* line 2395, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status--processing {
  color: #0f68d3;
}

/* line 2396, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status--review {
  color: #92400e;
}

/* line 2397, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status--private {
  color: #92400e;
}

/* line 2398, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status--failed, .emote-item__creator-status--rejected {
  color: #b91c1c;
}

/* line 2402, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-downloads {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  color: rgba(22, 22, 22, 0.6);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 2415, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-downloads svg {
  width: 0.65rem;
  height: 0.65rem;
  flex-shrink: 0;
}

/* line 2422, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 2428, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status-dots {
  display: inline-block;
  width: 1.8ch;
  text-align: left;
}

/* line 2433, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__creator-status-dots::after {
  content: '';
  display: inline;
  animation: emote-item-creator-dots 1400ms steps(4, end) infinite;
}

/* line 2440, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4.75rem;
  width: 4.75rem;
  line-height: 0;
}

/* line 2448, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__icon svg {
  max-height: 4.75rem;
  max-width: 4.75rem;
  height: 4.75rem;
  width: auto;
  fill: #161616;
}

/* line 2457, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  height: 5.5rem;
  width: 5.5rem;
  overflow: hidden;
}

/* line 2466, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__image img {
  max-height: 5.5rem;
  max-width: 5.5rem;
}

/* line 2472, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.96);
  color: rgba(22, 22, 22, 0.78);
  box-shadow: 0 8px 18px rgba(22, 22, 22, 0.16);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.2rem) scale(0.94);
  transition: opacity 150ms ease, transform 150ms ease, color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* line 2498, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action:hover, .emote-item__quick-action:focus-visible {
  color: #0f68d3;
  border-color: rgba(15, 104, 211, 0.24);
  background: #fff;
  outline: none;
}

/* line 2506, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.16), 0 8px 18px rgba(22, 22, 22, 0.16);
}

/* line 2510, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-saved {
  color: #0f68d3;
  border-color: rgba(15, 104, 211, 0.28);
  background: rgba(15, 104, 211, 0.08);
}

/* line 2515, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-saved .emote-item__quick-action-plus {
  opacity: 0;
}

/* line 2520, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-loading {
  cursor: progress;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* line 2526, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-loading svg {
  opacity: 0;
}

/* line 2530, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-loading::after {
  content: "";
  position: absolute;
  inset: .56rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 104, 211, 0.2);
  border-top-color: #0f68d3;
  animation: emote-quick-action-spin .72s linear infinite;
}

/* line 2541, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-retrying {
  border-color: rgba(15, 104, 211, 0.34);
  background: rgba(15, 104, 211, 0.1);
}

/* line 2545, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-retrying::before {
  content: attr(data-retry-label);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
  color: #0f68d3;
}

/* line 2559, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-retrying::after {
  animation-duration: 1s;
}

/* line 2564, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-queued {
  border-color: rgba(22, 22, 22, 0.18);
  background: rgba(22, 22, 22, 0.06);
}

/* line 2569, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-error {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.28);
  background: rgba(185, 28, 28, 0.08);
}

/* line 2575, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-premium-gated {
  color: #a16207;
  border-color: rgba(202, 138, 4, 0.34);
  background: rgba(250, 204, 21, 0.13);
}

/* line 2580, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-premium-gated:hover, .emote-item__quick-action.is-premium-gated:focus-visible {
  color: #854d0e;
  border-color: rgba(202, 138, 4, 0.48);
  background: #fff;
}

/* line 2588, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action.is-premium-gate-seen {
  color: rgba(22, 22, 22, 0.52);
  border-color: rgba(22, 22, 22, 0.14);
  background: rgba(255, 255, 255, 0.92);
}

/* line 2594, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--download {
  top: 3.15rem;
  color: rgba(15, 104, 211, 0.88);
}

/* line 2599, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--admin-block {
  top: 3.15rem;
  color: #b91c1c;
}

/* line 2603, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--admin-block:hover, .emote-item__quick-action--admin-block:focus-visible {
  color: #991b1b;
  border-color: rgba(185, 28, 28, 0.32);
  background: rgba(185, 28, 28, 0.06);
}

/* line 2610, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--admin-block:focus-visible {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16), 0 8px 18px rgba(22, 22, 22, 0.16);
}

/* line 2615, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--admin-block-after-download {
  top: 5.85rem;
}

/* line 2619, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action svg {
  width: 1.22rem;
  height: 1.22rem;
}

/* line 2624, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-plus {
  transition: opacity 150ms ease;
}

/* line 2628, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-tooltip {
  display: none;
}

/* line 2632, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord {
  border-color: rgba(88, 101, 242, 0.4);
}

/* line 2635, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord > svg {
  display: none;
}

/* line 2639, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord:hover, .emote-item__quick-action--discord:focus-visible {
  border-color: rgba(88, 101, 242, 0.7);
}

/* line 2643, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord:hover .emote-item__quick-action-server-badge, .emote-item__quick-action--discord:focus-visible .emote-item__quick-action-server-badge {
  transform: scale(1.08);
}

/* line 2648, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord:focus-visible {
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.2), 0 8px 18px rgba(22, 22, 22, 0.16);
}

/* line 2652, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord.is-saved {
  border-color: rgba(35, 165, 90, 0.55);
  background: #fff;
}

/* line 2656, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord.is-saved .emote-item__quick-action-server-badge {
  background: #23a55a;
}

/* line 2660, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord.is-saved .emote-item__quick-action-server-plus {
  opacity: 0;
  transform: scale(0.4);
}

/* line 2665, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord.is-saved .emote-item__quick-action-server-check {
  opacity: 1;
  transform: scale(1);
}

/* line 2672, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord.is-loading .emote-item__quick-action-server-icon {
  opacity: 0.3;
}

/* line 2676, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action--discord.is-loading .emote-item__quick-action-server-badge {
  opacity: 0;
}

/* line 2682, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-server {
  position: absolute;
  inset: 0.14rem;
  pointer-events: none;
}

/* line 2688, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-server-icon {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #313338;
  object-fit: cover;
  transition: opacity 150ms ease;
}

/* line 2697, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-server-badge {
  position: absolute;
  right: -0.24rem;
  bottom: -0.24rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.02rem;
  height: 1.02rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #5865F2;
  color: #fff;
  box-shadow: 0 2px 6px rgba(22, 22, 22, 0.28);
  transition: background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

/* line 2713, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-server-badge svg {
  position: absolute;
  width: 0.56rem;
  height: 0.56rem;
  transition: opacity 150ms ease, transform 150ms ease;
}

/* line 2721, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-server-check {
  opacity: 0;
  transform: scale(0.4);
}

/* line 2726, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-picker {
  position: absolute;
  left: -0.24rem;
  bottom: -0.24rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.02rem;
  height: 1.02rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.92);
  color: #fff;
  box-shadow: 0 2px 6px rgba(22, 22, 22, 0.28);
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

/* line 2744, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-picker svg {
  width: 0.5rem;
  height: 0.32rem;
}

/* line 2749, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-picker:hover {
  background: #161616;
  transform: scale(1.12);
}

/* line 2754, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__quick-action-picker[hidden] {
  display: none;
}

/* line 2760, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__text {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  align-self: stretch;
}

/* line 2769, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__code {
  font-weight: 900;
  font-size: 0.875rem;
  opacity: .8;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* line 2780, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__code-link, .emote-item__author-link {
  color: inherit;
  text-decoration: none;
}

/* line 2785, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__code-link:hover, .emote-item__code-link:focus, .emote-item__author-link:hover, .emote-item__author-link:focus {
  text-decoration: underline;
}

/* line 2791, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__author {
  display: block;
  width: 100%;
  font-size: .75rem;
  opacity: .8;
  word-spacing: -1px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 2802, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__author svg {
  height: .75rem;
  width: auto;
  vertical-align: middle;
}

/* line 2809, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__state {
  display: flex;
  flex-flow: row;
  align-items: center;
  font-size: .75rem;
  opacity: .8;
  word-spacing: -1px;
  text-align: center;
  gap: .25rem;
}

/* line 2819, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__state svg {
  height: .75rem;
  fill: #161616;
}

/* line 2825, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__state--placeholder {
  visibility: hidden;
}

/* line 2829, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__state--warning {
  color: #92400e;
}

/* line 2833, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__state--warning svg {
  fill: #92400e;
}

/* line 2837, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item__state--download {
  opacity: .7;
}

@media (hover: none) {
  /* line 2843, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item__quick-action {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* line 2849, app/assets/stylesheets/partials/_emote-item.scss */
  .emote-item__creator-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@keyframes emote-item-creator-dots {
  0% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
  100% {
    content: '';
  }
}

@keyframes emote-item-creator-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* line 2869, app/assets/stylesheets/partials/_emote-item.scss */
.collection-flight {
  position: fixed;
  z-index: 5000;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

/* line 2878, app/assets/stylesheets/partials/_emote-item.scss */
body.quick-download-modal-open {
  overflow: hidden;
}

/* line 2882, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* line 2898, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal[hidden] {
  display: none !important;
}

/* line 2902, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* line 2906, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal.is-open .quick-download-modal__dialog {
  transform: translateY(0) scale(1);
}

/* line 2912, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 2918, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__dialog {
  display: grid;
  gap: 0.75rem;
  position: relative;
  width: 100%;
  max-width: 27rem;
  padding: 1.15rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  transform: translateY(0.6rem) scale(0.98);
  transition: transform 180ms ease;
}

/* line 2928, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.quick-download-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.quick-download-modal__close:hover, .quick-download-modal__close:focus-visible, .quick-download-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.quick-download-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 2935, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__close:hover, .quick-download-modal__close:focus-visible {
  color: #161616;
}

/* line 2941, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  padding-right: 2.4rem;
}

/* line 2946, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__title {
  margin: 0;
  color: #161616;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  margin-top: -0.3rem;
  padding-right: 2.4rem;
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
}

/* line 2953, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__hint {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  margin-top: -0.25rem;
  margin-bottom: 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* line 2962, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__options {
  display: grid;
  gap: 0.45rem;
}

/* line 2967, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__processing {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed rgba(15, 104, 211, 0.22);
  border-radius: 0.6rem;
  background: rgba(15, 104, 211, 0.055);
  color: rgba(22, 22, 22, 0.68);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
}

/* line 2981, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__processing[hidden] {
  display: none !important;
}

/* line 2986, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__processing-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(15, 104, 211, 0.2);
  border-top-color: rgba(15, 104, 211, 0.9);
  border-radius: 50%;
  animation: quick-download-processing-spin 800ms linear infinite;
}

@keyframes quick-download-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

/* line 2999, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option {
  --quick-download-accent-rgb: 22, 22, 22;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  min-height: 3.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(var(--quick-download-accent-rgb), 0.13);
  border-radius: 0.6rem;
  background: #fff;
  color: #161616;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* line 3017, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option:hover, .quick-download-modal__option:focus-visible {
  border-color: rgba(var(--quick-download-accent-rgb), 0.28);
  background: rgba(var(--quick-download-accent-rgb), 0.05);
  box-shadow: 0 0 0 3px rgba(var(--quick-download-accent-rgb), 0.09);
  outline: none;
  transform: translateY(-1px);
}

/* line 3026, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option.color-discord {
  --quick-download-accent-rgb: 88, 101, 242;
}

/* line 3030, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option.color-twitch {
  --quick-download-accent-rgb: 145, 70, 255;
}

/* line 3034, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option.color-slack {
  --quick-download-accent-rgb: 74, 21, 75;
}

/* line 3038, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option.color-whatsapp {
  --quick-download-accent-rgb: 37, 211, 102;
}

/* line 3042, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option--discord-sync {
  margin-top: 0.25rem;
  border-style: dashed;
  background: rgba(88, 101, 242, 0.06);
}

/* line 3048, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option--locked {
  border-style: dashed;
  background: rgba(22, 22, 22, 0.035);
  color: rgba(22, 22, 22, 0.54);
  cursor: not-allowed;
}

/* line 3054, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option--locked .quick-download-modal__option-logo {
  filter: grayscale(1);
  opacity: 0.62;
}

/* line 3060, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option:disabled:hover, .quick-download-modal__option:disabled:focus-visible {
  border-color: rgba(var(--quick-download-accent-rgb), 0.13);
  background: rgba(22, 22, 22, 0.035);
  box-shadow: none;
  transform: none;
}

/* line 3069, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.55rem;
  background: rgba(var(--quick-download-accent-rgb), 0.1);
  background-image: var(--quick-download-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.32rem 1.32rem;
  color: rgba(var(--quick-download-accent-rgb), 1);
}

/* line 3083, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-logo svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* line 3088, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-logo--discord {
  background: #5865f2;
  color: #fff;
}

/* line 3093, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-logo img {
  width: 100%;
  height: 100%;
  border-radius: 0.55rem;
  background: #313338;
  object-fit: cover;
}

/* line 3102, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal--collection-picker .quick-download-modal__option.is-current {
  border-color: rgba(var(--quick-download-accent-rgb), 0.4);
  background: rgba(var(--quick-download-accent-rgb), 0.05);
}

/* line 3107, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

/* line 3112, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-copy strong,
.quick-download-modal__option-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 3119, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-copy strong {
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.15;
}

/* line 3125, app/assets/stylesheets/partials/_emote-item.scss */
.quick-download-modal__option-copy span {
  color: rgba(22, 22, 22, 0.62);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.25;
}

@media only screen and (max-width: 32rem) {
  /* line 3134, app/assets/stylesheets/partials/_emote-item.scss */
  .quick-download-modal {
    align-items: flex-end;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }
  /* line 3139, app/assets/stylesheets/partials/_emote-item.scss */
  .quick-download-modal__dialog {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    border-radius: 0.85rem;
  }
  /* line 3145, app/assets/stylesheets/partials/_emote-item.scss */
  .quick-download-modal__option {
    min-height: 3.4rem;
  }
}

/* line 3150, app/assets/stylesheets/partials/_emote-item.scss */
.active-collection-button.is-collection-drop-target {
  animation: collection-drop-target-pulse 760ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

/* line 3154, app/assets/stylesheets/partials/_emote-item.scss */
.emote-item.is-collection-return-target {
  animation: collection-return-target-pulse 760ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

@keyframes collection-drop-target-pulse {
  0%, 58%, 100% {
    transform: scale(1);
    box-shadow: 0 1px 3px rgba(22, 22, 22, 0.07);
  }
  74% {
    transform: scale(1.045);
    box-shadow: 0 0 0 4px rgba(15, 104, 211, 0.14), 0 8px 22px rgba(22, 22, 22, 0.14);
  }
}

@keyframes collection-return-target-pulse {
  0%, 58%, 100% {
    transform: scale(1);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
  }
  74% {
    transform: scale(1.025);
    box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.125);
  }
}

@keyframes emote-quick-action-spin {
  to {
    transform: rotate(360deg);
  }
}

/* line 3188, app/assets/stylesheets/partials/_emote-item.scss */
.add-emote {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-weight: 900;
  text-decoration: none;
  color: #161616;
  border: 1px solid rgba(22, 22, 22, 0.5);
  border-radius: 3px;
  transition: 200ms;
}

/* line 3201, app/assets/stylesheets/partials/_emote-item.scss */
.add-emote:hover, .add-emote:focus, .add-emote:active {
  opacity: .75;
  text-decoration: none;
}

/* line 3206, app/assets/stylesheets/partials/_emote-item.scss */
.add-emote__icon svg {
  height: 1.5rem;
  fill: #161616;
}

/* line 3211, app/assets/stylesheets/partials/_emote-item.scss */
.add-emote__text {
  text-transform: uppercase;
}

/* line 13, app/assets/stylesheets/partials/_search.scss */
:root {
  --browse-content-max-width: calc(47.5rem + 4rem);
  --browse-shell-max-width: calc(47.5rem + 4rem + 20rem + 1.5rem);
}

/* line 18, app/assets/stylesheets/partials/_search.scss */
.emote_search {
  display: block;
  width: 100%;
}

/* line 22, app/assets/stylesheets/partials/_search.scss */
.emote_search .search-filter,
.emote_search #emote-results .emote-item-list {
  width: 100%;
  max-width: var(--browse-content-max-width);
  margin-inline: auto;
}

/* line 29, app/assets/stylesheets/partials/_search.scss */
.emote_search .search-bar__content {
  width: calc(100% - 2rem);
  max-width: var(--browse-shell-max-width);
  margin-inline: auto;
}

@media only screen and (max-width: 32rem) {
  /* line 29, app/assets/stylesheets/partials/_search.scss */
  .emote_search .search-bar__content {
    width: calc(100% - 1rem);
  }
}

/* line 39, app/assets/stylesheets/partials/_search.scss */
.emote_search .search-bar {
  position: sticky;
  top: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

/* line 48, app/assets/stylesheets/partials/_search.scss */
.browse-results-shell {
  width: 100%;
}

/* line 51, app/assets/stylesheets/partials/_search.scss */
.browse-results-shell__main {
  min-width: 0;
}

@media only screen and (min-width: 68.75rem) {
  /* line 48, app/assets/stylesheets/partials/_search.scss */
  .browse-results-shell {
    max-width: calc(var(--browse-content-max-width) + 20rem + 1.5rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
}

/* line 65, app/assets/stylesheets/partials/_search.scss */
.browse-sidebar {
  min-width: 0;
}

@media only screen and (min-width: 68.75rem) {
  /* line 65, app/assets/stylesheets/partials/_search.scss */
  .browse-sidebar {
    align-self: stretch;
  }
}

@media only screen and (min-width: 68.75rem) {
  /* line 75, app/assets/stylesheets/partials/_search.scss */
  .browse-sidebar__inner {
    position: sticky;
    top: 4.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
}

/* line 85, app/assets/stylesheets/partials/_search.scss */
.browse-sidebar__inner #sidebar_btf_placeholder,
.browse-sidebar__inner .sidebar_btf_placeholder {
  width: 100%;
}

/* line 90, app/assets/stylesheets/partials/_search.scss */
.browse-sidebar__inner #sidebar_btf_sticky_wrapper {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
}

/* line 96, app/assets/stylesheets/partials/_search.scss */
.browse-sidebar__inner #sidebar_btf_wrapper {
  max-width: 100%;
  margin-inline: auto;
}

@media only screen and (max-width: calc(68.75rem - .01rem)) {
  /* line 102, app/assets/stylesheets/partials/_search.scss */
  .browse-results-shell {
    display: grid;
    row-gap: 1.25rem;
  }
  /* line 107, app/assets/stylesheets/partials/_search.scss */
  .browse-sidebar__inner #sidebar_btf_placeholder {
    display: none !important;
  }
}

@media only screen and (min-width: 68.75rem) {
  /* line 117, app/assets/stylesheets/partials/_search.scss */
  .emote_search #emote-results .browse-results-shell__main .emote-item-list {
    max-width: var(--browse-content-max-width);
    margin-inline: 0;
  }
}

/* line 123, app/assets/stylesheets/partials/_search.scss */
.search {
  max-width: 55em;
  height: 3.5rem;
  background: #fff;
  margin: 2em auto;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.125);
}

/* line 134, app/assets/stylesheets/partials/_search.scss */
.search__select {
  height: 100%;
}

/* line 138, app/assets/stylesheets/partials/_search.scss */
.search__text-input {
  height: 100%;
  min-width: 0;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

/* line 145, app/assets/stylesheets/partials/_search.scss */
.search__text-input form {
  display: unset;
  gap: unset;
  flex-flow: unset;
}

/* line 152, app/assets/stylesheets/partials/_search.scss */
.search__button {
  height: 100%;
}

/* line 156, app/assets/stylesheets/partials/_search.scss */
.search__collection {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1em 0 .5em;
}

/* line 163, app/assets/stylesheets/partials/_search.scss */
.search__cancel-button {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  display: none;
  align-items: center;
  justify-content: center;
}

/* line 174, app/assets/stylesheets/partials/_search.scss */
.search__display-options {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75em;
  height: 100%;
  margin-left: 1em;
}

/* line 184, app/assets/stylesheets/partials/_search.scss */
.search__filter {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0 1em;
  height: 100%;
}

/* line 192, app/assets/stylesheets/partials/_search.scss */
.search__filter:hover, .search__filter:focus, .search__filter:active {
  background: rgba(0, 0, 0, 0.025);
}

/* line 196, app/assets/stylesheets/partials/_search.scss */
.search__filter svg {
  height: 1.5em;
  width: 1.5em;
  margin-right: .5em;
  fill: #161616;
}

/* line 203, app/assets/stylesheets/partials/_search.scss */
.search__filter span {
  font-size: 1.125em;
  font-weight: 400;
}

/* line 208, app/assets/stylesheets/partials/_search.scss */
.search__filter--active {
  color: #0f68d3;
  box-shadow: inset 0px -1px 0px #0f68d3;
}

/* line 212, app/assets/stylesheets/partials/_search.scss */
.search__filter--active span {
  font-weight: 500;
}

/* line 216, app/assets/stylesheets/partials/_search.scss */
.search__filter--active svg {
  fill: #0f68d3;
}

/* line 219, app/assets/stylesheets/partials/_search.scss */
.search__filter--active svg path {
  stroke: #0f68d3;
  stroke-width: 1;
}

/* line 227, app/assets/stylesheets/partials/_search.scss */
.search__hr {
  background-color: rgba(0, 0, 0, 0.05);
  width: 1px;
  height: 100%;
}

/* line 232, app/assets/stylesheets/partials/_search.scss */
.search-select {
  position: relative;
  height: 100%;
  user-select: none;
}

/* line 237, app/assets/stylesheets/partials/_search.scss */
.search-select__dropdown {
  display: none;
}

/* line 241, app/assets/stylesheets/partials/_search.scss */
.search-select__current {
  position: relative;
  font-weight: bold;
  padding: 0 1.5em;
  cursor: pointer;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 200ms ease-in-out;
  border: none;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 8em;
  background: none;
  border-radius: 0.5rem 0 0 0.5rem;
}

/* line 258, app/assets/stylesheets/partials/_search.scss */
.search-select__current:hover, .search-select__current:focus, .search-select__current:active {
  background: rgba(0, 0, 0, 0.025);
  border-right: 1px solid rgba(0, 0, 0, 0);
}

/* line 263, app/assets/stylesheets/partials/_search.scss */
.search-select__current::after {
  content: "▼";
  font-size: 12px;
  cursor: pointer;
  margin-left: 0.25em;
}

/* line 270, app/assets/stylesheets/partials/_search.scss */
.search-select__current:disabled {
  color: rgba(22, 22, 22, 0.55);
  cursor: default;
}

/* line 274, app/assets/stylesheets/partials/_search.scss */
.search-select__current:disabled::after {
  content: none;
}

/* line 281, app/assets/stylesheets/partials/_search.scss */
.search-input {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-left: 1em;
  width: 100%;
  border: none;
  outline: none;
  box-sizing: border-box !important;
  font-family: 'Roboto', sans-serif;
}

/* line 292, app/assets/stylesheets/partials/_search.scss */
.search-input:disabled {
  background: #fff;
  color: rgba(22, 22, 22, 0.6);
  cursor: default;
}

/* line 298, app/assets/stylesheets/partials/_search.scss */
.search-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px white inset;
  -webkit-text-fill-color: #999;
}

/* line 302, app/assets/stylesheets/partials/_search.scss */
.search-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px white inset;
  -webkit-text-fill-color: #999;
}

/* line 308, app/assets/stylesheets/partials/_search.scss */
.search-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 3.5rem;
  border: none;
  padding: 0;
  background: #0f68d3;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* line 320, app/assets/stylesheets/partials/_search.scss */
.search-submit:hover svg {
  transform: scale(0.7);
}

/* line 325, app/assets/stylesheets/partials/_search.scss */
.search-submit svg {
  transform: scale(0.75);
  transition: 200ms ease-in-out;
  fill: #fff;
}

/* line 332, app/assets/stylesheets/partials/_search.scss */
.search-cancel {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  width: 1.125em;
  border: none;
  padding: 0;
  background: none;
  margin-right: 1em;
  opacity: .75;
  color: #161616;
  font-size: 1.5rem;
  line-height: 1;
}

/* line 349, app/assets/stylesheets/partials/_search.scss */
.search-cancel:hover, .search-cancel:focus, .search-cancel:active {
  opacity: 1;
}

/* line 353, app/assets/stylesheets/partials/_search.scss */
.search-cancel svg {
  transition: 200ms ease-in-out;
}

/* line 356, app/assets/stylesheets/partials/_search.scss */
.search-cancel svg line {
  stroke: #161616;
}

/* line 362, app/assets/stylesheets/partials/_search.scss */
.search--advanced {
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  box-shadow: none;
}

/* line 368, app/assets/stylesheets/partials/_search.scss */
.search--advanced .search-input {
  max-width: auto;
  width: 100%;
}

/* line 373, app/assets/stylesheets/partials/_search.scss */
.search--advanced .search-cancel {
  margin-right: 0;
  width: 2.125em;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  height: calc(100% - 2em);
}

/* line 381, app/assets/stylesheets/partials/_search.scss */
.search-bar {
  position: relative;
  background: #fff;
  width: 100%;
  height: 3.5rem;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

/* line 389, app/assets/stylesheets/partials/_search.scss */
.search-bar__content {
  height: 100%;
  margin: 0 auto;
}

/* line 395, app/assets/stylesheets/partials/_search.scss */
.select-dropdown {
  position: absolute;
  top: calc(100% - 3px);
  background: #fff;
  width: calc(100% - 1px);
  max-width: calc(8em - 2px);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  display: none;
  flex-flow: column;
}

/* line 406, app/assets/stylesheets/partials/_search.scss */
.select-dropdown__item {
  padding: 1rem 0;
  width: 100%;
  cursor: pointer;
  text-align: center;
}

/* line 411, app/assets/stylesheets/partials/_search.scss */
.select-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.025);
}

/* line 417, app/assets/stylesheets/partials/_search.scss */
.display-option {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  width: 2.5em;
  cursor: pointer;
  opacity: .25;
  transition: 100ms ease-in;
}

/* line 427, app/assets/stylesheets/partials/_search.scss */
.display-option:first-child {
  margin-right: 1em;
}

/* line 431, app/assets/stylesheets/partials/_search.scss */
.display-option:hover, .display-option:focus, .display-option:active {
  opacity: .5;
}

/* line 435, app/assets/stylesheets/partials/_search.scss */
.display-option--active {
  opacity: 1;
}

/* line 437, app/assets/stylesheets/partials/_search.scss */
.display-option--active:hover, .display-option--active:focus, .display-option--active:active {
  opacity: 1;
}

/* line 442, app/assets/stylesheets/partials/_search.scss */
.display-option svg {
  width: 2.5em;
  height: 2.5em;
}

/* line 446, app/assets/stylesheets/partials/_search.scss */
.display-option svg.grid-icon {
  height: 2em;
}

@media only screen and (max-width: 100rem) {
  /* line 455, app/assets/stylesheets/partials/_search.scss */
  .search__hr:first-child, .search__hr:last-child {
    display: none;
  }
}

@media only screen and (max-width: 64rem) {
  /* line 465, app/assets/stylesheets/partials/_search.scss */
  .search-bar__content {
    padding: 0;
  }
  /* line 471, app/assets/stylesheets/partials/_search.scss */
  .search__hr:first-child, .search__hr:last-child {
    display: none;
  }
  /* line 476, app/assets/stylesheets/partials/_search.scss */
  .search__display-options {
    padding-right: 1em;
  }
  /* line 481, app/assets/stylesheets/partials/_search.scss */
  .search__filter svg {
    margin-right: 0;
  }
  /* line 484, app/assets/stylesheets/partials/_search.scss */
  .search__filter span {
    display: none;
  }
}

@media only screen and (max-width: 24rem) {
  /* line 492, app/assets/stylesheets/partials/_search.scss */
  .search-cancel {
    border-right: none !important;
  }
  /* line 496, app/assets/stylesheets/partials/_search.scss */
  .search__button {
    display: none;
  }
  /* line 500, app/assets/stylesheets/partials/_search.scss */
  .search__display-options {
    display: none;
  }
  /* line 504, app/assets/stylesheets/partials/_search.scss */
  .search .display-options-hr {
    display: none;
  }
}

/* line 510, app/assets/stylesheets/partials/_search.scss */
.search-cancel svg {
  display: none;
}

/* line 1, app/assets/stylesheets/partials/_tags.scss */
.tag-list {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* line 8, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item {
  margin: .5em;
}

/* line 13, app/assets/stylesheets/partials/_tags.scss */
.tag {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45em 1.25em;
  border-radius: 999px;
  text-decoration: none;
  transition: 200ms ease-in-out;
  user-select: none;
  letter-spacing: 0.02em;
}

/* line 24, app/assets/stylesheets/partials/_tags.scss */
.tag:hover, .tag:focus, .tag:active {
  opacity: .8;
  text-decoration: none;
  transform: translateY(-1px);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 1) {
  color: #0f68d3;
  background: rgba(15, 104, 211, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 2) {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 3) {
  color: #0d9488;
  background: rgba(13, 148, 136, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 4) {
  color: #5865F2;
  background: rgba(88, 101, 242, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 5) {
  color: #e11d48;
  background: rgba(225, 29, 72, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 6) {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 7) {
  color: #ea580c;
  background: rgba(234, 88, 12, 0.1);
}

/* line 44, app/assets/stylesheets/partials/_tags.scss */
.tag-list__item:nth-child(8n + 8) {
  color: #6441a5;
  background: rgba(100, 65, 165, 0.1);
}

/* line 1, app/assets/stylesheets/partials/_banner.scss */
.banner {
  position: relative;
  display: flex;
  flex-flow: row;
  align-items: center;
  width: 100%;
  max-width: 80em;
  padding: 1em 2em;
  background: #0f68d3;
  border-radius: 3px;
  margin: 0 auto;
}

/* line 14, app/assets/stylesheets/partials/_banner.scss */
.banner__image svg {
  width: 100%;
  height: 100%;
  max-height: 30em;
  max-width: 30em;
  min-width: 13em;
  min-height: 13em;
}

/* line 24, app/assets/stylesheets/partials/_banner.scss */
.banner__text {
  flex-grow: 1;
  color: #fff;
  padding: 1em 2em;
}

/* line 30, app/assets/stylesheets/partials/_banner.scss */
.banner__buttons {
  width: 100%;
  max-width: 15em;
  padding: 1em;
}

/* line 35, app/assets/stylesheets/partials/_banner.scss */
.banner__buttons .button {
  width: 100%;
}

@media only screen and (max-width: 83.5em) {
  /* line 43, app/assets/stylesheets/partials/_banner.scss */
  .banner__image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.125;
  }
}

@media only screen and (max-width: 64rem) {
  /* line 54, app/assets/stylesheets/partials/_banner.scss */
  .banner {
    flex-flow: column;
    text-align: center;
    padding: 1em;
  }
  /* line 59, app/assets/stylesheets/partials/_banner.scss */
  .banner__text {
    padding: 0;
  }
  /* line 64, app/assets/stylesheets/partials/_banner.scss */
  .banner__image {
    position: relative;
    opacity: 1;
    display: block;
    max-width: 13em;
  }
  /* line 71, app/assets/stylesheets/partials/_banner.scss */
  .banner__buttons {
    margin-top: 1em;
    padding: 0;
  }
}

/* line 1, app/assets/stylesheets/partials/_platforms.scss */
.platforms {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

@media only screen and (max-width: 64rem) {
  /* line 1, app/assets/stylesheets/partials/_platforms.scss */
  .platforms {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
}

/* line 12, app/assets/stylesheets/partials/_platforms.scss */
.platforms__step-logos {
  width: 100%;
  max-width: 20em;
  margin-right: 4em;
}

@media only screen and (max-width: 64rem) {
  /* line 12, app/assets/stylesheets/partials/_platforms.scss */
  .platforms__step-logos {
    max-width: 100%;
    margin-right: 0;
  }
}

/* line 29, app/assets/stylesheets/partials/_platforms.scss */
.step-logos {
  display: flex;
  flex-flow: column-reverse;
}

@media only screen and (max-width: 64rem) {
  /* line 29, app/assets/stylesheets/partials/_platforms.scss */
  .step-logos {
    flex-flow: row-reverse;
    margin-bottom: 1.5em;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 29, app/assets/stylesheets/partials/_platforms.scss */
  .step-logos {
    flex-flow: column;
    margin-bottom: 1em;
    justify-content: center;
  }
}

/* line 44, app/assets/stylesheets/partials/_platforms.scss */
.step-logos__item {
  max-width: 20em;
  opacity: .25;
  transition: 200ms ease-in-out;
  margin-bottom: 4em;
  width: 100%;
}

@media only screen and (max-width: 64rem) {
  /* line 44, app/assets/stylesheets/partials/_platforms.scss */
  .step-logos__item {
    margin-right: 3em;
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 44, app/assets/stylesheets/partials/_platforms.scss */
  .step-logos__item {
    margin-right: 0;
    margin-bottom: 4em;
  }
  /* line 60, app/assets/stylesheets/partials/_platforms.scss */
  .step-logos__item--selected {
    margin-bottom: 0;
  }
}

/* line 65, app/assets/stylesheets/partials/_platforms.scss */
.step-logos__item:hover {
  opacity: .75;
  cursor: pointer;
}

/* line 70, app/assets/stylesheets/partials/_platforms.scss */
.step-logos__item--selected {
  opacity: 1;
  order: 1;
}

/* line 74, app/assets/stylesheets/partials/_platforms.scss */
.step-logos__item--selected:hover {
  opacity: 1;
  cursor: default;
}

/* line 80, app/assets/stylesheets/partials/_platforms.scss */
.step-logos__item img {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 5em;
}

/* line 90, app/assets/stylesheets/partials/_platforms.scss */
.step-introductions__item {
  display: none;
}

/* line 93, app/assets/stylesheets/partials/_platforms.scss */
.step-introductions__item h4 {
  font-weight: 1000;
}

/* line 97, app/assets/stylesheets/partials/_platforms.scss */
.step-introductions__item ul {
  list-style-type: square;
  padding: .25em 1.25em;
}

/* line 101, app/assets/stylesheets/partials/_platforms.scss */
.step-introductions__item ul li {
  margin: .75em 0;
}

/* line 106, app/assets/stylesheets/partials/_platforms.scss */
.step-introductions__item--active {
  display: blocK;
}

/* line 1, app/assets/stylesheets/partials/_pagination.scss */
.pagination {
  display: flex;
  flex-flow: row;
  align-items: center;
}

/* line 6, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #fff;
  border-radius: 0.5rem;
  opacity: 1;
  cursor: pointer;
}

/* line 16, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button svg {
  height: 1.25em;
  width: 1.25em;
  fill: #161616;
}

/* line 21, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button svg path {
  fill: #161616;
}

/* line 26, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button--prev {
  margin-right: 1em;
}

/* line 28, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button--prev svg {
  transform: rotate(-180deg);
}

/* line 33, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button--next {
  margin-left: 1em;
}

/* line 37, app/assets/stylesheets/partials/_pagination.scss */
.pagination__button[disabled] {
  opacity: .5;
  cursor: default;
}

/* line 43, app/assets/stylesheets/partials/_pagination.scss */
.pagination__current {
  border: none;
  height: 100%;
  color: #161616;
  border: 1px solid rgba(23, 23, 23, 0.25);
  font-weight: 600;
  height: 1.75rem;
  text-align: center;
  margin-right: .5rem;
  border-radius: 0.5rem;
}

/* line 55, app/assets/stylesheets/partials/_pagination.scss */
.pagination__total {
  font-size: 15px;
}

/* line 59, app/assets/stylesheets/partials/_pagination.scss */
.pagination-buttons {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
}

/* line 66, app/assets/stylesheets/partials/_pagination.scss */
.pagination-buttons__button {
  display: flex;
  flex-flow: row;
  align-items: center;
  margin: 0 .25em;
}

/* line 72, app/assets/stylesheets/partials/_pagination.scss */
.pagination-buttons__button svg {
  height: 1em;
}

/* line 76, app/assets/stylesheets/partials/_pagination.scss */
.pagination-buttons__button--prev {
  flex-flow: row-reverse;
}

/* line 79, app/assets/stylesheets/partials/_pagination.scss */
.pagination-buttons__button--prev svg {
  transform: rotate(-180deg);
  fill: #161616;
  margin-right: .5em;
}

/* line 87, app/assets/stylesheets/partials/_pagination.scss */
.pagination-buttons__button--next svg {
  fill: #fff;
  margin-left: .5em;
}

/* line 1, app/assets/stylesheets/partials/_alert.scss */
.alert {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  padding: 1.5rem;
}

/* line 14, app/assets/stylesheets/partials/_alert.scss */
.alert.hide {
  display: none;
}

/* line 18, app/assets/stylesheets/partials/_alert.scss */
.alert hr {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  border: none;
}

/* line 25, app/assets/stylesheets/partials/_alert.scss */
.alert__content {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: 1rem;
  position: relative;
  width: 100%;
  max-width: 32rem;
  padding: 1.5rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  max-width: 32rem;
  width: 100%;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overflow-x: hidden;
}

/* line 37, app/assets/stylesheets/partials/_alert.scss */
.alert__content--wide {
  max-width: 38rem;
}

/* line 42, app/assets/stylesheets/partials/_alert.scss */
.alert__close-button {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: rgba(22, 22, 22, 0.55);
  margin: 0;
  border-radius: 0.5rem;
  transition: background-color 160ms ease, color 160ms ease;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.alert__close-button svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.alert__close-button:hover, .alert__close-button:focus-visible, .alert__close-button:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.alert__close-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 57, app/assets/stylesheets/partials/_alert.scss */
.alert__close-button:hover, .alert__close-button:focus, .alert__close-button:active {
  color: #161616;
}

/* line 61, app/assets/stylesheets/partials/_alert.scss */
.alert__close-button svg {
  width: 1rem;
  height: 1rem;
}

/* line 64, app/assets/stylesheets/partials/_alert.scss */
.alert--modal {
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 68, app/assets/stylesheets/partials/_alert.scss */
.alert__content--emote-modal {
  max-width: 42rem;
}

/* line 73, app/assets/stylesheets/partials/_alert.scss */
:root {
  --modal-viewport-top: 0px;
  --modal-viewport-left: 0px;
  --modal-viewport-width: 100vw;
  --modal-viewport-height: 100dvh;
}

/* line 80, app/assets/stylesheets/partials/_alert.scss */
body.emote-modal-open {
  overflow: hidden;
}

/* line 85, app/assets/stylesheets/partials/_alert.scss */
details.alert-default-open[open] .alert__content {
  animation: alert-default-open .3s ease 0s 1 normal forwards;
}

/* line 89, app/assets/stylesheets/partials/_alert.scss */
details.alert-message-open[open] .alert__content {
  animation: alert-message-open .3s ease 0s 1 normal forwards;
}

@keyframes alert-default-open {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes alert-message-open {
  0% {
    transform: scale(0.7);
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* line 126, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  width: 100%;
  padding: 1.15rem 1rem 1rem;
  text-align: center;
}

/* line 134, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 15rem;
  max-width: 58vw;
  aspect-ratio: 1;
  isolation: isolate;
  border: 1px solid rgba(15, 104, 211, 0.12);
  border-radius: 2rem;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72) 38%, transparent 64%), linear-gradient(135deg, rgba(15, 104, 211, 0.08), rgba(19, 185, 129, 0.06)), #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1.5rem 3rem rgba(22, 22, 22, 0.12);
  overflow: hidden;
}

/* line 153, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__stage::before, .emote-modal-loading__stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 999px;
}

/* line 162, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__stage::before {
  width: 74%;
  height: 74%;
  animation: emote-modal-loader-breathe 1800ms ease-in-out infinite;
}

/* line 168, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__stage::after {
  width: 94%;
  height: 94%;
  border-color: rgba(19, 185, 129, 0.1);
  animation: emote-modal-loader-breathe 1800ms 300ms ease-in-out infinite;
}

/* line 176, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__preview {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 1rem 1.4rem rgba(22, 22, 22, 0.16));
  animation: emote-modal-loader-float 1800ms ease-in-out infinite;
}

/* line 187, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* line 194, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__orbit {
  position: absolute;
  z-index: 3;
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #0f68d3;
  box-shadow: 0 0.35rem 0.8rem rgba(15, 104, 211, 0.32);
  animation: emote-modal-loader-orbit 1800ms linear infinite;
}

/* line 206, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__copy {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 21rem;
}

/* line 214, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__eyebrow {
  color: #0f68d3;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 223, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__title {
  max-width: 100%;
  overflow: hidden;
  color: #161616;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 234, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__note {
  color: rgba(22, 22, 22, 0.52);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

/* line 241, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__progress {
  position: relative;
  width: 100%;
  height: 0.22rem;
  margin: 0.2rem 0;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.08);
  overflow: hidden;
}

/* line 250, app/assets/stylesheets/partials/_alert.scss */
.emote-modal-loading__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f68d3, #13b981);
  box-shadow: 0 0 0.7rem rgba(15, 104, 211, 0.28);
  animation: emote-modal-loader-progress 1200ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes emote-modal-loader-breathe {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.85;
    transform: scale(1);
  }
}

@keyframes emote-modal-loader-float {
  0%, 100% {
    transform: translateY(0) scale(0.98);
  }
  50% {
    transform: translateY(-0.35rem) scale(1);
  }
}

@keyframes emote-modal-loader-orbit {
  from {
    transform: rotate(0deg) translateX(6.1rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(6.1rem) rotate(-360deg);
  }
}

@keyframes emote-modal-loader-progress {
  0% {
    left: -45%;
  }
  55%, 100% {
    left: 105%;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 283, app/assets/stylesheets/partials/_alert.scss */
  .alert {
    padding: 1rem;
  }
  /* line 285, app/assets/stylesheets/partials/_alert.scss */
  .alert__content {
    border-radius: 1rem;
    padding: 1rem;
    max-height: calc(100vh - 2rem);
  }
  /* line 291, app/assets/stylesheets/partials/_alert.scss */
  .alert--modal {
    padding: 1rem;
  }
  /* line 295, app/assets/stylesheets/partials/_alert.scss */
  .alert__content--emote-modal {
    max-height: calc(100vh - 2rem);
  }
}

@media only screen and (max-width: 64rem) {
  /* line 306, app/assets/stylesheets/partials/_alert.scss */
  .alert--modal {
    top: var(--modal-viewport-top);
    left: var(--modal-viewport-left);
    right: auto;
    bottom: auto;
    width: var(--modal-viewport-width);
    height: var(--modal-viewport-height);
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + 0.875rem) 1rem calc(env(safe-area-inset-bottom) + 1rem);
  }
  /* line 322, app/assets/stylesheets/partials/_alert.scss */
  .alert--modal .alert__content {
    max-height: calc( var(--modal-viewport-height) - calc(env(safe-area-inset-top) + 0.875rem) - calc(env(safe-area-inset-bottom) + 1rem));
    overflow-y: auto;
    overflow-x: hidden;
  }
  /* line 332, app/assets/stylesheets/partials/_alert.scss */
  .alert--modal .alert__close-button {
    position: sticky;
    top: 0;
    right: auto;
    align-self: flex-end;
    z-index: 4;
    flex: 0 0 auto;
    margin: -0.35rem -0.35rem -0.75rem auto;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 348, app/assets/stylesheets/partials/_alert.scss */
  .emote-modal-loading__stage::before,
.emote-modal-loading__stage::after,
.emote-modal-loading__preview,
.emote-modal-loading__orbit,
.emote-modal-loading__progress span {
    animation: none;
  }
  /* line 356, app/assets/stylesheets/partials/_alert.scss */
  .emote-modal-loading__orbit {
    display: none;
  }
  /* line 360, app/assets/stylesheets/partials/_alert.scss */
  .emote-modal-loading__progress span {
    width: 70%;
  }
}

/* line 1, app/assets/stylesheets/partials/_notifications.scss */
.notifications {
  position: fixed;
  top: calc(5.75rem + 0.75rem);
  right: clamp(0.8rem, 2vw, 1.4rem);
  z-index: 9500;
  pointer-events: none;
}

/* line 8, app/assets/stylesheets/partials/_notifications.scss */
.notifications__stack {
  display: flex;
  flex-flow: column;
  gap: 0.8rem;
  align-items: flex-end;
}

/* line 16, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast {
  --notification-accent: #0f68d3;
  --notification-accent-strong: #0e5cbb;
  --notification-soft: rgba(15, 104, 211, 0.13);
  --notification-glow: rgba(15, 104, 211, 0.25);
  --notification-ring: rgba(15, 104, 211, 0.24);
  --notification-duration: 5000ms;
  position: relative;
  display: grid;
  grid-template-columns: 2.85rem minmax(0, 1fr) 2.25rem;
  grid-template-areas: "icon body close";
  gap: 0.85rem;
  align-items: center;
  width: calc(100vw - 2rem);
  max-width: 25.5rem;
  min-height: 5rem;
  padding: 0.92rem 0.9rem 1rem;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 58%, rgba(234, 243, 255, 0.93) 100%);
  isolation: isolate;
  box-shadow: 0 1.35rem 3rem rgba(15, 104, 211, 0.16), 0 0.45rem 1.15rem rgba(15, 104, 211, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px);
  color: #161616;
  pointer-events: auto;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-0.45rem) translateX(0.7rem) scale(0.98);
  transition: opacity 190ms ease, transform 230ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 180ms ease;
}

/* line 54, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 9px;
  background: conic-gradient(from 140deg at 50% 50%, rgba(15, 104, 211, 0.34), rgba(19, 185, 129, 0.24), rgba(236, 72, 153, 0.22), rgba(15, 104, 211, 0.34));
  opacity: 0.2;
  filter: blur(0.72rem);
}

/* line 70, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(15, 104, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.06) 1px, transparent 1px);
  background-size: 1.85rem 1.85rem;
  mask-image: linear-gradient(100deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* line 85, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* line 90, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--success {
  --notification-accent: #13b981;
  --notification-accent-strong: #0f8f64;
  --notification-soft: rgba(19, 185, 129, 0.15);
  --notification-glow: rgba(19, 185, 129, 0.26);
  --notification-ring: rgba(19, 185, 129, 0.24);
}

/* line 98, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--info {
  --notification-accent: #0f68d3;
  --notification-accent-strong: #0e5cbb;
  --notification-soft: rgba(15, 104, 211, 0.14);
  --notification-glow: rgba(15, 104, 211, 0.28);
  --notification-ring: rgba(15, 104, 211, 0.24);
}

/* line 106, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--warning {
  --notification-accent: #f59e0b;
  --notification-accent-strong: #b86c00;
  --notification-soft: rgba(245, 158, 11, 0.17);
  --notification-glow: rgba(245, 158, 11, 0.3);
  --notification-ring: rgba(245, 158, 11, 0.28);
}

/* line 114, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--error {
  --notification-accent: #ec4899;
  --notification-accent-strong: #be185d;
  --notification-soft: rgba(236, 72, 153, 0.15);
  --notification-glow: rgba(236, 72, 153, 0.28);
  --notification-ring: rgba(236, 72, 153, 0.24);
}

/* line 122, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast > * {
  position: relative;
  z-index: 1;
}

/* line 127, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 999px;
  background: var(--notification-soft);
  box-shadow: inset 0 0 0 1px var(--notification-ring);
}

/* line 137, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__icon::before, .notification-toast__icon::after {
  content: "";
  display: block;
  grid-area: 1 / 1;
  background: var(--notification-accent);
}

/* line 146, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--success .notification-toast__icon::before {
  width: 0.55rem;
  height: 1rem;
  border-right: 2px solid var(--notification-accent);
  border-bottom: 2px solid var(--notification-accent);
  background: transparent;
  transform: translateY(-0.12rem) rotate(45deg);
}

/* line 155, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--success .notification-toast__icon::after {
  display: none;
}

/* line 159, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--info .notification-toast__icon::before, .notification-toast--warning .notification-toast__icon::before {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--notification-accent);
  border-radius: 999px;
  background: transparent;
}

/* line 168, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--info .notification-toast__icon::after, .notification-toast--warning .notification-toast__icon::after {
  width: 0.18rem;
  height: 0.7rem;
  border-radius: 999px;
  box-shadow: 0 0.52rem 0 -0.2rem var(--notification-accent);
}

/* line 176, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--error .notification-toast__icon::before, .notification-toast--error .notification-toast__icon::after {
  width: 1rem;
  height: 2px;
  border-radius: 999px;
}

/* line 183, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--error .notification-toast__icon::before {
  transform: rotate(45deg);
}

/* line 187, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast--error .notification-toast__icon::after {
  transform: rotate(-45deg);
}

/* line 191, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__body {
  grid-area: body;
  display: flex;
  flex-flow: column;
  gap: 0.22rem;
  min-width: 0;
}

/* line 199, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__title {
  margin: 0;
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.16;
  text-wrap: balance;
}

/* line 208, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__message {
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* line 215, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__actions {
  display: flex;
  flex-flow: row wrap;
  gap: 0.55rem;
  margin-top: 0.48rem;
}

/* line 222, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  min-width: 4.25rem;
  padding: 0.65rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: rgba(22, 22, 22, 0.78);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.14);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

/* line 246, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__action:hover, .notification-toast__action:focus-visible {
  background: #f8fbff;
  color: #161616;
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--notification-ring), 0 0.8rem 1.4rem rgba(15, 23, 42, 0.08);
}

/* line 258, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__close {
  grid-area: close;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: rgba(22, 22, 22, 0.62);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

/* line 273, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__close span,
.notification-toast__close span::after {
  display: block;
  width: 1rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}

/* line 283, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__close span::after {
  content: "";
  transform: rotate(90deg);
}

/* line 288, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__close:hover, .notification-toast__close:focus-visible, .notification-toast__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 298, app/assets/stylesheets/partials/_notifications.scss */
.notification-toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 0.18rem;
  background: linear-gradient(90deg, var(--notification-accent), transparent 96%);
  transform-origin: left center;
  animation: notification-toast-progress var(--notification-duration) linear forwards;
}

@keyframes notification-toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 322, app/assets/stylesheets/partials/_notifications.scss */
  .notifications {
    top: auto;
    right: 0.8rem;
    bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
    left: 0.8rem;
  }
  /* line 328, app/assets/stylesheets/partials/_notifications.scss */
  .notifications__stack {
    align-items: stretch;
  }
  /* line 333, app/assets/stylesheets/partials/_notifications.scss */
  .notification-toast {
    grid-template-columns: 2.55rem minmax(0, 1fr) 2.1rem;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0.85rem 0.78rem 0.94rem;
    border-radius: 8px;
    transform: translateY(0.75rem) scale(0.98);
  }
  /* line 342, app/assets/stylesheets/partials/_notifications.scss */
  .notification-toast.is-visible {
    transform: translateY(0) scale(1);
  }
  /* line 346, app/assets/stylesheets/partials/_notifications.scss */
  .notification-toast__icon {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 999px;
  }
  /* line 352, app/assets/stylesheets/partials/_notifications.scss */
  .notification-toast__title {
    font-size: 0.94rem;
  }
  /* line 356, app/assets/stylesheets/partials/_notifications.scss */
  .notification-toast__message {
    font-size: 0.86rem;
    line-height: 1.42;
  }
  /* line 361, app/assets/stylesheets/partials/_notifications.scss */
  .notification-toast__close {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
  }
}

/* line 1, app/assets/stylesheets/partials/_login.scss */
.login-container {
  display: flex;
  flex-flow: column;
  max-width: 38rem;
  width: 100%;
  margin: 1.5rem auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem;
  position: relative;
  width: 100%;
  max-width: 38rem;
  padding: 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
}

/* line 14, app/assets/stylesheets/partials/_login.scss */
.login-content {
  display: grid;
  justify-items: center;
  gap: 1.35rem;
  width: 100%;
  text-align: center;
}

/* line 21, app/assets/stylesheets/partials/_login.scss */
.login-content__intro {
  display: grid;
  justify-items: center;
  gap: .55rem;
}

/* line 27, app/assets/stylesheets/partials/_login.scss */
.login-content__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 37, app/assets/stylesheets/partials/_login.scss */
.login-content__title {
  margin: 0;
  color: #161616;
  font-size: clamp(1.8rem, 5vw, 2.35rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.025em;
}

/* line 46, app/assets/stylesheets/partials/_login.scss */
.login-content__copy {
  max-width: 25rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  line-height: 1.5;
}

/* line 53, app/assets/stylesheets/partials/_login.scss */
.login-content__note {
  margin: 0;
  color: rgba(22, 22, 22, 0.5);
  font-size: .78rem;
  font-weight: 700;
}

/* line 61, app/assets/stylesheets/partials/_login.scss */
.button--sign-in {
  min-height: 3.7rem;
  width: 100%;
  padding: .65rem .8rem;
  justify-content: center;
  gap: .75rem;
  border-radius: .85rem;
  text-align: center;
}

/* line 70, app/assets/stylesheets/partials/_login.scss */
.button--sign-in > svg {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  max-width: 1.35rem;
  max-height: 1.35rem;
}

/* line 78, app/assets/stylesheets/partials/_login.scss */
.button--sign-in .sign-in-button__label {
  flex: 0 0 auto;
}

/* line 82, app/assets/stylesheets/partials/_login.scss */
.button--sign-in .sign-in-button__arrow {
  padding: 0 .2rem;
  color: currentColor;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease;
}

/* line 93, app/assets/stylesheets/partials/_login.scss */
.button--sign-in:hover .sign-in-button__arrow, .button--sign-in:focus-visible .sign-in-button__arrow {
  color: currentColor;
  transform: translateX(0.15rem);
}

/* line 100, app/assets/stylesheets/partials/_login.scss */
.login-content > .sign-in-form + .sign-in-form {
  margin-top: -.6rem;
}

/* line 104, app/assets/stylesheets/partials/_login.scss */
.button--sign-in.button--discord {
  --button-bg: #5865F2;
  --button-bg-hover: #4752d7;
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .65rem 1.35rem rgba($discord-color, .2);
  --button-shadow-hover: 0 .85rem 1.6rem rgba($discord-color, .28);
}

/* line 112, app/assets/stylesheets/partials/_login.scss */
.button--sign-in.button--discord:hover, .button--sign-in.button--discord:focus-visible {
  color: #fff;
}

/* line 118, app/assets/stylesheets/partials/_login.scss */
.button--sign-in.button--twitch {
  --button-bg: #6441a5;
  --button-bg-hover: #543486;
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .65rem 1.35rem rgba($twitch-color, .2);
  --button-shadow-hover: 0 .85rem 1.6rem rgba($twitch-color, .28);
}

/* line 126, app/assets/stylesheets/partials/_login.scss */
.button--sign-in.button--twitch:hover, .button--sign-in.button--twitch:focus-visible {
  color: #fff;
}

/* line 133, app/assets/stylesheets/partials/_login.scss */
.button--sign-in-google .sign-in-button__arrow {
  color: rgba(22, 22, 22, 0.45);
}

@media only screen and (max-width: 32rem) {
  /* line 139, app/assets/stylesheets/partials/_login.scss */
  .login-container {
    margin: 1rem auto;
    padding: 1.35rem;
  }
  /* line 144, app/assets/stylesheets/partials/_login.scss */
  .login-content {
    gap: 1.1rem;
  }
}

/* line 1, app/assets/stylesheets/partials/_profile.scss */
.pfp-image {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* line 8, app/assets/stylesheets/partials/_profile.scss */
.pfp-image img {
  width: 100%;
  height: auto;
}

/* line 13, app/assets/stylesheets/partials/_profile.scss */
.pfp-image--large {
  height: 8rem;
  width: 8rem;
}

/* line 18, app/assets/stylesheets/partials/_profile.scss */
.pfp-image--xlarge {
  height: 10rem;
  width: 10rem;
}

/* line 23, app/assets/stylesheets/partials/_profile.scss */
.pfp-image--unclickable {
  cursor: default;
}

/* line 29, app/assets/stylesheets/partials/_profile.scss */
.profile {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 1rem;
}

/* line 35, app/assets/stylesheets/partials/_profile.scss */
.profile__badges {
  display: flex;
  flex-flow: row wrap;
  gap: .5rem;
  padding: .5rem 0;
}

/* line 43, app/assets/stylesheets/partials/_profile.scss */
.profile__badge img {
  display: block;
  height: 1.25rem;
  width: auto;
}

/* line 49, app/assets/stylesheets/partials/_profile.scss */
.profile__badge svg {
  height: 1.25rem;
}

/* line 50, app/assets/stylesheets/partials/_profile.scss */
.profile__badge svg.discord {
  fill: #5865F2;
}

/* line 53, app/assets/stylesheets/partials/_profile.scss */
.profile__badge svg.twitch {
  fill: #6441a5;
}

/* line 63, app/assets/stylesheets/partials/_profile.scss */
.profile-notice {
  font-size: .875rem;
  color: rgba(22, 22, 22, 0.6);
  line-height: 1.4;
}

/* line 68, app/assets/stylesheets/partials/_profile.scss */
.profile-notice a {
  color: #0f68d3;
}

/* line 71, app/assets/stylesheets/partials/_profile.scss */
.profile-hero {
  display: flex;
  flex-flow: column;
  gap: 2.5rem;
}

/* line 76, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__top {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: 2rem;
}

/* line 83, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__avatar {
  flex-shrink: 0;
}

/* line 87, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__info {
  display: flex;
  flex-flow: column;
  gap: .5rem;
  padding-top: .5rem;
  min-width: 0;
}

/* line 95, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__name {
  margin: 0;
  color: #161616;
  font-size: 2.5rem;
  line-height: 1.05;
  word-break: break-word;
}

/* line 103, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__bio {
  margin-top: .25rem;
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(22, 22, 22, 0.65);
  max-width: 34rem;
}

/* line 110, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__bio p {
  font-size: .95rem;
  color: rgba(22, 22, 22, 0.65);
}

/* line 113, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__stats {
  display: flex;
  flex-flow: row wrap;
  gap: 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(22, 22, 22, 0.1);
}

/* line 121, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__stat {
  display: flex;
  flex-flow: column;
  gap: .3rem;
}

/* line 126, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__stat:not(:last-child) {
  padding-right: 2.5rem;
  margin-right: 2.5rem;
  border-right: 1px solid rgba(22, 22, 22, 0.1);
}

/* line 133, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__stat-value {
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: #161616;
}

/* line 141, app/assets/stylesheets/partials/_profile.scss */
.profile-hero__stat-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: rgba(22, 22, 22, 0.4);
  white-space: nowrap;
}

/* line 151, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 1.5rem 1.25rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  color: #161616;
  transition: 160ms ease-in-out;
  flex-shrink: 0;
  margin-left: auto;
}

/* line 166, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote:hover {
  border-color: rgba(15, 104, 211, 0.25);
  box-shadow: 0 6px 16px rgba(22, 22, 22, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
}

/* line 173, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote__eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.38);
  line-height: 1;
  align-self: flex-start;
}

/* line 183, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem 0;
}

/* line 191, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote__image img {
  max-width: 5rem;
  max-height: 5rem;
}

/* line 197, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote__name {
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: #161616;
  line-height: 1;
  text-align: center;
}

/* line 206, app/assets/stylesheets/partials/_profile.scss */
.profile-featured-emote__downloads {
  font-size: 0.7rem;
  color: rgba(22, 22, 22, 0.45);
  font-weight: 600;
}

/* line 213, app/assets/stylesheets/partials/_profile.scss */
.profile-top-tags {
  display: flex;
  flex-flow: column;
  gap: 0.75rem;
}

/* line 218, app/assets/stylesheets/partials/_profile.scss */
.profile-top-tags__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(22, 22, 22, 0.48);
  line-height: 1;
}

/* line 228, app/assets/stylesheets/partials/_profile.scss */
.profile-top-tags__list {
  justify-content: flex-start;
}

/* line 233, app/assets/stylesheets/partials/_profile.scss */
.profile-emote-list {
  margin-top: 1rem;
}

/* line 237, app/assets/stylesheets/partials/_profile.scss */
.profile-settings {
  flex-flow: row wrap;
  gap: 2rem;
}

/* line 242, app/assets/stylesheets/partials/_profile.scss */
.profile-setting {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  max-width: 100%;
  flex-grow: 1;
  flex-basis: 22.5rem;
}

/* line 250, app/assets/stylesheets/partials/_profile.scss */
.profile-setting form {
  max-width: 44rem;
}

/* line 255, app/assets/stylesheets/partials/_profile.scss */
.profile-setting__sec-info {
  max-width: 40rem;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1rem;
}

/* line 263, app/assets/stylesheets/partials/_profile.scss */
.profile-setting__form {
  max-width: 45rem;
}

/* line 266, app/assets/stylesheets/partials/_profile.scss */
.profile-setting__form--row {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 1rem;
}

/* line 274, app/assets/stylesheets/partials/_profile.scss */
.profile-setting__upload-field {
  max-width: 100%;
}

/* line 277, app/assets/stylesheets/partials/_profile.scss */
.profile-setting__upload-field input {
  max-width: 100%;
}

/* line 284, app/assets/stylesheets/partials/_profile.scss */
.connected-accounts {
  display: flex;
  max-width: 45rem;
  flex-flow: column;
  gap: 0.75rem;
}

/* line 291, app/assets/stylesheets/partials/_profile.scss */
.connected-account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.1);
}

/* line 301, app/assets/stylesheets/partials/_profile.scss */
.connected-account__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  background: rgba(22, 22, 22, 0.06);
}

/* line 310, app/assets/stylesheets/partials/_profile.scss */
.connected-account__icon img {
  width: 1.35rem;
  height: 1.35rem;
}

/* line 316, app/assets/stylesheets/partials/_profile.scss */
.connected-account__body {
  display: flex;
  min-width: 0;
  flex-flow: column;
  gap: 0.12rem;
}

/* line 323, app/assets/stylesheets/partials/_profile.scss */
.connected-account__name {
  color: #161616;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
}

/* line 330, app/assets/stylesheets/partials/_profile.scss */
.connected-account__meta {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.84rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 339, app/assets/stylesheets/partials/_profile.scss */
.connected-account__status {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  font-size: 0.78rem;
  font-weight: 800;
}

/* line 351, app/assets/stylesheets/partials/_profile.scss */
.connected-account__note {
  color: rgba(22, 22, 22, 0.45);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 358, app/assets/stylesheets/partials/_profile.scss */
.connected-account__action {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

/* line 366, app/assets/stylesheets/partials/_profile.scss */
.connected-account__form {
  margin: 0;
}

/* line 370, app/assets/stylesheets/partials/_profile.scss */
.connected-account__connect, .connected-account__disconnect {
  min-height: 2rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  transition: 160ms ease-in-out;
}

/* line 381, app/assets/stylesheets/partials/_profile.scss */
.connected-account__connect {
  color: #fff;
}

/* line 384, app/assets/stylesheets/partials/_profile.scss */
.connected-account__connect:hover {
  box-shadow: inset 0 -2rem 0 rgba(0, 0, 0, 0.08);
}

/* line 388, app/assets/stylesheets/partials/_profile.scss */
.connected-account__connect--discord {
  background: #5865F2;
}

/* line 392, app/assets/stylesheets/partials/_profile.scss */
.connected-account__connect--twitch {
  background: #6441a5;
}

/* line 397, app/assets/stylesheets/partials/_profile.scss */
.connected-account__disconnect {
  background: rgba(22, 22, 22, 0.08);
  color: rgba(22, 22, 22, 0.68);
}

/* line 401, app/assets/stylesheets/partials/_profile.scss */
.connected-account__disconnect:hover {
  background: rgba(217, 45, 32, 0.1);
  color: #b42318;
}

@media only screen and (max-width: 64rem) {
  /* line 411, app/assets/stylesheets/partials/_profile.scss */
  .profile-hero__name {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 418, app/assets/stylesheets/partials/_profile.scss */
  .connected-account {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* line 421, app/assets/stylesheets/partials/_profile.scss */
  .connected-account__action {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  /* line 427, app/assets/stylesheets/partials/_profile.scss */
  .profile-hero {
    gap: 2rem;
  }
  /* line 430, app/assets/stylesheets/partials/_profile.scss */
  .profile-hero__top {
    flex-flow: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  /* line 436, app/assets/stylesheets/partials/_profile.scss */
  .profile-hero__name {
    font-size: 1.75rem;
  }
  /* line 441, app/assets/stylesheets/partials/_profile.scss */
  .profile-hero__stat:not(:last-child) {
    padding-right: 1.5rem;
    margin-right: 1.5rem;
  }
  /* line 447, app/assets/stylesheets/partials/_profile.scss */
  .profile-hero__stat-value {
    font-size: 1.5rem;
  }
  /* line 452, app/assets/stylesheets/partials/_profile.scss */
  .profile-featured-emote {
    display: none;
  }
}

/* line 7, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show {
  width: 100%;
}

/* line 10, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__main {
  min-width: 0;
}

/* line 14, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail {
  display: none;
  min-width: 0;
}

/* line 19, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-inner {
  position: sticky;
  top: 4.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* line 27, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-inner #sidebar_btf_placeholder, .emote-show__rail-inner .sidebar_btf_placeholder {
  width: 100%;
}

/* line 32, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-inner #sidebar_btf_sticky_wrapper {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
}

/* line 38, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-inner #sidebar_btf_wrapper {
  max-width: 100%;
  margin-inline: auto;
}

/* line 43, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-card {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.75rem 1.75rem rgba(22, 22, 22, 0.06);
}

/* line 54, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-eyebrow, .emote-show__rail-section {
  color: rgba(22, 22, 22, 0.48);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

/* line 63, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-section {
  margin-top: 0.35rem;
}

/* line 67, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 75, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-item {
  min-width: 0;
}

/* line 79, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-link {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 0.45rem;
  color: #161616;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* line 89, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-link:hover {
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 94, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-link--primary {
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 100, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-link-label {
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 109, app/assets/stylesheets/partials/_emote-details.scss */
.emote-show__rail-link-text {
  color: rgba(22, 22, 22, 0.6);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

@media only screen and (min-width: 68.75rem) {
  /* line 7, app/assets/stylesheets/partials/_emote-details.scss */
  .emote-show {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
    justify-content: center;
    max-width: calc(64rem + 20rem + 1.5rem);
  }
  /* line 124, app/assets/stylesheets/partials/_emote-details.scss */
  .emote-show__rail {
    display: block;
    align-self: stretch;
  }
}

@media only screen and (max-width: calc(68.75rem - .01rem)) {
  /* line 131, app/assets/stylesheets/partials/_emote-details.scss */
  .emote-show__rail-inner #sidebar_btf_placeholder {
    display: none !important;
  }
}

/* line 137, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  width: 100%;
}

/* line 143, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__top {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}

/* line 151, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__details {
  display: flex;
  flex-flow: column;
  width: 100%;
  gap: .75rem;
  flex-grow: 1;
}

/* line 159, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__name {
  display: inline-grid;
  text-align: center;
}

/* line 166, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__name h1, .emote-details__name h2, .emote-details__name h3 {
  height: 2.1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  font-size: 2em;
  line-height: 1;
}

/* line 177, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__name a {
  color: inherit;
  text-decoration: none;
}

/* line 181, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__name a:hover {
  text-decoration: underline;
}

/* line 187, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author {
  display: flex;
  flex-flow: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: .25rem;
}

/* line 196, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author a {
  text-decoration: none;
  color: #161616;
}

/* line 200, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author a:hover {
  text-decoration: underline;
}

/* line 205, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author-downloads {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

/* line 214, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author-downloads svg {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
}

/* line 221, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author-separator {
  color: rgba(22, 22, 22, 0.35);
  font-weight: 700;
}

/* line 226, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author-platform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  height: 1rem;
  width: auto;
}

/* line 234, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__author-platform svg,
.emote-details__author-platform img {
  max-height: 1rem;
  width: auto;
}

/* line 242, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__buttons-out {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  position: absolute;
}

/* line 249, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__tags {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: center;
  gap: .75rem;
  font-size: .95rem;
}

/* line 257, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__tags a {
  color: #0f68d3;
  text-decoration: none;
}

/* line 261, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__tags a:hover {
  text-decoration: underline;
}

/* line 267, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__tag-plain {
  color: rgba(22, 22, 22, 0.5);
}

/* line 271, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__no-tags {
  text-align: center;
  opacity: .6;
}

/* line 276, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  padding-top: 0.25rem;
}

/* line 283, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* line 290, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-eyebrow {
  margin: 0;
  color: rgba(22, 22, 22, 0.48);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 300, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-search {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #0f68d3;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* line 311, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-search svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* line 316, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-search:hover {
  text-decoration: underline;
}

/* line 321, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-list {
  display: flex;
  gap: 0.5rem;
  scrollbar-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.1rem 0.1rem 0.35rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* line 331, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-list::-webkit-scrollbar {
  display: none;
}

/* line 336, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-item {
  display: grid;
  flex: 0 0 5.6rem;
  min-width: 0;
  gap: 0.35rem;
  justify-items: center;
  padding: 0.5rem 0.35rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.75);
  color: #161616;
  text-decoration: none;
  scroll-snap-align: start;
  transition: 160ms ease-in-out;
}

/* line 351, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-item:hover {
  border-color: rgba(15, 104, 211, 0.28);
  box-shadow: 0 8px 18px rgba(22, 22, 22, 0.08);
  transform: translateY(-1px);
}

/* line 357, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-item span {
  width: 100%;
  overflow: hidden;
  color: rgba(22, 22, 22, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 370, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
}

/* line 378, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__similar-image img {
  max-width: 3rem;
  max-height: 3rem;
}

/* line 384, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__image {
  height: 8rem;
  width: 8rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
  cursor: default;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* line 396, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__image img {
  max-height: 8rem;
  max-width: 8rem;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

/* line 406, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  cursor: default;
}

/* line 414, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__disclaimer {
  display: flex;
  flex-flow: column;
}

/* line 419, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__license {
  display: grid;
  gap: 0.22rem;
  width: 100%;
  background: #fff;
  padding: 0.85rem 1rem 0.9rem;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

/* line 429, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__license-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.48);
  line-height: 1;
}

/* line 439, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__license-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.15;
  color: #161616;
}

/* line 446, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__license .info-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.42;
  color: rgba(22, 22, 22, 0.72);
}

/* line 454, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__status.emote-item__state {
  flex-flow: column;
  align-items: center;
  text-align: left;
  gap: 0.75rem;
}

/* line 462, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__status-line {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* line 468, app/assets/stylesheets/partials/_emote-details.scss */
.emote-details__status-reason {
  margin-top: 0;
}

/* line 472, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(22, 22, 22, 0.1);
}

/* line 481, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

/* line 488, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__copy {
  display: grid;
  gap: 0.35rem;
}

/* line 493, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__eyebrow {
  margin: 0;
  color: rgba(22, 22, 22, 0.52);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/* line 502, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes h2 {
  margin: 0;
  color: #161616;
  font-size: 1.65rem;
  line-height: 1.1;
}

/* line 509, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f68d3;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* line 519, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__link:hover {
  text-decoration: underline;
}

/* line 523, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__link svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* line 529, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__grid {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.75rem;
  align-content: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem;
}

/* line 542, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__grid::-webkit-scrollbar {
  display: none;
}

/* line 547, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__result {
  position: relative;
  min-width: 0;
  flex: 0 0 8.5rem;
  scroll-snap-align: start;
}

/* line 554, app/assets/stylesheets/partials/_emote-details.scss */
.similar-emotes__result .emote-item {
  height: 100%;
}

@media only screen and (min-width: 32rem) {
  /* line 560, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
  /* line 566, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__result {
    flex: initial;
  }
}

@media only screen and (min-width: 48rem) {
  /* line 572, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 64rem) {
  /* line 578, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 32rem) and (max-width: 47.99rem) {
  /* line 585, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__result:nth-child(n + 9) {
    display: none;
  }
}

@media only screen and (min-width: 48rem) and (max-width: 63.99rem) {
  /* line 591, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__result:nth-child(n + 13) {
    display: none;
  }
}

@media only screen and (min-width: 64rem) {
  /* line 597, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__result:nth-child(n + 17) {
    display: none;
  }
}

/* line 602, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser {
  position: relative;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 1.25rem;
  background: radial-gradient(120% 140% at 0% 0%, rgba(15, 104, 211, 0.1) 0%, rgba(15, 104, 211, 0) 55%), radial-gradient(120% 140% at 100% 100%, rgba(15, 104, 211, 0.08) 0%, rgba(255, 255, 255, 0) 60%), #fff;
  box-shadow: 0 14px 36px rgba(22, 22, 22, 0.07);
  overflow: hidden;
}

/* line 620, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__copy {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

/* line 625, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__copy h2 {
  margin: 0;
  color: #161616;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* line 635, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__lede {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 48ch;
}

/* line 644, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.32rem 0.6rem 0.32rem 0.5rem;
  width: fit-content;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 660, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__eyebrow svg {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
}

/* line 667, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__form {
  min-width: 0;
}

/* line 671, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-sizing: border-box;
  min-width: 0;
  min-height: clamp(3rem, 6vw, 3.5rem);
  padding: 0.3rem 0.3rem 0.3rem clamp(0.9rem, 2vw, 1.15rem);
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

/* line 685, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__field:hover {
  border-color: rgba(22, 22, 22, 0.22);
}

/* line 689, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__field:focus-within {
  border-color: rgba(15, 104, 211, 0.55);
  box-shadow: 0 0 0 4px rgba(15, 104, 211, 0.16);
}

/* line 695, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: rgba(22, 22, 22, 0.42);
  pointer-events: none;
  transition: color 160ms ease;
}

/* line 704, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__field-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 709, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__field:focus-within .emote-search-teaser__field-icon {
  color: #0f68d3;
}

/* line 714, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__input[type='search'] {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #161616;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1rem);
  font-weight: 700;
  outline: none;
}

/* line 729, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__input[type='search']::placeholder {
  color: rgba(22, 22, 22, 0.42);
  font-weight: 600;
}

/* line 734, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* line 740, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0 1.35rem;
  border: 0;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #1071e6, #0f68d3);
  color: #fff;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(15, 104, 211, 0.28);
  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

/* line 761, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__submit-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

/* line 767, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__submit span {
  display: none;
}

@media (min-width: 30rem) {
  /* line 740, app/assets/stylesheets/partials/_emote-details.scss */
  .emote-search-teaser__submit {
    padding: 0 1.5rem;
  }
  /* line 774, app/assets/stylesheets/partials/_emote-details.scss */
  .emote-search-teaser__submit span {
    display: inline;
  }
}

@media (max-width: 29.99rem) {
  /* line 740, app/assets/stylesheets/partials/_emote-details.scss */
  .emote-search-teaser__submit {
    aspect-ratio: 1;
    padding: 0;
  }
}

/* line 785, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__submit:hover {
  background: linear-gradient(180deg, #0f68d3, #0d5ab6);
  box-shadow: 0 6px 14px rgba(15, 104, 211, 0.34);
}

/* line 790, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(15, 104, 211, 0.28), 0 6px 14px rgba(15, 104, 211, 0.32);
}

/* line 795, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__submit:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(15, 104, 211, 0.28);
}

/* line 801, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

/* line 808, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(15, 104, 211, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #0f68d3;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

/* line 826, app/assets/stylesheets/partials/_emote-details.scss */
.emote-search-teaser__chip:hover, .emote-search-teaser__chip:focus-visible {
  border-color: rgba(15, 104, 211, 0.4);
  background: rgba(15, 104, 211, 0.1);
  transform: translateY(-1px);
  outline: none;
}

@media only screen and (max-width: 30rem) {
  /* line 836, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }
  /* line 841, app/assets/stylesheets/partials/_emote-details.scss */
  .similar-emotes__header {
    align-items: flex-start;
    flex-flow: column;
  }
}

/* line 1, app/assets/stylesheets/partials/_filter.scss */
.search-filter {
  display: flex;
  flex-flow: column;
  gap: .75rem;
}

/* line 6, app/assets/stylesheets/partials/_filter.scss */
.search-filter__items {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

/* line 12, app/assets/stylesheets/partials/_filter.scss */
.search-filter__primary {
  display: grid;
  gap: .45rem;
}

/* line 17, app/assets/stylesheets/partials/_filter.scss */
.search-filter__primary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
}

/* line 24, app/assets/stylesheets/partials/_filter.scss */
.search-filter__additional {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .55rem 1.1rem;
  margin-top: .65rem;
}

/* line 31, app/assets/stylesheets/partials/_filter.scss */
.search-filter__additional[hidden] {
  display: none;
}

/* line 36, app/assets/stylesheets/partials/_filter.scss */
.search-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.9rem;
  padding: .38rem .68rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(22, 22, 22, 0.045);
  color: rgba(22, 22, 22, 0.58);
  font-size: .73rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* line 52, app/assets/stylesheets/partials/_filter.scss */
.search-filter__toggle svg {
  width: .78rem;
  height: .78rem;
}

/* line 57, app/assets/stylesheets/partials/_filter.scss */
.search-filter__toggle:hover, .search-filter__toggle[aria-expanded='true'], .search-filter__toggle.is-active {
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 65, app/assets/stylesheets/partials/_filter.scss */
.search-filter__toggle-count {
  display: grid;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: #0f68d3;
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
  place-items: center;
}

/* line 79, app/assets/stylesheets/partials/_filter.scss */
.search__collection {
  position: relative;
}

/* line 83, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button {
  --collection-accent-rgb: 15, 104, 211;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 20rem;
  min-height: 2.1rem;
  padding: .25rem .35rem;
  overflow: hidden;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(22, 22, 22, 0.07);
  color: #161616;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* line 102, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button:hover, .active-collection-button:focus-visible {
  border-color: rgba(var(--collection-accent-rgb), 0.35);
  box-shadow: 0 2px 8px rgba(var(--collection-accent-rgb), 0.12);
}

/* line 108, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button--discord {
  background: #313338;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  color: #fff;
}

/* line 114, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button--discord:hover, .active-collection-button--discord:focus-visible {
  border-color: rgba(var(--collection-accent-rgb), 0.55);
  box-shadow: 0 2px 10px rgba(var(--collection-accent-rgb), 0.2);
}

/* line 120, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button--discord .active-collection-button__count {
  background: rgba(var(--collection-accent-rgb), 0.95);
  color: #fff;
}

/* line 127, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher {
  --collection-accent-rgb: 15, 104, 211;
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  display: none;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  max-height: 22rem;
  padding: .35rem;
  overflow: auto;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .7rem;
  background: #fff;
  box-shadow: 0 14px 38px rgba(22, 22, 22, 0.16);
  z-index: 40;
}

/* line 145, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher[hidden] {
  display: none !important;
}

/* line 149, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher.is-open {
  display: grid;
  gap: .2rem;
}

/* line 155, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__option {
  --collection-accent-rgb: 15, 104, 211;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: .45rem .55rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #161616;
  cursor: pointer;
  text-align: left;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* line 173, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__option:hover, .active-collection-switcher__option:focus-visible {
  background: rgba(22, 22, 22, 0.04);
  outline: none;
}

/* line 179, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__option.is-active {
  background: rgba(var(--collection-accent-rgb), 0.09);
  box-shadow: inset 0 0 0 1px rgba(var(--collection-accent-rgb), 0.32);
}

/* line 185, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__option--discord .active-collection-switcher__icon {
  background: #313338;
  color: #fff;
}

/* line 192, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .45rem;
  background: rgba(var(--collection-accent-rgb), 0.12);
  color: rgba(var(--collection-accent-rgb), 1);
}

/* line 202, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__icon svg {
  width: .95rem;
  height: .95rem;
  stroke: currentColor;
}

/* line 208, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__icon--image {
  overflow: hidden;
  background: #313338;
  color: #fff;
}

/* line 213, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__icon--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 221, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

/* line 226, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__copy strong,
.active-collection-switcher__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 233, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__copy strong {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.15;
}

/* line 239, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__copy span {
  color: rgba(22, 22, 22, 0.56);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.2;
}

/* line 247, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__count {
  min-width: 1.55rem;
  padding: .22rem .4rem;
  border-radius: 999px;
  background: rgba(var(--collection-accent-rgb), 0.12);
  color: rgba(var(--collection-accent-rgb), 1);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

/* line 259, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo {
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  width: 100%;
  min-height: 2.9rem;
  padding: .5rem .55rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.24);
  color: #161616;
  cursor: pointer;
  text-align: left;
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* line 276, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo:hover, .active-collection-switcher__discord-promo:focus-visible {
  background: rgba(88, 101, 242, 0.16);
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.38);
  outline: none;
}

/* line 284, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .45rem;
  background: #5865F2;
  color: #fff;
}

/* line 294, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo-icon svg {
  width: 1rem;
  height: 1rem;
}

/* line 300, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__manage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  width: 100%;
  margin-top: .15rem;
  padding: .55rem .55rem;
  border: 0;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 0 0 0.5rem 0.5rem;
  background: transparent;
  color: rgba(22, 22, 22, 0.62);
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

/* line 319, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__manage svg {
  flex: 0 0 auto;
  width: .4rem;
  height: .6rem;
}

/* line 325, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__manage:hover, .active-collection-switcher__manage:focus-visible {
  background: rgba(22, 22, 22, 0.04);
  color: #161616;
  outline: none;
}

/* line 333, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo-copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

/* line 338, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo-copy strong,
.active-collection-switcher__discord-promo-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 345, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo-copy strong {
  color: #161616;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.15;
}

/* line 352, app/assets/stylesheets/partials/_filter.scss */
.active-collection-switcher__discord-promo-copy span {
  color: rgba(22, 22, 22, 0.6);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.2;
}

@media (hover: none), (pointer: coarse) {
  /* line 364, app/assets/stylesheets/partials/_filter.scss */
  .active-collection-switcher {
    width: min(19rem, calc(100vw - 1.5rem));
  }
  /* line 368, app/assets/stylesheets/partials/_filter.scss */
  .active-collection-switcher:not(.is-open) {
    display: none !important;
  }
}

@media (max-height: 30rem) {
  /* line 375, app/assets/stylesheets/partials/_filter.scss */
  .active-collection-switcher {
    max-height: calc(100vh - 8rem);
  }
}

/* line 380, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(var(--collection-accent-rgb), 0.12);
  color: rgba(var(--collection-accent-rgb), 1);
}

/* line 391, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__icon svg {
  width: .85rem;
  height: .85rem;
  stroke: currentColor;
}

/* line 397, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__icon--image {
  overflow: hidden;
  background: #313338;
  color: #fff;
}

/* line 402, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__icon--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 410, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__copy {
  display: grid;
  gap: .08rem;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* line 418, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__eyebrow {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.52);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 429, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button--discord .active-collection-button__eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

/* line 434, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__label {
  min-width: 0;
  max-width: 11rem;
  overflow: hidden;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 446, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__caret {
  flex: 0 0 auto;
  width: .55rem;
  height: .38rem;
  margin-right: .2rem;
  opacity: .55;
}

/* line 454, app/assets/stylesheets/partials/_filter.scss */
.active-collection-button__count {
  flex: 0 0 auto;
  padding: .2rem .45rem;
  border-radius: 999px;
  background: rgba(var(--collection-accent-rgb), 1);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@media only screen and (max-width: 32rem) {
  /* line 499, app/assets/stylesheets/partials/_filter.scss */
  .search__collection .active-collection-button {
    max-width: none;
    min-height: 1.8rem;
    gap: .3rem;
    padding: .2rem .3rem;
    box-shadow: none;
  }
  /* line 475, app/assets/stylesheets/partials/_filter.scss */
  .search__collection .active-collection-button .active-collection-button__copy {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* line 487, app/assets/stylesheets/partials/_filter.scss */
  .search__collection .active-collection-button .active-collection-button__icon {
    width: 1.35rem;
    height: 1.35rem;
  }
  /* line 492, app/assets/stylesheets/partials/_filter.scss */
  .search__collection .active-collection-button .active-collection-button__count {
    padding: .18rem .4rem;
    font-size: .68rem;
  }
}

/* line 504, app/assets/stylesheets/partials/_filter.scss */
.search-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  min-width: 0;
}

/* line 511, app/assets/stylesheets/partials/_filter.scss */
.search-filter-group__name {
  color: rgba(22, 22, 22, 0.45);
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 520, app/assets/stylesheets/partials/_filter.scss */
.search-filter-group__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .32rem;
  min-width: 0;
}

/* line 528, app/assets/stylesheets/partials/_filter.scss */
.search-filter-group__option-row {
  display: contents;
}

/* line 533, app/assets/stylesheets/partials/_filter.scss */
.search-filter-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: .38rem .68rem;
  border: 1px solid rgba(22, 22, 22, 0.085);
  border-radius: 0.5rem;
  background: rgba(22, 22, 22, 0.02);
  color: rgba(22, 22, 22, 0.62);
  font-size: .73rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}

/* line 551, app/assets/stylesheets/partials/_filter.scss */
.search-filter-option input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* line 559, app/assets/stylesheets/partials/_filter.scss */
.search-filter-option svg {
  width: .75rem;
  height: .75rem;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  /* line 566, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-option:hover {
    border-color: rgba(15, 104, 211, 0.24);
    background: rgba(15, 104, 211, 0.05);
    color: #0f68d3;
  }
}

/* line 573, app/assets/stylesheets/partials/_filter.scss */
.search-filter-option:has(input:focus-visible) {
  outline: 2px solid rgba(15, 104, 211, 0.75);
  outline-offset: 2px;
}

/* line 578, app/assets/stylesheets/partials/_filter.scss */
.search-filter-option:has(input:checked) {
  border-color: rgba(15, 104, 211, 0.32);
  background: rgba(15, 104, 211, 0.09);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.045);
  color: #0f68d3;
}

/* line 585, app/assets/stylesheets/partials/_filter.scss */
.search-filter-option--with-icon {
  gap: .42rem;
}

@media (hover: none), (pointer: coarse) {
  /* line 591, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-option:has(input:focus-visible) {
    outline: none;
  }
}

/* line 596, app/assets/stylesheets/partials/_filter.scss */
.search-filter-item__dropdown-item {
  display: flex;
  flex-flow: row;
  gap: .5rem;
  justify-content: space-between;
  padding: .6rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* line 607, app/assets/stylesheets/partials/_filter.scss */
.search-filter-item__dropdown-item:hover, .search-filter-item__dropdown-item:focus, .search-filter-item__dropdown-item:active {
  background: #f8f8f8;
}

/* line 613, app/assets/stylesheets/partials/_filter.scss */
.search-filter-item__dropdown-item.disabled {
  opacity: .5;
}

@media only screen and (max-width: 64rem) {
  /* line 619, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__additional {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  /* line 624, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__additional[hidden] {
    display: none;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 631, app/assets/stylesheets/partials/_filter.scss */
  .search-filter {
    gap: .65rem;
  }
  /* line 634, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__items {
    display: grid;
    gap: .65rem;
  }
  /* line 639, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__primary {
    gap: .75rem;
  }
  /* line 643, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__primary-row {
    display: block;
  }
  /* line 647, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__additional {
    gap: .8rem;
    margin-top: 0;
    padding: .8rem;
    border: 1px solid rgba(22, 22, 22, 0.075);
    border-radius: .8rem;
    background: rgba(22, 22, 22, 0.018);
    box-shadow: 0 0.25rem 1rem rgba(22, 22, 22, 0.035);
  }
  /* line 657, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__toggle {
    width: 100%;
    min-height: 2.65rem;
    margin-top: .7rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(22, 22, 22, 0.075);
    border-radius: .7rem;
    background: rgba(22, 22, 22, 0.025);
    font-size: .78rem;
    justify-content: flex-start;
  }
  /* line 668, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__toggle svg {
    width: .9rem;
    height: .9rem;
  }
  /* line 673, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__toggle > span:first-of-type {
    margin-right: auto;
  }
  /* line 678, app/assets/stylesheets/partials/_filter.scss */
  .search-filter__toggle-count {
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: .66rem;
  }
  /* line 685, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group {
    display: grid;
    width: 100%;
    gap: .5rem;
    align-items: stretch;
  }
  /* line 691, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group__name {
    padding-left: .08rem;
    font-size: .65rem;
    letter-spacing: .1em;
  }
  /* line 697, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group__options {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: .42rem;
    padding: .15rem .08rem .4rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* line 709, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group__options::-webkit-scrollbar {
    display: none;
  }
  /* line 716, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--sort .search-filter-group__options {
    gap: .32rem;
    padding: .22rem;
    border-radius: .72rem;
    background: rgba(22, 22, 22, 0.035);
  }
  /* line 723, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--sort .search-filter-option {
    flex: 1 0 auto;
    min-width: 5.8rem;
    padding-inline: .3rem;
    border-color: transparent;
    border-radius: 0.5rem;
    background: transparent;
    box-shadow: none;
  }
  /* line 732, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--sort .search-filter-option:has(input:checked) {
    order: initial;
    border-color: rgba(22, 22, 22, 0.07);
    background: #fff;
    box-shadow: 0 1px 4px rgba(22, 22, 22, 0.1);
  }
  /* line 741, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-option {
    flex: 0 0 auto;
    width: auto;
    min-width: 7.5rem;
    min-height: var(--control-compact-height, 2.25rem);
    padding: .58rem .65rem;
    border-radius: 0.5rem;
    font-size: .74rem;
    line-height: 1.15;
    scroll-snap-align: start;
    text-align: center;
  }
  /* line 753, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-option:has(input:checked) {
    order: -1;
  }
  /* line 758, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--advanced {
    padding-top: .75rem;
    border-top: 1px solid rgba(22, 22, 22, 0.07);
  }
  /* line 762, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--advanced .search-filter-group__options {
    display: grid;
    gap: .5rem;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* line 770, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--advanced .search-filter-group__option-row {
    display: flex;
    flex-wrap: nowrap;
    gap: .42rem;
    width: 100%;
    padding: .15rem .08rem .4rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* line 782, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--advanced .search-filter-group__option-row::-webkit-scrollbar {
    display: none;
  }
  /* line 787, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-group--advanced .search-filter-user {
    width: 100%;
    max-width: none;
  }
  /* line 793, app/assets/stylesheets/partials/_filter.scss */
  .search-filter-user {
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
  }
}

/* line 4, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar {
  position: fixed;
  inset: 0;
  z-index: 1300;
}

/* line 9, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar[hidden] {
  display: none;
}

/* line 13, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .25s ease;
}

/* line 21, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-flow: column;
  width: 26.25rem;
  max-width: 100vw;
  height: 100%;
  background: #fafafa;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.22);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
}

/* line 38, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar.is-open .collections-sidebar__backdrop {
  opacity: 1;
}

/* line 42, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar.is-open .collections-sidebar__panel {
  transform: translateX(0);
}

/* line 49, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  background: #fff;
  border-bottom: 1px solid rgba(22, 22, 22, 0.1);
}

/* line 59, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__eyebrow {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f68d3;
}

/* line 68, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__title {
  margin: .15rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #161616;
}

/* line 76, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  background: rgba(22, 22, 22, 0.06);
  color: #161616;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* line 89, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__close svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 94, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__close:hover, .collections-sidebar__close:focus-visible {
  background: rgba(22, 22, 22, 0.12);
}

/* line 102, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create {
  padding: 1rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 108, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-form {
  display: flex;
  gap: .5rem;
}

/* line 113, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-row {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* line 119, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-icon {
  position: absolute;
  top: 50%;
  left: .65rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: rgba(22, 22, 22, 0.45);
  pointer-events: none;
}

/* line 130, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-input {
  width: 100%;
  padding: .68rem .85rem .68rem 2rem;
  border: 1px solid var(--control-border, rgba(22, 22, 22, 0.2));
  border-radius: var(--control-radius, 0.65rem);
  font-size: .95rem;
  color: #161616;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* line 140, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-input::placeholder {
  color: rgba(22, 22, 22, 0.4);
}

/* line 144, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-input:focus {
  outline: none;
  border-color: #0f68d3;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 150, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-input:disabled {
  background: rgba(22, 22, 22, 0.04);
  cursor: not-allowed;
}

/* line 156, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-button {
  flex: 0 0 auto;
  padding: .6rem 1.05rem;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

/* line 167, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-button:hover:not(:disabled), .collections-sidebar__create-button:focus-visible:not(:disabled) {
  background: #0c55ad;
}

/* line 172, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__create-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* line 178, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__signin {
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

/* line 184, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__signin-copy {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(22, 22, 22, 0.7);
}

/* line 191, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__signin-link {
  align-self: flex-start;
  padding: .5rem 1rem;
  border-radius: 0.5rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

/* line 201, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__signin-link:hover {
  background: rgba(15, 104, 211, 0.2);
}

/* line 206, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-form {
  margin: .25rem 0 0;
}

/* line 210, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem .8rem;
  border: 0;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.12), rgba(88, 101, 242, 0.04));
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.28);
  color: #161616;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, box-shadow .15s ease;
}

/* line 225, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo:hover, .collections-sidebar__discord-promo:focus-visible {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.08));
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.5);
}

/* line 231, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .5rem;
  background: #5865f2;
  color: #fff;
}

/* line 242, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 248, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-copy {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: .15rem;
}

/* line 255, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-copy strong {
  font-size: .88rem;
  font-weight: 700;
  color: #161616;
}

/* line 261, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-copy span {
  font-size: .74rem;
  line-height: 1.25;
  color: rgba(22, 22, 22, 0.66);
}

/* line 268, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-promo-chevron {
  flex: 0 0 auto;
  width: .7rem;
  height: 1rem;
  color: #5865f2;
}

/* line 278, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__status {
  margin: 0;
  padding: .7rem 1.25rem;
  font-size: .8rem;
  font-weight: 600;
}

/* line 284, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__status[data-status="error"] {
  background: rgba(211, 48, 15, 0.1);
  color: #b3260b;
}

/* line 289, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__status[data-status="success"] {
  background: rgba(15, 157, 88, 0.12);
  color: #0b7b44;
}

/* line 294, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__status[data-status="info"] {
  background: rgba(88, 101, 242, 0.1);
  color: #3f4cc8;
}

/* line 302, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

/* line 309, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__loading {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 0 1rem;
  font-size: .82rem;
  color: rgba(22, 22, 22, 0.6);
}

/* line 317, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__loading[hidden] {
  display: none;
}

/* line 322, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(22, 22, 22, 0.2);
  border-top-color: #0f68d3;
  border-radius: 999px;
  animation: collections-sidebar-spin .7s linear infinite;
}

/* line 331, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__list {
  display: flex;
  flex-flow: column;
  gap: .75rem;
}

/* line 337, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__section {
  display: flex;
  flex-flow: column;
  gap: .55rem;
}

/* line 343, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .2rem .1rem 0;
}

/* line 350, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__section-heading h3 {
  margin: 0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.54);
}

/* line 359, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__section-heading span {
  flex: 0 0 auto;
  min-width: 1.35rem;
  padding: .12rem .4rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: rgba(22, 22, 22, 0.5);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* line 373, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__section-list {
  display: flex;
  flex-flow: column;
  gap: .75rem;
}

/* line 382, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card {
  --collection-accent-rgb: 15, 104, 211;
  position: relative;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .75rem;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* line 394, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--quick {
  --collection-accent-rgb: 22, 22, 22;
}

/* line 401, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--has-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--collection-preview-src);
  background-size: auto 150%;
  background-position: left center;
  background-repeat: no-repeat;
  opacity: .05;
  pointer-events: none;
}

/* line 415, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--has-preview.is-expanded::before {
  filter: blur(6px);
}

/* line 419, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card.is-expanded {
  border-color: rgba(var(--collection-accent-rgb), 0.4);
  box-shadow: 0 6px 20px rgba(22, 22, 22, 0.08);
}

/* line 424, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card.is-active {
  border-color: rgba(var(--collection-accent-rgb), 0.55);
  box-shadow: 0 8px 24px rgba(var(--collection-accent-rgb), 0.16);
}

/* line 429, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--discord-inactive {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(22, 22, 22, 0.06);
  box-shadow: none;
}

/* line 434, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--discord-inactive.collection-card--has-preview::before {
  opacity: .015;
}

/* line 438, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--discord-inactive .collection-card__toggle,
.collection-card--discord-inactive .collection-card__body,
.collection-card--discord-inactive .collection-card__active-action {
  opacity: .45;
}

/* line 444, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card--discord-inactive .collection-card__action-button--discord-activation {
  opacity: 1;
}

/* line 449, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__header {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* line 455, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__toggle {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: .85rem .9rem;
  cursor: pointer;
  text-align: left;
}

/* line 466, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .55rem;
  background: rgba(var(--collection-accent-rgb), 0.12);
  color: rgba(var(--collection-accent-rgb), 1);
}

/* line 477, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 482, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__icon--image {
  overflow: hidden;
  background: #313338;
}

/* line 486, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__icon--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 494, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__info {
  display: flex;
  flex-flow: column;
  gap: .12rem;
  min-width: 0;
}

/* line 501, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__name {
  font-size: .9rem;
  font-weight: 700;
  color: #161616;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 510, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__meta {
  font-size: .72rem;
  color: rgba(22, 22, 22, 0.55);
}

/* line 515, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: rgba(22, 22, 22, 0.5);
  transition: transform .2s ease;
}

/* line 521, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__chevron svg {
  width: .7rem;
  height: .7rem;
}

/* line 527, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card.is-expanded .collection-card__chevron {
  transform: rotate(180deg);
}

/* line 531, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__actions {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding-right: .55rem;
}

/* line 538, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: rgba(22, 22, 22, 0.55);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* line 549, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 554, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action:hover, .collection-card__action:focus-visible {
  background: rgba(22, 22, 22, 0.07);
  color: #161616;
}

/* line 560, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action--danger:hover, .collection-card__action--danger:focus-visible {
  background: rgba(211, 48, 15, 0.1);
  color: #b3260b;
}

/* line 566, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* line 572, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 .65rem;
  border-radius: 0.5rem;
  background: rgba(88, 101, 242, 0.14);
  color: #5865f2;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* line 590, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action-button:hover, .collection-card__action-button:focus-visible {
  background: rgba(88, 101, 242, 0.24);
  color: #3242ef;
  text-decoration: none;
}

/* line 597, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__action-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* line 603, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__sort-now {
  min-height: 1.8rem;
  padding: 0 .55rem;
  font-size: .7rem;
}

/* line 608, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__sort-now[hidden] {
  display: none;
}

/* line 613, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__active-action {
  gap: .3rem;
  width: auto;
  padding: 0 .55rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.16);
  color: rgba(22, 22, 22, 0.5);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 624, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__active-action svg {
  width: .8rem;
  height: .8rem;
}

/* line 629, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__active-action.is-active {
  background: rgba(var(--collection-accent-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--collection-accent-rgb), 0.3);
  color: rgba(var(--collection-accent-rgb), 1);
}

/* line 635, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__active-action.is-active:hover, .collection-card__active-action.is-active:focus-visible {
  background: rgba(var(--collection-accent-rgb), 0.2);
  color: rgba(var(--collection-accent-rgb), 1);
}

/* line 642, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__active-label {
  line-height: 1;
}

/* line 646, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__body {
  position: relative;
  padding: .35rem .9rem .9rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 652, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__items {
  display: flex;
  flex-flow: column;
  gap: .3rem;
  padding-top: .55rem;
}

/* line 659, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .65rem .7rem;
  border: 1px solid rgba(88, 101, 242, 0.16);
  border-radius: .65rem;
  background: rgba(88, 101, 242, 0.055);
}

/* line 670, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-locked {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .7rem;
  border: 1px solid rgba(88, 101, 242, 0.18);
  border-radius: .65rem;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.12), rgba(88, 101, 242, 0.045));
  color: #161616;
}

/* line 681, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  color: #5865f2;
}

/* line 690, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-lock-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

/* line 696, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-locked-copy {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-width: 0;
  gap: .16rem;
}

/* line 703, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-locked-copy > span:last-child {
  font-size: .7rem;
  line-height: 1.25;
  color: rgba(22, 22, 22, 0.62);
  overflow-wrap: anywhere;
}

/* line 711, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-locked-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

/* line 717, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-locked-heading strong {
  font-size: .8rem;
  font-weight: 800;
  color: #161616;
}

/* line 723, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-locked-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 1rem;
  padding: 0 .38rem;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.14);
  color: #4752c4;
  font-size: .58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 739, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-premium {
  flex: 0 0 auto;
  padding: .5rem .72rem;
  border-radius: 0.5rem;
  background: #5865f2;
  color: #fff;
  font-size: .7rem;
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}

/* line 753, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-premium:hover, .collection-card__discord-sort-premium:focus-visible {
  background: #3242ef;
  color: #fff;
  text-decoration: none;
}

/* line 761, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-copy {
  display: flex;
  flex-flow: column;
  gap: .12rem;
  min-width: 0;
}

/* line 767, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-copy strong {
  font-size: .8rem;
  font-weight: 800;
  color: #161616;
}

/* line 773, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-copy span {
  font-size: .7rem;
  line-height: 1.25;
  color: rgba(22, 22, 22, 0.58);
}

/* line 780, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.38rem;
}

/* line 787, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  appearance: none;
  background: transparent;
  transform: none;
  opacity: 0 !important;
  cursor: pointer;
}

/* line 806, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.18);
  transition: background .15s ease;
}

/* line 813, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch span::after {
  content: "";
  position: absolute;
  top: .18rem;
  left: .18rem;
  width: 1.02rem;
  height: 1.02rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(22, 22, 22, 0.22);
  transition: transform .15s ease;
}

/* line 827, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input:checked + span {
  background: #5865f2;
}

/* line 831, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input:checked + span::after {
  transform: translateX(1.12rem);
}

/* line 835, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}

/* line 839, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input:disabled {
  cursor: not-allowed;
}

/* line 843, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input:disabled + span {
  background: rgba(22, 22, 22, 0.12);
  opacity: .62;
}

/* line 847, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__discord-sort-switch input:disabled + span::after {
  box-shadow: none;
}

/* line 853, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__group {
  display: flex;
  flex-flow: column;
  gap: .25rem;
}

/* line 858, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__group + .collection-card__group {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 865, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 0 .15rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.52);
}

/* line 877, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__group-heading span:last-child {
  flex: 0 0 auto;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(22, 22, 22, 0.45);
}

/* line 885, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__group-list {
  display: flex;
  flex-flow: column;
  gap: .3rem;
}

/* line 891, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__group-empty {
  margin: 0;
  padding: .45rem .15rem .55rem;
  font-size: .78rem;
  color: rgba(22, 22, 22, 0.45);
}

/* line 898, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__empty {
  margin: 0;
  padding: .85rem .15rem;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(22, 22, 22, 0.5);
}

/* line 906, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__operation {
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 600;
}

/* line 911, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__operation[hidden] {
  display: none;
}

/* line 916, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .65rem;
  padding: .45rem .7rem;
  border-radius: 0.5rem;
  background: rgba(211, 48, 15, 0.08);
  color: #b3260b;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* line 930, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear svg {
  width: .95rem;
  height: .95rem;
}

/* line 935, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear:hover, .collection-card__clear:focus-visible {
  background: rgba(211, 48, 15, 0.15);
  color: #8f1d08;
}

/* line 941, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* line 946, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear.is-loading {
  opacity: 1;
}

/* line 949, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear.is-loading svg {
  display: none;
}

/* line 953, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear.is-loading::before {
  content: "";
  width: .86rem;
  height: .86rem;
  border: 2px solid rgba(179, 38, 11, 0.22);
  border-top-color: #b3260b;
  border-radius: 999px;
  animation: collections-sidebar-spin .72s linear infinite;
}

/* line 964, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear.is-retrying::before {
  animation-duration: 1s;
}

/* line 968, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card__clear[hidden] {
  display: none;
}

/* line 975, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card.is-clearing .collection-item, .collection-card.is-discord-sorting .collection-item {
  opacity: .58;
}

/* line 979, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card.is-clearing .collection-item__remove,
.collection-card.is-clearing .collection-item__handle,
.collection-card.is-clearing .collection-card__discord-sort, .collection-card.is-discord-sorting .collection-item__remove,
.collection-card.is-discord-sorting .collection-item__handle,
.collection-card.is-discord-sorting .collection-card__discord-sort {
  pointer-events: none;
}

/* line 987, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu {
  position: relative;
  z-index: 2;
  display: none;
  margin: 0 .75rem .75rem;
  padding: .45rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: .7rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(22, 22, 22, 0.1);
}

/* line 998, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu[hidden] {
  display: none !important;
}

/* line 1002, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu.is-open {
  display: grid;
  gap: .25rem;
}

/* line 1007, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem .35rem .35rem;
}

/* line 1015, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.52);
}

/* line 1023, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__hint {
  font-size: .74rem;
  color: rgba(22, 22, 22, 0.55);
}

/* line 1028, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option {
  --collection-download-accent-rgb: 22, 22, 22;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .55rem .6rem;
  border-radius: .55rem;
  color: #161616;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* line 1041, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option:hover, .collection-download-menu__option:focus-visible {
  background: rgba(var(--collection-download-accent-rgb), 0.08);
  color: rgba(var(--collection-download-accent-rgb), 1);
}

/* line 1047, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option:disabled {
  cursor: not-allowed;
  opacity: .45;
}

/* line 1052, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option.color-discord {
  --collection-download-accent-rgb: 88, 101, 242;
}

/* line 1056, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option.color-twitch {
  --collection-download-accent-rgb: 145, 70, 255;
}

/* line 1060, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option.color-slack {
  --collection-download-accent-rgb: 74, 21, 75;
}

/* line 1064, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__option.color-whatsapp {
  --collection-download-accent-rgb: 37, 211, 102;
}

/* line 1069, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: .45rem;
  background: rgba(var(--collection-download-accent-rgb), 0.1);
  background-image: var(--collection-download-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.05rem 1.05rem;
}

/* line 1083, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__logo--blank {
  background-image: none;
  color: rgba(var(--collection-download-accent-rgb), 1);
}

/* line 1087, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__logo--blank svg {
  width: .95rem;
  height: .95rem;
}

/* line 1094, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__copy {
  display: flex;
  flex-flow: column;
  min-width: 0;
  gap: .05rem;
}

/* line 1100, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__copy strong {
  font-size: .82rem;
  line-height: 1.2;
  font-weight: 800;
}

/* line 1106, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-download-menu__copy span {
  font-size: .72rem;
  line-height: 1.25;
  color: rgba(22, 22, 22, 0.55);
}

/* line 1116, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  padding: .35rem;
  border-radius: .55rem;
  transition: background .15s ease;
  touch-action: pan-y;
}

/* line 1128, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item:hover {
  background: rgba(22, 22, 22, 0.04);
}

/* line 1133, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item.is-dragging {
  z-index: 20;
  background: #fff;
  box-shadow: 0 12px 28px rgba(22, 22, 22, 0.22);
  border: 1px solid rgba(15, 104, 211, 0.35);
  pointer-events: none;
}

/* line 1141, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item.is-removing, .collection-item.is-retrying, .collection-item.is-remove-queued {
  background: rgba(22, 22, 22, 0.035);
}

/* line 1149, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item.is-removing .collection-item__thumb,
.collection-item.is-removing .collection-item__name, .collection-item.is-retrying .collection-item__thumb,
.collection-item.is-retrying .collection-item__name {
  opacity: .62;
}

/* line 1155, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item.is-retrying {
  background: rgba(15, 104, 211, 0.055);
}

/* line 1160, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item.is-remove-queued .collection-item__thumb,
.collection-item.is-remove-queued .collection-item__name {
  opacity: .72;
}

/* line 1166, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 2.6rem;
  margin-left: -.15rem;
  color: rgba(22, 22, 22, 0.35);
  cursor: grab;
  touch-action: none;
  transition: color .15s ease;
}

/* line 1181, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__handle svg {
  width: .9rem;
  height: .9rem;
}

/* line 1186, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__handle:hover, .collection-item__handle:focus-visible {
  color: rgba(22, 22, 22, 0.7);
}

/* line 1191, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__handle:active {
  cursor: grabbing;
}

/* line 1197, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__placeholder {
  border-radius: .55rem;
  border: 1px dashed rgba(15, 104, 211, 0.45);
  background: rgba(15, 104, 211, 0.06);
}

/* line 1203, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .45rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  overflow: hidden;
}

/* line 1214, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 1221, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__name {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  font-size: .82rem;
  font-weight: 600;
  color: #161616;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 1233, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__name:hover {
  color: #0f68d3;
}

/* line 1238, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__download, .collection-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  color: rgba(22, 22, 22, 0.45);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* line 1251, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__download svg, .collection-item__remove svg {
  width: .85rem;
  height: .85rem;
}

/* line 1258, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__download:hover, .collection-item__download:focus-visible {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1266, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__remove:hover, .collection-item__remove:focus-visible {
  background: rgba(211, 48, 15, 0.12);
  color: #b3260b;
}

/* line 1272, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__remove:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* line 1277, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__remove.is-loading {
  color: #0f68d3;
  opacity: 1;
}

/* line 1281, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__remove.is-loading svg {
  display: none;
}

/* line 1285, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__remove.is-loading::before {
  content: "";
  width: .86rem;
  height: .86rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 104, 211, 0.22);
  border-top-color: #0f68d3;
  animation: collections-sidebar-spin .72s linear infinite;
}

/* line 1296, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item__remove.is-retrying::before {
  animation-duration: 1s;
}

/* line 1302, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu {
  position: relative;
  z-index: 3;
  display: none;
  flex: 1 0 100%;
  margin: .1rem 0 .15rem;
  padding: .35rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: .6rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 24px rgba(22, 22, 22, 0.1);
}

/* line 1314, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu[hidden] {
  display: none !important;
}

/* line 1318, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu.is-open {
  display: grid;
  gap: .18rem;
}

/* line 1323, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__header {
  padding: .2rem .3rem .28rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
}

/* line 1332, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__option {
  --collection-item-download-accent-rgb: 22, 22, 22;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .46rem .5rem;
  border-radius: 0.5rem;
  color: #161616;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

/* line 1343, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__option:hover, .collection-item-download-menu__option:focus-visible {
  background: rgba(var(--collection-item-download-accent-rgb), 0.08);
  color: rgba(var(--collection-item-download-accent-rgb), 1);
  text-decoration: none;
}

/* line 1350, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__option.color-discord {
  --collection-item-download-accent-rgb: 88, 101, 242;
}

/* line 1354, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__option.color-twitch {
  --collection-item-download-accent-rgb: 145, 70, 255;
}

/* line 1358, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__option.color-slack {
  --collection-item-download-accent-rgb: 74, 21, 75;
}

/* line 1362, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__option.color-whatsapp {
  --collection-item-download-accent-rgb: 37, 211, 102;
}

/* line 1367, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: .42rem;
  background: rgba(var(--collection-item-download-accent-rgb), 0.1);
  background-image: var(--collection-item-download-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: .95rem .95rem;
}

/* line 1381, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__logo--blank {
  background-image: none;
  color: rgba(var(--collection-item-download-accent-rgb), 1);
}

/* line 1385, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__logo--blank svg {
  width: .85rem;
  height: .85rem;
}

/* line 1392, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__copy {
  display: flex;
  flex-flow: column;
  gap: .04rem;
  min-width: 0;
}

/* line 1398, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__copy strong {
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 800;
}

/* line 1404, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-item-download-menu__copy span {
  font-size: .68rem;
  line-height: 1.25;
  color: rgba(22, 22, 22, 0.55);
}

/* line 1413, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collection-card:not(.collection-card--reorderable) .collection-item__handle {
  display: none;
}

/* line 1418, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar.is-reordering {
  user-select: none;
}

/* line 1421, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar.is-reordering .collection-item:hover {
  background: none;
}

@keyframes collections-sidebar-spin {
  to {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 1433, app/assets/stylesheets/partials/_collections-sidebar.scss */
  .collections-sidebar__panel {
    width: 100vw;
    box-shadow: none;
  }
  /* line 1438, app/assets/stylesheets/partials/_collections-sidebar.scss */
  .collections-sidebar__header,
.collections-sidebar__create {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* line 1444, app/assets/stylesheets/partials/_collections-sidebar.scss */
  .collections-sidebar__body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 1451, app/assets/stylesheets/partials/_collections-sidebar.scss */
  .collections-sidebar__panel,
.collections-sidebar__backdrop,
.collection-card__chevron {
    transition: none;
  }
  /* line 1457, app/assets/stylesheets/partials/_collections-sidebar.scss */
  .collections-sidebar__spinner {
    animation: none;
  }
}

/* line 1462, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord {
  margin-top: 1.25rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 1467, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

/* line 1474, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.48);
  margin: 0;
}

/* line 1483, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-refresh {
  background: transparent;
  border: 0;
  color: rgba(22, 22, 22, 0.48);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
}

/* line 1492, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-refresh:hover {
  color: #161616;
  background: rgba(22, 22, 22, 0.06);
}

/* line 1493, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-refresh svg {
  width: 16px;
  height: 16px;
}

/* line 1496, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-status {
  font-size: 0.8125rem;
  color: rgba(22, 22, 22, 0.62);
  padding: 0.5rem 0.75rem;
  background: rgba(22, 22, 22, 0.04);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

/* line 1505, app/assets/stylesheets/partials/_collections-sidebar.scss */
.collections-sidebar__discord-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* line 1508, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 1517, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card--reconnect {
  background: rgba(88, 101, 242, 0.07);
  border-color: rgba(88, 101, 242, 0.16);
}

/* line 1521, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card--reconnect .discord-server-card__icon {
  background: rgba(88, 101, 242, 0.12);
  color: #5865F2;
}

/* line 1526, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card--reconnect .discord-server-card__name {
  color: #161616;
  font-weight: 700;
}

/* line 1531, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card--reconnect .discord-server-card__meta {
  color: rgba(22, 22, 22, 0.62);
}

/* line 1535, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card--reconnect .discord-server-card__action {
  background: rgba(88, 101, 242, 0.14);
  border-color: rgba(88, 101, 242, 0.18);
  color: #5865F2;
}

/* line 1540, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card--reconnect .discord-server-card__action:hover {
  background: rgba(88, 101, 242, 0.22);
}

/* line 1546, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(22, 22, 22, 0.62);
}

/* line 1556, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1559, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* line 1564, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #161616;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1574, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__meta {
  display: block;
  font-size: 0.6875rem;
  color: rgba(22, 22, 22, 0.55);
  margin-top: 0.125rem;
}

/* line 1581, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__action {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(88, 101, 242, 0.18);
  background: rgba(88, 101, 242, 0.14);
  color: #5865F2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* line 1594, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__action:hover {
  background: rgba(88, 101, 242, 0.22);
}

/* line 1595, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* line 1597, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__action--secondary {
  background: transparent;
  color: rgba(22, 22, 22, 0.62);
}

/* line 1600, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-server-card__action--secondary:hover {
  background: rgba(22, 22, 22, 0.06);
  color: #161616;
}

/* line 1607, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* line 1616, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* line 1624, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding.is-open .discord-sync-onboarding__backdrop {
  opacity: 1;
}

/* line 1628, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__dialog {
  position: relative;
  width: 100%;
  max-width: 23rem;
  max-height: calc(100vh - 2rem);
  position: relative;
  width: 100%;
  max-width: 23rem;
  padding: 1.6rem 1.4rem 1.4rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  overflow: auto;
  color: #161616;
  text-align: center;
  opacity: 0;
  transform: translateY(0.6rem) scale(0.97);
  transition: opacity 180ms ease, transform 180ms ease;
}

/* line 1644, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding.is-open .discord-sync-onboarding__dialog {
  opacity: 1;
  transform: none;
}

/* line 1649, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.discord-sync-onboarding__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.discord-sync-onboarding__close:hover, .discord-sync-onboarding__close:focus-visible, .discord-sync-onboarding__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.discord-sync-onboarding__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 1656, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__hero {
  position: relative;
  display: inline-flex;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .85rem;
}

/* line 1664, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #313338;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
}

/* line 1678, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1685, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__hero-badge {
  position: absolute;
  right: -.3rem;
  bottom: -.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #23a55a;
  color: #fff;
}

/* line 1699, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__hero-badge svg {
  width: .75rem;
  height: .75rem;
}

/* line 1705, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__title {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

/* line 1712, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__intro {
  margin: 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: .82rem;
  line-height: 1.45;
}

/* line 1719, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__steps {
  display: grid;
  gap: .6rem;
  margin: 1rem 0 1.2rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* line 1727, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .6rem .7rem;
  border-radius: .7rem;
  background: rgba(22, 22, 22, 0.04);
  font-size: .78rem;
  line-height: 1.4;
}

/* line 1740, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo {
  justify-self: center;
}

/* line 1744, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo--action {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(88, 101, 242, 0.4);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(22, 22, 22, 0.16);
}

/* line 1755, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo-icon {
  position: absolute;
  inset: .14rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: #313338;
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
}

/* line 1768, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 1775, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo-plus {
  position: absolute;
  right: -.1rem;
  bottom: -.1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.02rem;
  height: 1.02rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #5865F2;
  color: #fff;
}

/* line 1790, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo-plus svg {
  width: .56rem;
  height: .56rem;
}

/* line 1796, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo--pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2rem;
  padding: 0 .55rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 1809, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__demo--pill svg {
  width: .8rem;
  height: .8rem;
}

/* line 1815, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__cta {
  width: 100%;
  min-height: 2.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s ease;
}

/* line 1827, app/assets/stylesheets/partials/_collections-sidebar.scss */
.discord-sync-onboarding__cta:hover, .discord-sync-onboarding__cta:focus-visible {
  background: #0d58b2;
}

/* line 1, app/assets/stylesheets/partials/_autocomplete.scss */
.awesomplete {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* line 7, app/assets/stylesheets/partials/_autocomplete.scss */
.awesomplete ul[id^="awesomplete_list_"] {
  position: absolute;
  top: 100%;
  background: white;
  width: 100%;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  z-index: 2;
}

/* line 16, app/assets/stylesheets/partials/_autocomplete.scss */
.awesomplete ul[id^="awesomplete_list_"] li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

/* line 24, app/assets/stylesheets/partials/_autocomplete.scss */
.awesomplete ul[id^="awesomplete_list_"] li:hover, .awesomplete ul[id^="awesomplete_list_"] li:focus, .awesomplete ul[id^="awesomplete_list_"] li:active, .awesomplete ul[id^="awesomplete_list_"] li[aria-selected=true] {
  background: #f8f8f8;
}

/* line 28, app/assets/stylesheets/partials/_autocomplete.scss */
.awesomplete ul[id^="awesomplete_list_"] li mark {
  background: none;
  font-weight: bold;
}

/* line 35, app/assets/stylesheets/partials/_autocomplete.scss */
.awesomplete span.visually-hidden {
  display: none !important;
}

/* line 2, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__scroll-toggle {
  --infinite-scroll-sticky-bottom-offset: env(safe-area-inset-bottom, 0px);
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  margin: 1rem 0;
}

/* line 15, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__scroll-toggle.sticky-toggle {
  position: sticky;
  z-index: 5;
  bottom: var(--infinite-scroll-sticky-bottom-offset);
  padding: .5rem 0;
}

/* line 21, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__scroll-toggle.sticky-toggle .search-filter-item__dropdown-item {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 1rem 0.75rem;
  font-weight: 600;
  color: #000;
}

/* line 30, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__scroll-toggle.sticky-toggle:hover {
  transform: translateY(-2px);
}

/* line 36, app/assets/stylesheets/partials/_infinite-scroll.scss */
body:has(#adhesion_desktop_wrapper) .emote-item-list__scroll-toggle.sticky-toggle,
body:has(#adhesion_tablet_wrapper) .emote-item-list__scroll-toggle.sticky-toggle {
  --infinite-scroll-sticky-bottom-offset: calc(90px + 0.75rem + env(safe-area-inset-bottom, 0px));
}

/* line 41, app/assets/stylesheets/partials/_infinite-scroll.scss */
body:has(#adhesion_mobile_wrapper) .emote-item-list__scroll-toggle.sticky-toggle {
  --infinite-scroll-sticky-bottom-offset: calc(50px + 0.75rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 511px) {
  /* line 46, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .emote-item-list__scroll-toggle {
    display: none;
  }
}

/* line 51, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__top-button {
  align-items: center;
  appearance: none;
  font: inherit;
  gap: 0.35rem;
  line-height: 1;
  position: absolute;
  right: 0;
  text-decoration: none;
}

/* line 61, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__top-button svg {
  display: block;
  fill: currentColor;
  height: 1rem;
  width: 1rem;
}

/* line 68, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__top-button.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.25rem);
}

/* line 75, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* line 81, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #e2e8f0;
  cursor: pointer;
  user-select: none;
}

/* line 89, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-input {
  position: relative;
  width: 48px;
  height: 24px;
  background: #374151;
  border-radius: 12px;
  border: 1px solid #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  outline: none;
}

/* line 101, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-input:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #9ca3af;
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* line 113, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-input:checked {
  background: #3b82f6;
  border-color: #2563eb;
}

/* line 117, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-input:checked:before {
  left: calc(100% - 20px);
  background: #ffffff;
}

/* line 123, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-input:hover {
  border-color: #6b7280;
}

/* line 127, app/assets/stylesheets/partials/_infinite-scroll.scss */
.scroll-toggle-input:checked:hover {
  border-color: #1d4ed8;
}

/* line 133, app/assets/stylesheets/partials/_infinite-scroll.scss */
.infinite-scroll-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  margin-top: 1rem;
}

/* line 141, app/assets/stylesheets/partials/_infinite-scroll.scss */
.infinite-scroll-sentinel {
  height: 1px;
  pointer-events: none;
  width: 100%;
}

/* line 147, app/assets/stylesheets/partials/_infinite-scroll.scss */
.loading-spinner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* line 154, app/assets/stylesheets/partials/_infinite-scroll.scss */
.loading-spinner svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* line 160, app/assets/stylesheets/partials/_infinite-scroll.scss */
.loading-spinner .spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* line 176, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__pagination[style*="display: none"] {
  display: none !important;
}

/* line 180, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item-list__pagination[style*="display: flex"] {
  display: flex !important;
}

/* line 185, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item--newly-loaded {
  transform: scale(0.3);
  opacity: 0;
}

/* line 190, app/assets/stylesheets/partials/_infinite-scroll.scss */
.emote-item--newly-loaded.emote-item--ready-to-animate {
  animation: newEmoteZoomHighlight 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes newEmoteZoomHighlight {
  0% {
    background-color: rgba(15, 104, 211, 0.15);
    transform: scale(0.3);
    opacity: 0;
  }
  25% {
    background-color: rgba(15, 104, 211, 0.12);
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    background-color: rgba(15, 104, 211, 0.08);
    transform: scale(1.05);
    opacity: 1;
  }
  75% {
    background-color: rgba(15, 104, 211, 0.04);
    transform: scale(0.98);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.95);
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  /* line 224, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .emote-item-list__scroll-toggle {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
  }
  /* line 229, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .emote-item-list__top-button {
    right: 0.5rem;
  }
  /* line 233, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .scroll-toggle-container {
    gap: 0.5rem;
  }
  /* line 237, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .scroll-toggle-label {
    font-size: 0.8rem;
  }
  /* line 241, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .scroll-toggle-input {
    width: 42px;
    height: 22px;
  }
  /* line 245, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .scroll-toggle-input:before {
    width: 16px;
    height: 16px;
  }
  /* line 250, app/assets/stylesheets/partials/_infinite-scroll.scss */
  .scroll-toggle-input:checked:before {
    left: calc(100% - 18px);
  }
}

/* line 16, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__chip, .index-intro__chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.16rem 0.62rem;
  border: 1px solid rgba(var(--index-intro-chip-rgb), 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--index-intro-chip-color);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 0.35rem 0.9rem rgba(var(--index-intro-chip-rgb), 0.08);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  /* line 33, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-chips__chip:hover, .index-intro__chip:hover {
    border-color: rgba(var(--index-intro-chip-rgb), 0.38);
    background: #fff;
    transform: translateY(-1px);
  }
}

/* line 41, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  background: radial-gradient(circle at 86% 16%, rgba(15, 104, 211, 0.16), transparent 24rem), radial-gradient(circle at 6% 96%, rgba(37, 211, 102, 0.1), transparent 22rem), linear-gradient(135deg, #ffffff 0%, #f7fbff 50%, #eef6ff 100%);
}

/* line 51, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  background-image: linear-gradient(rgba(15, 104, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.06) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(120deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
}

/* line 65, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* line 72, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.5;
}

/* line 78, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__orb--one {
  top: -3rem;
  right: 6%;
  width: 13rem;
  height: 13rem;
  background: radial-gradient(circle, rgba(15, 104, 211, 0.22), transparent 68%);
}

/* line 86, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__orb--two {
  bottom: -6rem;
  left: 3%;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.14), transparent 70%);
}

/* line 95, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 4rem);
  max-width: var(--browse-shell-max-width);
}

@media only screen and (max-width: 64rem) {
  /* line 95, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__inner {
    width: calc(100% - 2rem);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 95, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__inner {
    width: calc(100% - 1rem);
  }
}

/* line 110, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* line 118, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro .ai-eyebrow {
  margin-bottom: 0.55rem;
}

/* line 122, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__heading {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

/* line 130, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__title {
  margin: 0;
  color: #161616;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 1000;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* line 139, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__count {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  border-radius: 999px;
  padding: 0.28rem 0.78rem;
  box-shadow: 0 0.6rem 1.4rem rgba(15, 104, 211, 0.28);
}

/* line 149, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__subline {
  max-width: 46rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.6;
}

/* line 157, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__variants {
  margin: 0.6rem 0 0;
  color: rgba(22, 22, 22, 0.55);
  font-size: 0.9rem;
}

/* line 162, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__variants span {
  margin-right: 0.35rem;
}

/* line 167, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__variant-link {
  margin-right: 0.35rem;
  color: rgba(22, 22, 22, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* line 174, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__chips {
  max-width: 50rem;
  margin-top: 1.2rem;
}

/* line 179, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* line 185, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab {
  --index-intro-chip-color: #0f68d3;
  --index-intro-chip-rgb: 15, 104, 211;
  appearance: none;
  height: auto;
  margin: 0;
  padding: 0.42rem 0.86rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(22, 22, 22, 0.55);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* line 204, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab:hover {
  border-color: rgba(var(--index-intro-chip-rgb), 0.35);
  color: var(--index-intro-chip-color);
}

/* line 209, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--active {
  border-color: rgba(var(--index-intro-chip-rgb), 0.4);
  background: rgba(var(--index-intro-chip-rgb), 0.1);
  color: var(--index-intro-chip-color);
}

/* line 215, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab:focus-visible {
  outline: 2px solid rgba(var(--index-intro-chip-rgb), 0.9);
  outline-offset: 1px;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--popular, .index-intro__chip-list--popular {
  --index-intro-chip-color: #0f68d3;
  --index-intro-chip-rgb: 15, 104, 211;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--reactions, .index-intro__chip-list--reactions {
  --index-intro-chip-color: #d97706;
  --index-intro-chip-rgb: 217, 119, 6;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--games, .index-intro__chip-list--games {
  --index-intro-chip-color: #0891b2;
  --index-intro-chip-rgb: 8, 145, 178;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--anime, .index-intro__chip-list--anime {
  --index-intro-chip-color: #be185d;
  --index-intro-chip-rgb: 190, 24, 93;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--styles, .index-intro__chip-list--styles {
  --index-intro-chip-color: #7c3aed;
  --index-intro-chip-rgb: 124, 58, 237;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--animals, .index-intro__chip-list--animals {
  --index-intro-chip-color: #15803d;
  --index-intro-chip-rgb: 21, 128, 61;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--colors, .index-intro__chip-list--colors {
  --index-intro-chip-color: #c026d3;
  --index-intro-chip-rgb: 192, 38, 211;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--symbols, .index-intro__chip-list--symbols {
  --index-intro-chip-color: #475569;
  --index-intro-chip-rgb: 71, 85, 105;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--utility, .index-intro__chip-list--utility {
  --index-intro-chip-color: #2563eb;
  --index-intro-chip-rgb: 37, 99, 235;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--celebrations, .index-intro__chip-list--celebrations {
  --index-intro-chip-color: #db2777;
  --index-intro-chip-rgb: 219, 39, 119;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--objects, .index-intro__chip-list--objects {
  --index-intro-chip-color: #a16207;
  --index-intro-chip-rgb: 161, 98, 7;
}

/* line 222, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__tab--characters, .index-intro__chip-list--characters {
  --index-intro-chip-color: #dc2626;
  --index-intro-chip-rgb: 220, 38, 38;
}

/* line 228, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
  margin-top: 0.65rem;
}

/* line 235, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__chip-list[hidden] {
  display: none;
}

/* line 240, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__chip {
  min-height: 2.15rem;
  padding: 0.26rem 0.82rem;
  font-size: 0.92rem;
  line-height: 1.15;
}

/* line 247, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__chip--selected {
  border-color: rgba(var(--index-intro-chip-rgb), 0.5);
  background: var(--index-intro-chip-color);
  color: #fff;
  box-shadow: 0 0.45rem 1rem rgba(var(--index-intro-chip-rgb), 0.22);
}

/* line 253, app/assets/stylesheets/partials/_index-meta.scss */
.index-intro__chip--selected:hover {
  border-color: var(--index-intro-chip-color);
  background: var(--index-intro-chip-color);
}

@media only screen and (max-width: 32rem) {
  /* line 261, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__chips {
    max-width: none;
    margin-top: 1rem;
  }
  /* line 266, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -0.75rem;
    padding: 0.15rem 0.75rem;
    scrollbar-width: none;
  }
  /* line 273, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__tabs::-webkit-scrollbar {
    display: none;
  }
  /* line 278, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__tab {
    flex: 0 0 auto;
  }
  /* line 282, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__chip-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0.5rem -0.75rem 0;
    padding: 0.15rem 0.75rem;
    scrollbar-width: none;
  }
  /* line 289, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__chip-list::-webkit-scrollbar {
    display: none;
  }
  /* line 294, app/assets/stylesheets/partials/_index-meta.scss */
  .index-intro__chip {
    flex: 0 0 auto;
    min-height: 2.05rem;
    padding: 0.24rem 0.78rem;
    font-size: 0.86rem;
  }
}

/* line 303, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips {
  display: grid;
  gap: 0.7rem;
  text-align: left;
}

/* line 308, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group {
  --index-intro-chip-color: #0f68d3;
  --index-intro-chip-rgb: 15, 104, 211;
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.7rem;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--popular {
  --index-intro-chip-color: #0f68d3;
  --index-intro-chip-rgb: 15, 104, 211;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--reactions {
  --index-intro-chip-color: #d97706;
  --index-intro-chip-rgb: 217, 119, 6;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--games {
  --index-intro-chip-color: #0891b2;
  --index-intro-chip-rgb: 8, 145, 178;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--anime {
  --index-intro-chip-color: #be185d;
  --index-intro-chip-rgb: 190, 24, 93;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--styles {
  --index-intro-chip-color: #7c3aed;
  --index-intro-chip-rgb: 124, 58, 237;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--animals {
  --index-intro-chip-color: #15803d;
  --index-intro-chip-rgb: 21, 128, 61;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--colors {
  --index-intro-chip-color: #c026d3;
  --index-intro-chip-rgb: 192, 38, 211;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--symbols {
  --index-intro-chip-color: #475569;
  --index-intro-chip-rgb: 71, 85, 105;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--utility {
  --index-intro-chip-color: #2563eb;
  --index-intro-chip-rgb: 37, 99, 235;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--celebrations {
  --index-intro-chip-color: #db2777;
  --index-intro-chip-rgb: 219, 39, 119;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--objects {
  --index-intro-chip-color: #a16207;
  --index-intro-chip-rgb: 161, 98, 7;
}

/* line 318, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__group--characters {
  --index-intro-chip-color: #dc2626;
  --index-intro-chip-rgb: 220, 38, 38;
}

/* line 324, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__label {
  color: rgba(var(--index-intro-chip-rgb), 0.8);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* line 333, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

/* line 340, app/assets/stylesheets/partials/_index-meta.scss */
.tag-chips__chip {
  min-height: 2.1rem;
  padding: 0.24rem 0.78rem;
  font-size: 0.9rem;
  line-height: 1.15;
}

@media only screen and (max-width: 32rem) {
  /* line 303, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-chips {
    gap: 0.9rem;
  }
  /* line 351, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-chips__group {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* line 358, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 5vw, 4rem) 2rem clamp(3rem, 5vw, 4rem);
  margin-top: 2.5rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  background: radial-gradient(circle at 90% 4%, rgba(15, 104, 211, 0.06), transparent 28rem), linear-gradient(180deg, rgba(22, 22, 22, 0.015) 0%, transparent 240px);
}

@media only screen and (max-width: 64rem) {
  /* line 358, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro {
    padding-inline: 1rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 358, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro {
    padding-inline: 0.75rem;
  }
}

/* line 377, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__art {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 30%;
  z-index: -1;
  height: 9rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.06), rgba(37, 211, 102, 0.06), transparent);
  transform: rotate(-1.5deg);
  pointer-events: none;
}

/* line 389, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__inner {
  position: relative;
  z-index: 1;
}

/* line 394, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__section {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* line 397, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__section:last-child {
  margin-bottom: 0;
}

/* line 401, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__section--compact {
  margin-bottom: 0;
}

/* line 406, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__section-header {
  margin-bottom: 1.4rem;
  max-width: 44rem;
}

/* line 410, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__section-header .ai-eyebrow {
  margin-bottom: 0.5rem;
}

/* line 415, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__heading {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #161616;
  margin: 0 0 0.4rem;
}

/* line 424, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(22, 22, 22, 0.6);
  margin: 0;
  max-width: 40rem;
}

/* line 432, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(22, 22, 22, 0.7);
  margin: 0 0 0.7rem;
}

/* line 438, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__text:last-child {
  margin-bottom: 0;
}

/* line 443, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem 3rem;
  margin-bottom: 2.5rem;
}

@media only screen and (max-width: 64rem) {
  /* line 443, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro__split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 455, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.6rem;
}

/* line 462, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-groups {
  display: grid;
  gap: 1.2rem;
}

/* line 467, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group {
  --index-intro-chip-color: #0f68d3;
  --index-intro-chip-rgb: 15, 104, 211;
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.65rem 1rem;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--popular {
  --index-intro-chip-color: #0f68d3;
  --index-intro-chip-rgb: 15, 104, 211;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--reactions {
  --index-intro-chip-color: #d97706;
  --index-intro-chip-rgb: 217, 119, 6;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--games {
  --index-intro-chip-color: #0891b2;
  --index-intro-chip-rgb: 8, 145, 178;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--anime {
  --index-intro-chip-color: #be185d;
  --index-intro-chip-rgb: 190, 24, 93;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--styles {
  --index-intro-chip-color: #7c3aed;
  --index-intro-chip-rgb: 124, 58, 237;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--animals {
  --index-intro-chip-color: #15803d;
  --index-intro-chip-rgb: 21, 128, 61;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--colors {
  --index-intro-chip-color: #c026d3;
  --index-intro-chip-rgb: 192, 38, 211;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--symbols {
  --index-intro-chip-color: #475569;
  --index-intro-chip-rgb: 71, 85, 105;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--utility {
  --index-intro-chip-color: #2563eb;
  --index-intro-chip-rgb: 37, 99, 235;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--celebrations {
  --index-intro-chip-color: #db2777;
  --index-intro-chip-rgb: 219, 39, 119;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--objects {
  --index-intro-chip-color: #a16207;
  --index-intro-chip-rgb: 161, 98, 7;
}

/* line 476, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group--characters {
  --index-intro-chip-color: #dc2626;
  --index-intro-chip-rgb: 220, 38, 38;
}

@media only screen and (max-width: 32rem) {
  /* line 467, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro__tag-group {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* line 488, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-group-label {
  color: rgba(var(--index-intro-chip-rgb), 0.85);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* line 497, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

/* line 504, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--index-intro-chip-color, #0f68d3);
  background: rgba(var(--index-intro-chip-rgb, 15, 104, 211), 0.07);
  border: 1px solid rgba(var(--index-intro-chip-rgb, 15, 104, 211), 0.12);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* line 518, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag:hover {
  background: rgba(var(--index-intro-chip-rgb, 15, 104, 211), 0.12);
  border-color: rgba(var(--index-intro-chip-rgb, 15, 104, 211), 0.3);
  transform: translateY(-1px);
}

/* line 525, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__tag-count {
  font-size: 0.68em;
  font-weight: 700;
  color: rgba(var(--index-intro-chip-rgb, 15, 104, 211), 0.8);
  background: rgba(var(--index-intro-chip-rgb, 15, 104, 211), 0.12);
  border-radius: 999px;
  padding: 0.08em 0.5em;
}

/* line 534, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__platforms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

@media only screen and (max-width: 64rem) {
  /* line 534, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro__platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 534, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro__platforms {
    grid-template-columns: 1fr;
  }
}

/* line 548, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__formats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1rem;
}

@media only screen and (max-width: 32rem) {
  /* line 548, app/assets/stylesheets/partials/_index-meta.scss */
  .index-outro__formats {
    grid-template-columns: 1fr;
  }
}

/* line 558, app/assets/stylesheets/partials/_index-meta.scss */
.index-outro__faq {
  display: grid;
  gap: 0.6rem;
  max-width: 56rem;
}

/* line 565, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.75fr);
  gap: 2rem 3rem;
  align-items: start;
  padding: 0.25rem 0 2.25rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 573, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about .ai-eyebrow {
  margin-bottom: 0.5rem;
}

/* line 577, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__copy {
  max-width: 52rem;
}

/* line 581, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__heading {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  letter-spacing: -0.01em;
}

/* line 586, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__lead {
  max-width: 38rem;
}

/* line 590, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__text {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

/* line 595, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__text .index-outro__text {
  margin: 0;
}

/* line 600, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

/* line 606, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__fact {
  display: grid;
  gap: 0.25rem;
  min-height: 4.9rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(15, 104, 211, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(15, 104, 211, 0.04));
  box-shadow: 0 0.8rem 1.6rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* line 619, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__fact:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 104, 211, 0.3);
  box-shadow: 0 1.2rem 2.2rem rgba(15, 104, 211, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 628, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__fact-value {
  color: #161616;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 635, app/assets/stylesheets/partials/_index-meta.scss */
.tag-about__fact-label {
  color: rgba(22, 22, 22, 0.58);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

@media only screen and (max-width: 64rem) {
  /* line 565, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-about {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  /* line 646, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-about__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 565, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-about {
    padding-bottom: 1.75rem;
  }
  /* line 654, app/assets/stylesheets/partials/_index-meta.scss */
  .tag-about__facts {
    grid-template-columns: 1fr;
  }
}

/* line 660, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 7.25rem;
  padding: 0.85rem 1.15rem 1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
  border: 1px solid rgba(22, 22, 22, 0.09);
  box-shadow: 0 0.8rem 1.6rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* line 677, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.4rem 2.6rem rgba(22, 22, 22, 0.12);
}

/* line 681, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card:hover .platform-card__logo {
  transform: translateY(-50%) scale(1.05) rotate(-4deg);
  opacity: 0.2;
}

/* line 687, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card__logo {
  position: absolute;
  top: 50%;
  right: -1.2rem;
  transform: translateY(-50%);
  width: 10.5rem;
  height: 10.5rem;
  object-fit: contain;
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* line 701, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* line 709, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #161616;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* line 717, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card__hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(22, 22, 22, 0.55);
  line-height: 1.35;
  max-width: 80%;
}

/* line 726, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--discord .platform-card__logo {
  color: #5865F2;
}

/* line 730, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--discord:hover {
  border-color: rgba(88, 101, 242, 0.35);
  background: linear-gradient(135deg, #fff 0%, rgba(88, 101, 242, 0.04) 100%);
}

/* line 734, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--discord:hover .platform-card__name {
  color: #5865F2;
}

/* line 741, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--twitch:hover {
  border-color: rgba(100, 65, 165, 0.35);
  background: linear-gradient(135deg, #fff 0%, rgba(100, 65, 165, 0.04) 100%);
}

/* line 745, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--twitch:hover .platform-card__name {
  color: #6441a5;
}

/* line 752, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--slack:hover {
  border-color: rgba(74, 21, 75, 0.4);
  background: linear-gradient(135deg, #fff 0%, rgba(74, 21, 75, 0.04) 100%);
}

/* line 756, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--slack:hover .platform-card__name {
  color: #4A154B;
}

/* line 763, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.4);
  background: linear-gradient(135deg, #fff 0%, rgba(37, 211, 102, 0.04) 100%);
}

/* line 767, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--whatsapp:hover .platform-card__name {
  color: #1fb055;
}

/* line 774, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--myemotes:hover {
  border-color: rgba(15, 104, 211, 0.35);
  background: linear-gradient(135deg, #fff 0%, rgba(15, 104, 211, 0.04) 100%);
}

/* line 778, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card--myemotes:hover .platform-card__name {
  color: #0f68d3;
}

/* line 784, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card__logo--brand {
  width: 12rem;
  height: auto;
  right: -1.5rem;
}

/* line 789, app/assets/stylesheets/partials/_index-meta.scss */
.platform-card__logo--brand .cls-1 {
  fill: #161616;
}

/* line 795, app/assets/stylesheets/partials/_index-meta.scss */
.format-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(15, 104, 211, 0.035));
  border: 1px solid rgba(15, 104, 211, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* line 806, app/assets/stylesheets/partials/_index-meta.scss */
.format-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 104, 211, 0.3);
  box-shadow: 0 1rem 1.8rem rgba(15, 104, 211, 0.1);
}

/* line 812, app/assets/stylesheets/partials/_index-meta.scss */
.format-chip__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 0.28rem 0.6rem;
  border-radius: 7px;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* line 827, app/assets/stylesheets/partials/_index-meta.scss */
.format-chip__badge--alt {
  background: #161616;
}

/* line 832, app/assets/stylesheets/partials/_index-meta.scss */
.format-chip__text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(22, 22, 22, 0.72);
}

/* line 839, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item {
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* line 846, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item[open] {
  border-color: rgba(15, 104, 211, 0.25);
  box-shadow: 0 6px 18px -14px rgba(15, 104, 211, 0.5);
}

/* line 851, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__question {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: auto;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  clear: none;
}

/* line 865, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__question::-webkit-details-marker, .faq-item__question::marker {
  display: none;
  content: '';
}

/* line 871, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__question:hover .faq-item__question-text {
  color: #0f68d3;
}

/* line 875, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__question:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: -2px;
}

/* line 881, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__question-text {
  font-size: 0.98rem;
  font-weight: 700;
  color: #161616;
  transition: color 0.15s ease;
}

/* line 888, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.06);
  color: rgba(22, 22, 22, 0.6);
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}

/* line 900, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__icon svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* line 907, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

/* line 913, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__answer {
  margin: 0;
  padding: 0 1.1rem 1rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(22, 22, 22, 0.7);
}

/* line 920, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__answer p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* line 926, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__answer p + p {
  margin-top: 0.6rem;
}

/* line 930, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__answer a {
  color: #0f68d3;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* line 936, app/assets/stylesheets/partials/_index-meta.scss */
.faq-item__answer a:hover {
  text-decoration: none;
}

/* line 142, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-hero::before,
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.6;
  background-image: linear-gradient(rgba(15, 104, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.06) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(120deg, transparent 0%, #000 23%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 23%, #000 78%, transparent 100%);
}

/* line 152, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq::before,
.home-faq::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.45;
  background-image: linear-gradient(rgba(15, 104, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.055) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* line 3, app/assets/stylesheets/partials/_home-hero.scss */
.home-landing {
  background: #fff;
}

/* line 7, app/assets/stylesheets/partials/_home-hero.scss */
.home-search .seo-section--search {
  background: transparent;
}

/* ── Hero shell ───────────────────────────────────────────────── */
/* line 13, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(40rem, 78vh, 52rem);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: radial-gradient(circle at 80% 16%, rgba(15, 104, 211, 0.18), transparent 27rem), radial-gradient(circle at 22% 92%, rgba(19, 185, 129, 0.14), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #eef6ff 100%);
  color: #161616;
}

/* line 26, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* line 33, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__orbit {
  position: absolute;
  border-radius: 50%;
  opacity: .42;
}

/* line 39, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__orbit--one {
  top: -8rem;
  right: -6rem;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(15, 104, 211, 0.22), transparent 62%);
}

/* line 47, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__orbit--two {
  bottom: -10rem;
  left: -4rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.2), transparent 62%);
}

/* line 55, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(26rem, 1.02fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: calc(100% - 2rem);
  max-width: 90rem;
}

/* ── Copy column ──────────────────────────────────────────────── */
/* line 67, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

/* line 73, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__title {
  position: relative;
  isolation: isolate;
  margin: .7rem 0 1.1rem;
  color: #161616;
  font-size: clamp(2.6rem, 4.6vw, 5rem);
  line-height: 1;
  letter-spacing: -.01em;
}

/* line 83, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__platform-backdrop {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-2.8rem, -2.5vw, -1rem);
  display: block;
  width: clamp(13rem, 24vw, 22rem);
  height: clamp(13rem, 24vw, 22rem);
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: .18;
  pointer-events: none;
  transform: translateY(-50%) rotate(-7deg) scale(1);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.26s ease;
  will-change: transform, opacity;
}

/* line 100, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__platform-backdrop.is-leaving {
  opacity: 0;
  transform: translateY(-54%) rotate(-11deg) scale(0.92);
}

/* line 105, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__platform-backdrop.is-entering {
  animation: home-hero-logo-in 380ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

/* line 110, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__title-content {
  position: relative;
  z-index: 1;
}

/* line 115, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__rotator {
  display: inline-flex;
  min-width: var(--rotator-min-width);
  vertical-align: bottom;
}

/* line 121, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__rotator-word {
  display: inline-block;
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.26s ease, color 0.2s ease;
  will-change: transform, opacity;
  background: var(--rotator-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--rotator-color-start);
}

/* line 131, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-0.5em) skewX(-6deg);
}

/* line 136, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__rotator-word.is-entering {
  animation: home-hero-word-in 380ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

/* line 141, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__rotator-tail {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* line 153, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__lead {
  max-width: 40rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1.04rem, 1.4vw, 1.26rem);
  line-height: 1.65;
}

/* ── CTAs ─────────────────────────────────────────────────────── */
/* line 163, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.8rem;
}

/* line 170, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__cta-primary,
.home-hero__cta-secondary {
  flex: 0 0 auto;
}

/* line 174, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__cta-primary svg,
.home-hero__cta-secondary svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform .18s ease;
}

/* line 183, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__cta-primary:hover svg {
  transform: translateX(3px);
}

/* line 189, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__cta-secondary:hover svg {
  transform: translateX(3px);
}

/* ── Trust stats ──────────────────────────────────────────────── */
/* line 195, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

/* line 204, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__stat {
  display: flex;
  flex-flow: column;
  gap: .15rem;
}

/* line 210, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__stat-value {
  color: #161616;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 900;
  line-height: 1;
}

/* line 217, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__stat-label {
  color: rgba(22, 22, 22, 0.55);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Showcase: two fanned "poker hand" cards (Emote Maker / Library) ─ */
/* line 227, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__showcase {
  --card-w: clamp(13rem, 26vw, 22rem);
  --card-overlap: clamp(1.8rem, 3vw, 3.4rem);
  --card-tilt: 6deg;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 3rem 0 1.8rem;
}

/* line 240, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel {
  --panel-accent: #0f68d3;
  position: relative;
  display: flex;
  flex-flow: column;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  padding: .95rem 1rem 1rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1.6rem 3rem rgba(22, 22, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.32s ease, border-color 0.32s ease, filter 0.32s ease;
  will-change: transform;
}

/* line 264, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel--maker {
  --panel-accent: #0f68d3;
  z-index: 2;
  border-color: rgba(15, 104, 211, 0.22);
  color: #161616;
  text-decoration: none;
  transform: rotate(calc(-1 * var(--card-tilt)));
  transform-origin: bottom right;
}

/* line 274, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel--library {
  --panel-accent: #13b981;
  z-index: 1;
  margin-left: calc(-1 * var(--card-overlap));
  border-color: rgba(19, 185, 129, 0.24);
  color: #161616;
  text-decoration: none;
  transform: rotate(var(--card-tilt));
  transform-origin: bottom left;
}

/* Hover: straighten + lift + highlight the picked card, recede the other */
/* line 287, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel:hover,
.home-hero__panel:focus-visible {
  z-index: 5;
  transform: rotate(0) translateY(-1.1rem) scale(1.045);
  text-decoration: none;
  border-color: var(--panel-accent);
  box-shadow: 0 2.6rem 4.4rem color-mix(in srgb, var(--panel-accent) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  outline: none;
}

/* line 299, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__showcase:hover .home-hero__panel:not(:hover) {
  opacity: .88;
}

/* line 303, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .7rem;
}

/* line 311, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  color: #161616;
  font-size: clamp(0.82rem, 1vw, 0.92rem);
  font-weight: 800;
  white-space: nowrap;
}

/* line 322, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-accent) 14%, transparent);
  color: var(--panel-accent);
}

/* line 332, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-icon svg {
  width: .95rem;
  height: .95rem;
}

/* line 335, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  padding: .24rem .5rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 350, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-badge--ai {
  background: #0f68d3;
  color: #fff;
}

/* line 355, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-badge--count {
  border: 1px solid rgba(19, 185, 129, 0.35);
  background: rgba(19, 185, 129, 0.12);
  color: #0c7854;
  letter-spacing: .01em;
  text-transform: none;
}

/* line 362, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-badge--count::after {
  content: '\2192';
  font-weight: 900;
}

/* line 368, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-body {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

/* line 375, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel-note {
  margin: .6rem 0 0;
  color: rgba(22, 22, 22, 0.58);
  font-size: clamp(0.66rem, 0.9vw, 0.76rem);
  line-height: 1.3;
  text-align: center;
}

/* Maker card: flatten the inner prompt frame so the panel is the card */
/* line 386, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel--maker .emote-creator-prompt {
  display: flex;
  flex: 1;
  flex-flow: column;
  min-height: 0;
}

/* line 393, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel--maker .emote-creator-prompt__frame {
  flex: 1;
  min-height: 0;
  gap: .55rem;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* line 403, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel--maker .emote-creator-prompt__frame::before {
  display: none;
}

/* line 406, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__panel--maker .emote-creator-prompt__stage {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

/* Library card: vertical "deck" marquee that fills the card height */
/* line 415, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck {
  display: flex;
  flex: 1;
  gap: .28rem;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* line 426, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-col {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* line 432, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-track {
  display: flex;
  flex-flow: column;
  gap: .28rem;
  will-change: transform;
}

/* line 439, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-col--1 .home-hero__deck-track {
  animation: home-hero-deck-up 24s linear infinite;
}

/* line 440, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-col--2 .home-hero__deck-track {
  animation: home-hero-deck-down 28s linear infinite;
}

/* line 441, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-col--3 .home-hero__deck-track {
  animation: home-hero-deck-up 26s linear infinite;
}

/* line 442, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-col--4 .home-hero__deck-track {
  animation: home-hero-deck-down 30s linear infinite;
}

/* line 444, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: .28rem;
  border: 1px solid rgba(22, 22, 22, 0.07);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #f3faf6);
  box-shadow: 0 0.4rem 0.9rem rgba(19, 185, 129, 0.08);
}

/* line 454, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 461, app/assets/stylesheets/partials/_home-hero.scss */
.home-hero__deck-tile:nth-child(n + 6) {
  display: none;
}

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes home-hero-word-in {
  from {
    opacity: 0;
    transform: translateY(0.55em) skewX(6deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(0);
  }
}

@keyframes home-hero-logo-in {
  from {
    opacity: 0;
    transform: translateY(-46%) rotate(-3deg) scale(1.08);
  }
  to {
    opacity: .18;
    transform: translateY(-50%) rotate(-7deg) scale(1);
  }
}

@keyframes home-hero-deck-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes home-hero-deck-down {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 75rem) {
  /* line 490, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.6rem;
  }
  /* line 495, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__copy,
.home-hero__showcase {
    min-width: 0;
  }
  /* line 500, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__copy {
    max-width: 42rem;
  }
}

@media (max-width: 32rem) {
  /* line 506, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero {
    min-height: auto;
    padding-top: 3rem;
  }
  /* line 510, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero::before {
    opacity: .35;
  }
  /* line 515, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__orbit {
    display: none;
  }
  /* line 519, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__platform-backdrop,
.home-hero__rotator-word,
.home-hero__deck-track,
.home-hero__panel {
    will-change: auto;
  }
  /* line 526, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__cta-primary,
.home-hero__cta-secondary {
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
  }
  /* line 533, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__stats {
    gap: 1.1rem 1.4rem;
  }
  /* line 537, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__showcase {
    --card-w: clamp(11rem, 46vw, 14rem);
    --card-overlap: 1.6rem;
    --card-tilt: 5deg;
  }
  /* line 543, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel {
    padding: .85rem .8rem .9rem;
    background: #fff;
    box-shadow: 0 0.9rem 1.6rem rgba(22, 22, 22, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  /* line 551, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel-head {
    gap: .3rem;
    margin-bottom: .6rem;
  }
  /* line 556, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel-label {
    gap: .35rem;
    font-size: .78rem;
  }
  /* line 561, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel-icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  /* line 565, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel-icon svg {
    width: .85rem;
    height: .85rem;
  }
  /* line 568, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel-badge {
    padding: .22rem .42rem;
    font-size: .58rem;
  }
  /* line 573, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__panel-badge-unit {
    display: none;
  }
  /* line 577, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__deck {
    mask-image: none;
    -webkit-mask-image: none;
  }
  /* line 582, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__deck-track {
    animation: none;
  }
  /* line 586, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__deck-tile:nth-child(n + 6) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 592, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__deck-track {
    animation: none;
  }
  /* line 596, app/assets/stylesheets/partials/_home-hero.scss */
  .home-hero__rotator-word,
.home-hero__platform-backdrop {
    transition: none;
  }
}

/* ── Platform showcase ────────────────────────────────────────── */
/* line 3, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms {
  --seo-accent: #0f68d3;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: radial-gradient(circle at 12% 8%, rgba(15, 104, 211, 0.08), transparent 26rem), radial-gradient(circle at 88% 96%, rgba(19, 185, 129, 0.09), transparent 24rem), linear-gradient(180deg, #eef6ff 0%, #ffffff 32%);
  color: #161616;
}

/* line 17, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 16%;
  z-index: -1;
  height: 10rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--seo-accent) 10%, transparent), rgba(19, 185, 129, 0.1), transparent);
  transform: rotate(-3deg);
}

/* line 30, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__inner {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 76rem;
  margin-inline: auto;
}

/* line 37, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__head {
  max-width: 44rem;
  margin: 0 auto clamp(2.4rem, 4vw, 3.4rem);
  text-align: center;
}

/* line 43, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__title {
  margin: .6rem 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* line 51, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__lead {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(22, 22, 22, 0.7);
}

/* line 58, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 67, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card {
  --brand: #0f68d3;
  display: flex;
}

/* line 73, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* line 87, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-link:hover, .home-platforms__card-link:focus-visible {
  text-decoration: none;
}

/* line 90, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--brand), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* line 106, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-link:hover, .home-platforms__card-link:focus-visible {
  transform: translateY(-0.35rem);
  border-color: transparent;
  box-shadow: 0 1.4rem 2.8rem rgba(22, 22, 22, 0.12);
}

/* line 112, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-link:hover::before, .home-platforms__card-link:focus-visible::before {
  opacity: 1;
}

/* line 116, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .75rem;
}

/* line 123, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--brand) 5%, #fff);
}

/* line 132, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-icon img {
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
}

/* line 139, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* line 145, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-tagline {
  margin: 0 0 1.05rem;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(22, 22, 22, 0.62);
}

/* line 152, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__benefits {
  display: grid;
  gap: .58rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

/* line 160, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__benefit {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .52rem;
  align-items: baseline;
}

/* line 167, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__benefit-text {
  font-size: .86rem;
  line-height: 1.42;
  color: rgba(22, 22, 22, 0.68);
}

/* line 173, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  color: var(--brand);
}

/* line 183, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__benefit-icon svg {
  width: .62rem;
  height: .62rem;
}

/* line 189, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  font-size: .92rem;
  font-weight: 700;
  color: var(--brand);
}

/* line 198, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-cta svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform .25s ease;
}

/* line 205, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__card-link:hover .home-platforms__card-cta svg,
.home-platforms__card-link:focus-visible .home-platforms__card-cta svg {
  transform: translateX(0.25rem);
}

/* line 210, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .95rem;
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.1rem, 2vw, 1.45rem);
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 221, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more-label {
  flex: 0 0 auto;
  color: rgba(22, 22, 22, 0.48);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 231, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 241, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: rgba(22, 22, 22, 0.68);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

/* line 252, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .22rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity .2s ease, transform .2s ease;
}

/* line 266, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more-link:hover, .home-platforms__more-link:focus-visible {
  color: #0f68d3;
  text-decoration: none;
}

/* line 271, app/assets/stylesheets/partials/_home-platforms.scss */
.home-platforms__more-link:hover::after, .home-platforms__more-link:focus-visible::after {
  opacity: .38;
  transform: scaleX(1);
}

@media (max-width: 58rem) {
  /* line 279, app/assets/stylesheets/partials/_home-platforms.scss */
  .home-platforms__grid {
    display: flex;
    gap: 1rem;
    margin: -1.2rem -1rem -3.5rem;
    padding: 1.2rem 1rem 3.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* line 291, app/assets/stylesheets/partials/_home-platforms.scss */
  .home-platforms__grid::-webkit-scrollbar {
    display: none;
  }
  /* line 296, app/assets/stylesheets/partials/_home-platforms.scss */
  .home-platforms__card {
    flex: 0 0 clamp(17rem, 72vw, 20rem);
    scroll-snap-align: start;
  }
  /* line 301, app/assets/stylesheets/partials/_home-platforms.scss */
  .home-platforms__more {
    align-items: flex-start;
    flex-direction: column;
    gap: .75rem;
    margin-top: 2.1rem;
  }
  /* line 308, app/assets/stylesheets/partials/_home-platforms.scss */
  .home-platforms__more-links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 314, app/assets/stylesheets/partials/_home-platforms.scss */
  .home-platforms__card-link,
.home-platforms__card-cta svg,
.home-platforms__more-link,
.home-platforms__more-link::after {
    transition: none;
  }
}

/* ── How it works + Discord sync ──────────────────────────────── */
/* line 3, app/assets/stylesheets/partials/_home-how.scss */
.home-how {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: radial-gradient(circle at 84% 6%, rgba(15, 104, 211, 0.06), transparent 24rem), linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
  color: #161616;
}

/* line 15, app/assets/stylesheets/partials/_home-how.scss */
.home-how__inner {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 76rem;
  margin-inline: auto;
}

/* line 22, app/assets/stylesheets/partials/_home-how.scss */
.home-how__head {
  max-width: 46rem;
  margin: 0 auto clamp(2.4rem, 4vw, 3.4rem);
  text-align: center;
}

/* line 28, app/assets/stylesheets/partials/_home-how.scss */
.home-how__title {
  margin: .6rem 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* line 36, app/assets/stylesheets/partials/_home-how.scss */
.home-how__lead {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(22, 22, 22, 0.7);
}

/* Steps */
/* line 44, app/assets/stylesheets/partials/_home-how.scss */
.home-how__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: home-how;
}

/* line 54, app/assets/stylesheets/partials/_home-how.scss */
.home-how__step {
  --step-accent: #0f68d3;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.8rem);
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
}

/* line 67, app/assets/stylesheets/partials/_home-how.scss */
.home-how__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  margin-bottom: 1.1rem;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--step-accent) 9%, #fff);
  color: var(--step-accent);
}

/* line 78, app/assets/stylesheets/partials/_home-how.scss */
.home-how__step-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* line 84, app/assets/stylesheets/partials/_home-how.scss */
.home-how__step-number {
  position: absolute;
  top: clamp(1rem, 2vw, 1.4rem);
  right: clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: color-mix(in srgb, var(--step-accent) 22%, transparent);
}

/* line 95, app/assets/stylesheets/partials/_home-how.scss */
.home-how__step-title {
  margin: 0 0 .5rem;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* line 102, app/assets/stylesheets/partials/_home-how.scss */
.home-how__step-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.52;
  color: rgba(22, 22, 22, 0.64);
}

/* Discord sync — the easier way */
/* line 110, app/assets/stylesheets/partials/_home-how.scss */
.home-sync {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding: clamp(1.8rem, 3.6vw, 3rem);
  border-radius: 1.7rem;
  background: radial-gradient(circle at 86% -5%, rgba(88, 101, 242, 0.6), transparent 58%), linear-gradient(155deg, #36393f 0%, #26272d 55%, #1e1f22 100%);
  color: #fff;
}

/* line 127, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__glow {
  position: absolute;
  z-index: -1;
  top: -32%;
  right: -10%;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 101, 242, 0.5), transparent 66%);
  pointer-events: none;
}

/* line 139, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__mark {
  position: absolute;
  z-index: -1;
  right: -2.6rem;
  bottom: -4rem;
  width: 17rem;
  height: 17rem;
  color: rgba(88, 101, 242, 0.16);
  transform: rotate(-12deg);
  pointer-events: none;
}

/* line 150, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__mark svg {
  width: 100%;
  height: 100%;
}

/* line 156, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, 0.72);
}

/* line 163, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__eyebrow-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: .5rem;
  background: #5865F2;
  color: #fff;
}

/* line 173, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__eyebrow-glyph svg {
  width: .95rem;
  height: .95rem;
}

/* line 179, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__title {
  margin: .7rem 0 .8rem;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
}

/* line 187, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lead {
  margin: 0 0 1.5rem;
  max-width: 32rem;
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

/* line 196, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__cta svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform .25s ease;
}

/* line 204, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__cta:hover svg, .home-sync__cta:focus-visible svg {
  transform: translateX(0.25rem);
}

/* line 208, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__note {
  margin: .85rem 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.55);
}

/* line 214, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__compare {
  display: grid;
  gap: .85rem;
}

/* line 219, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1.1rem;
  background: rgba(30, 31, 34, 0.55);
}

/* line 225, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane--auto {
  border-color: rgba(88, 101, 242, 0.55);
  background: rgba(88, 101, 242, 0.16);
}

/* line 231, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane-label {
  display: block;
  margin-bottom: .65rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* line 240, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane--auto .home-sync__lane-label {
  color: color-mix(in srgb, #5865F2 30%, #fff);
}

/* line 243, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane-list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 251, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane-item {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: .55rem;
  align-items: start;
}

/* line 258, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane-text {
  font-size: .86rem;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.82);
}

/* line 264, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane--manual .home-sync__lane-text {
  color: rgba(255, 255, 255, 0.58);
}

/* line 266, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .05rem;
  border-radius: 50%;
}

/* line 275, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane-icon svg {
  width: .68rem;
  height: .68rem;
}

/* line 280, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane--manual .home-sync__lane-icon {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

/* line 285, app/assets/stylesheets/partials/_home-how.scss */
.home-sync__lane--auto .home-sync__lane-icon {
  background: rgba(35, 165, 90, 0.25);
  color: #3bd97c;
}

@media (max-width: 52rem) {
  /* line 292, app/assets/stylesheets/partials/_home-how.scss */
  .home-sync {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* ── Free creator tools ───────────────────────────────────────── */
/* line 3, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: radial-gradient(circle at 14% 6%, rgba(15, 104, 211, 0.07), transparent 26rem), radial-gradient(circle at 86% 94%, rgba(19, 185, 129, 0.08), transparent 24rem), linear-gradient(180deg, #f5f8fd 0%, #ffffff 36%);
  color: #161616;
}

/* line 16, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__inner {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 76rem;
  margin-inline: auto;
}

/* line 23, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__head {
  max-width: 46rem;
  margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
  text-align: center;
}

/* line 29, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__title {
  margin: .6rem 0 1rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

/* line 37, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__lead {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: rgba(22, 22, 22, 0.7);
}

/* line 44, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .95rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

/* line 54, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__trust-item {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: .84rem;
  font-weight: 600;
  color: rgba(22, 22, 22, 0.62);
}

/* line 63, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: color-mix(in srgb, #13b981 12%, #fff);
  color: #13b981;
}

/* line 73, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__trust-check svg {
  width: .64rem;
  height: .64rem;
}

/* Grid + cards */
/* line 80, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 89, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__item {
  --tool-accent: #0f68d3;
  display: flex;
}

/* line 95, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 1.4rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* line 109, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card:hover, .home-tools__card:focus-visible {
  text-decoration: none;
}

/* line 112, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--tool-accent), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* line 128, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card:hover, .home-tools__card:focus-visible {
  transform: translateY(-0.35rem);
  border-color: transparent;
  box-shadow: 0 1.4rem 2.8rem rgba(22, 22, 22, 0.12);
}

/* line 134, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card:hover::before, .home-tools__card:focus-visible::before {
  opacity: 1;
}

/* line 138, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
}

/* line 145, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--tool-accent) 9%, #fff);
  color: var(--tool-accent);
}

/* line 155, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* line 160, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-icon img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}

/* line 167, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-name {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* line 175, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__badge {
  margin-left: auto;
  padding: .26rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tool-accent) 12%, #fff);
  color: var(--tool-accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 188, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-tagline {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(22, 22, 22, 0.62);
}

/* line 195, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

/* line 204, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__tag {
  padding: .28rem .6rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.05);
  color: rgba(22, 22, 22, 0.58);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
}

/* line 214, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  font-size: .92rem;
  font-weight: 700;
  color: var(--tool-accent);
}

/* line 223, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card-cta svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform .25s ease;
}

/* line 230, app/assets/stylesheets/partials/_home-tools.scss */
.home-tools__card:hover .home-tools__card-cta svg,
.home-tools__card:focus-visible .home-tools__card-cta svg {
  transform: translateX(0.25rem);
}

@media (max-width: 64rem) {
  /* line 236, app/assets/stylesheets/partials/_home-tools.scss */
  .home-tools__grid {
    display: flex;
    gap: 1rem;
    margin: -1.2rem -1rem -2.6rem;
    padding: 1.2rem 1rem 2.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* line 248, app/assets/stylesheets/partials/_home-tools.scss */
  .home-tools__grid::-webkit-scrollbar {
    display: none;
  }
  /* line 253, app/assets/stylesheets/partials/_home-tools.scss */
  .home-tools__item {
    flex: 0 0 clamp(15rem, 72vw, 18rem);
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 260, app/assets/stylesheets/partials/_home-tools.scss */
  .home-tools__card,
.home-tools__card-cta svg {
    transition: none;
  }
}

/* ── Homepage FAQ + FAQPage schema ────────────────────────────── */
/* line 3, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: radial-gradient(circle at 18% 14%, rgba(15, 104, 211, 0.12), transparent 26rem), radial-gradient(circle at 86% 84%, rgba(19, 185, 129, 0.1), transparent 24rem), linear-gradient(180deg, #fff 0%, #f7fbff 55%, #fff 100%);
  color: #161616;
}

/* line 15, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__art {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 38%;
  z-index: -1;
  height: 9rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.09), rgba(19, 185, 129, 0.09), transparent);
  transform: rotate(-1.5deg);
}

/* line 26, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__inner {
  width: calc(100% - 2rem);
  max-width: 76rem;
  margin-inline: auto;
}

/* line 32, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.4rem;
}

/* line 40, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__copy {
  min-width: 0;
}

/* line 44, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__title {
  max-width: 24ch;
  margin: .65rem 0 0;
  color: #161616;
  font-size: clamp(2.15rem, 4.5vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}

/* line 53, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__lead {
  max-width: 41rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* line 61, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__list {
  display: flex;
  flex-flow: column;
  gap: .75rem;
  max-width: 60rem;
  margin: 0 auto;
}

/* line 69, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* line 30, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__item:hover {
  border-color: rgba(15, 104, 211, 0.3);
  box-shadow: 0 1.4rem 2.4rem rgba(15, 104, 211, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 37, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__item[open] {
  border-color: rgba(15, 104, 211, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, #0f68d3 4%, #ffffff));
  box-shadow: 0 1.6rem 2.8rem rgba(15, 104, 211, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 73, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: auto;
  height: auto;
  padding: 1.3rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* line 59, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__summary::-webkit-details-marker {
  display: none;
}

/* line 60, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__summary::marker {
  content: '';
}

/* line 62, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__summary:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.55);
  outline-offset: -2px;
  border-radius: 14px;
}

/* line 77, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__question {
  flex: 1;
  color: #161616;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
}

/* line 86, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__icon {
  flex: 0 0 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

/* line 81, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__icon svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

/* line 90, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__item[open] .home-faq__icon {
  transform: rotate(180deg);
  background: #0f68d3;
  color: #fff;
}

/* line 96, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__answer {
  padding: 0 1.5rem 1.4rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: 1rem;
  line-height: 1.65;
}

/* line 102, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__answer p {
  margin: 0;
  max-width: 64ch;
}

/* line 108, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  max-width: 54rem;
  margin: 2.8rem auto 0;
  padding: 1.7rem 1.9rem;
  border: 1px solid rgba(15, 104, 211, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, #0f68d3 6%, #ffffff) 0%, #ffffff 45%, color-mix(in srgb, #13b981 6%, #ffffff) 100%);
  box-shadow: 0 1.6rem 3rem rgba(15, 104, 211, 0.12), 0 0.3rem 0.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 132, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: linear-gradient(rgba(15, 104, 211, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.07) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 70%);
}

/* line 137, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-glow {
  position: absolute;
  top: -6rem;
  right: -6rem;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.22), transparent 65%);
  pointer-events: none;
}

/* line 149, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-copy {
  display: flex;
  flex-flow: column;
  gap: .55rem;
  min-width: 0;
  flex: 1 1 22rem;
}

/* line 157, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-text {
  margin: 0;
  color: #161616;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
}

/* line 166, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-sub {
  display: block;
  margin-top: .25rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* line 176, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
}

/* line 184, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .005em;
  box-shadow: 0 1.2rem 2.2rem rgba(15, 104, 211, 0.32), 0 0.25rem 0.6rem rgba(15, 104, 211, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

/* line 121, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__foot-link svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform .2s ease;
}

/* line 127, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__foot-link:hover, .home-faq__foot-link:focus-visible {
  transform: translateY(-0.2rem);
  background: linear-gradient(135deg, #0e5cbb, #0f68d3);
  box-shadow: 0 1.6rem 2.8rem rgba(15, 104, 211, 0.42), 0 0.35rem 0.8rem rgba(15, 104, 211, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  text-decoration: none;
}

/* line 138, app/assets/stylesheets/partials/_landing_patterns.scss */
.home-faq__foot-link:hover svg, .home-faq__foot-link:focus-visible svg {
  transform: translateX(0.2rem);
}

/* line 188, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-link--ghost {
  background: rgba(15, 104, 211, 0.07);
  color: #0f68d3;
  border: 1px solid rgba(15, 104, 211, 0.22);
  box-shadow: none;
}

/* line 194, app/assets/stylesheets/partials/_home-faq.scss */
.home-faq__foot-link--ghost:hover, .home-faq__foot-link--ghost:focus-visible {
  transform: translateY(-0.2rem);
  background: rgba(15, 104, 211, 0.12);
  border-color: rgba(15, 104, 211, 0.36);
  color: #0f68d3;
  box-shadow: 0 1rem 2rem rgba(15, 104, 211, 0.14);
}

@media only screen and (max-width: 64rem) {
  /* line 205, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    text-align: center;
  }
  /* line 212, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__title,
.home-faq__lead {
    margin-right: auto;
    margin-left: auto;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 220, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__inner {
    width: calc(100% - 1rem);
  }
  /* line 224, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__head {
    margin-bottom: 1.6rem;
  }
  /* line 228, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__title {
    max-width: 22ch;
    line-height: 1.05;
  }
  /* line 233, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__lead {
    font-size: .98rem;
    line-height: 1.55;
  }
  /* line 238, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__summary {
    padding: 1.1rem 1.15rem;
    gap: .9rem;
  }
  /* line 243, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__question {
    font-size: 1rem;
  }
  /* line 247, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__icon {
    width: 1.9rem;
    height: 1.9rem;
  }
  /* line 252, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__answer {
    padding: 0 1.15rem 1.2rem;
    font-size: .95rem;
  }
  /* line 257, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__foot {
    padding: 1.5rem 1.3rem;
    gap: 1.2rem;
    text-align: left;
  }
  /* line 263, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__foot-text {
    font-size: 1.1rem;
  }
  /* line 267, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__foot-sub {
    font-size: .9rem;
  }
  /* line 271, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__foot-actions {
    width: 100%;
  }
  /* line 275, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__foot-link {
    flex: 1 1 auto;
    justify-content: center;
  }
  /* line 280, app/assets/stylesheets/partials/_home-faq.scss */
  .home-faq__foot-glow {
    top: -8rem;
    right: -8rem;
    width: 14rem;
    height: 14rem;
  }
}

/* line 9, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  background: radial-gradient(circle at 84% 14%, rgba(15, 104, 211, 0.16), transparent 24rem), radial-gradient(circle at 8% 92%, rgba(19, 185, 129, 0.1), transparent 22rem), linear-gradient(135deg, #ffffff 0%, #f7fbff 50%, #eef6ff 100%);
}

/* line 19, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  background-image: linear-gradient(rgba(15, 104, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.06) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(120deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
}

/* line 33, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* line 40, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.5;
}

/* line 46, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__orb--one {
  top: -3rem;
  right: 5%;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(15, 104, 211, 0.22), transparent 68%);
}

/* line 54, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__orb--two {
  bottom: -6rem;
  left: 2%;
  width: 17rem;
  height: 17rem;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.16), transparent 70%);
}

/* line 63, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 4rem);
  padding: 0;
}

@media only screen and (max-width: 64rem) {
  /* line 63, app/assets/stylesheets/partials/_show-meta.scss */
  .show-intro__inner {
    width: calc(100% - 2rem);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 63, app/assets/stylesheets/partials/_show-meta.scss */
  .show-intro__inner {
    width: calc(100% - 1.5rem);
  }
}

/* line 78, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro .ai-eyebrow {
  margin-bottom: 0.55rem;
}

/* line 82, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__title {
  margin: 0 0 0.85rem;
  color: #161616;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 1000;
  line-height: 1.02;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* line 92, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__title-by {
  display: block;
  margin-top: 0.4rem;
  color: rgba(22, 22, 22, 0.55);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0;
}

/* line 101, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__lead {
  max-width: 46rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
}

/* line 109, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

/* line 118, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(22, 22, 22, 0.1);
  background: rgba(255, 255, 255, 0.8);
  color: rgba(22, 22, 22, 0.72);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
  backdrop-filter: blur(6px);
}

/* line 134, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__fact-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.3);
}

/* line 141, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__fact--accent {
  border-color: rgba(15, 104, 211, 0.28);
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 146, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__fact--accent .show-intro__fact-dot {
  background: #0f68d3;
  box-shadow: 0 0 0 0.18rem rgba(15, 104, 211, 0.14);
}

/* line 152, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__fact--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  box-shadow: 0 0.6rem 1.2rem rgba(15, 104, 211, 0.28);
}

/* line 158, app/assets/stylesheets/partials/_show-meta.scss */
.show-intro__fact--primary .show-intro__fact-dot {
  background: rgba(255, 255, 255, 0.85);
}

/* line 166, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 2.75rem;
  padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  background: radial-gradient(circle at 88% 6%, rgba(15, 104, 211, 0.07), transparent 28rem), linear-gradient(180deg, rgba(22, 22, 22, 0.018) 0%, rgba(255, 255, 255, 0) 22rem);
}

/* line 177, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__art {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 34%;
  z-index: -1;
  height: 9rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.07), rgba(19, 185, 129, 0.07), transparent);
  transform: rotate(-1.5deg);
  pointer-events: none;
}

/* line 189, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__inner {
  width: calc(100% - 4rem);
}

@media only screen and (max-width: 64rem) {
  /* line 189, app/assets/stylesheets/partials/_show-meta.scss */
  .show-outro__inner {
    width: calc(100% - 2rem);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 189, app/assets/stylesheets/partials/_show-meta.scss */
  .show-outro__inner {
    width: calc(100% - 1.5rem);
  }
}

/* line 201, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__section {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* line 204, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__section:last-child {
  margin-bottom: 0;
}

/* line 209, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(16rem, 0.7fr);
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: 1.6rem;
}

@media only screen and (max-width: 64rem) {
  /* line 209, app/assets/stylesheets/partials/_show-meta.scss */
  .show-outro__head {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

/* line 222, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__head-copy {
  min-width: 0;
}

/* line 225, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__head-copy .ai-eyebrow {
  margin-bottom: 0.5rem;
}

/* line 230, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__heading {
  max-width: 24ch;
  margin: 0;
  color: #161616;
  font-size: clamp(1.55rem, 2.8vw, 2.3rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* line 240, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__lead {
  max-width: 34rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.6);
  font-size: 1rem;
  line-height: 1.6;
}

/* line 248, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__about {
  max-width: 56rem;
}

/* line 252, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__text {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(22, 22, 22, 0.72);
  margin: 0 0 0.85rem;
}

/* line 258, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__text:last-child {
  margin-bottom: 0;
}

/* line 263, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__link {
  color: #0f68d3;
  font-weight: 600;
  text-decoration: none;
}

/* line 268, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__link:hover {
  text-decoration: underline;
}

/* line 274, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.7rem;
  margin: 1.75rem 0 0;
}

/* line 281, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__spec {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(15, 104, 211, 0.035));
  box-shadow: 0 0.8rem 1.6rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* line 296, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__spec:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 104, 211, 0.3);
  box-shadow: 0 1.2rem 2.2rem rgba(15, 104, 211, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 305, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__spec-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 104, 211, 0.85);
}

/* line 313, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__spec-value {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #161616;
  overflow-wrap: anywhere;
}

/* line 322, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
}

@media only screen and (max-width: 32rem) {
  /* line 322, app/assets/stylesheets/partials/_show-meta.scss */
  .show-outro__guides {
    grid-template-columns: 1fr;
  }
}

/* line 332, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1.2rem;
  box-shadow: 0 0.8rem 1.6rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* line 345, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.4rem 2.6rem rgba(22, 22, 22, 0.12);
}

/* line 349, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide:hover .show-outro__guide-bg-logo {
  opacity: 0.16;
  transform: translateY(-50%) scale(1.05) rotate(-4deg);
}

/* line 355, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--discord, .show-outro__guide--discord_sticker {
  border-color: rgba(88, 101, 242, 0.22);
}

/* line 359, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--discord:hover, .show-outro__guide--discord_sticker:hover {
  border-color: rgba(88, 101, 242, 0.4);
  background: linear-gradient(180deg, #fff 0%, rgba(88, 101, 242, 0.05) 100%);
}

/* line 365, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--twitch {
  border-color: rgba(100, 65, 165, 0.22);
}

/* line 368, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--twitch:hover {
  border-color: rgba(100, 65, 165, 0.4);
  background: linear-gradient(180deg, #fff 0%, rgba(100, 65, 165, 0.05) 100%);
}

/* line 374, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--slack {
  border-color: rgba(74, 21, 75, 0.2);
}

/* line 377, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--slack:hover {
  border-color: rgba(74, 21, 75, 0.4);
  background: linear-gradient(180deg, #fff 0%, rgba(74, 21, 75, 0.05) 100%);
}

/* line 383, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--whatsapp {
  border-color: rgba(37, 211, 102, 0.24);
}

/* line 386, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.42);
  background: linear-gradient(180deg, #fff 0%, rgba(37, 211, 102, 0.05) 100%);
}

/* line 393, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-bg-logo {
  position: absolute;
  top: 50%;
  right: -1.5rem;
  transform: translateY(-50%);
  width: 9rem;
  height: 9rem;
  object-fit: contain;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* line 407, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

/* line 416, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-mark {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 2.25rem;
  flex: 0 0 3rem;
  border-radius: 9px;
  background: rgba(22, 22, 22, 0.05);
}

/* line 425, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-mark img {
  display: block;
  max-width: 2.1rem;
  max-height: 1.25rem;
}

/* line 432, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--discord .show-outro__guide-mark, .show-outro__guide--discord_sticker .show-outro__guide-mark {
  background: rgba(88, 101, 242, 0.1);
}

/* line 437, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--twitch .show-outro__guide-mark {
  background: rgba(100, 65, 165, 0.1);
}

/* line 441, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--slack .show-outro__guide-mark {
  background: rgba(74, 21, 75, 0.09);
}

/* line 445, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide--whatsapp .show-outro__guide-mark {
  background: rgba(37, 211, 102, 0.12);
}

/* line 449, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-title {
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.15;
  color: #161616;
  margin: 0;
}

/* line 457, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-steps {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 1.35rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* line 466, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-steps li {
  margin-bottom: 0.4rem;
}

/* line 469, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-steps li::marker {
  color: rgba(15, 104, 211, 0.6);
  font-weight: 800;
}

/* line 474, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__guide-steps li:last-child {
  margin-bottom: 0;
}

/* line 481, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, #0f68d3 6%, #ffffff) 0%, #ffffff 50%, color-mix(in srgb, #13b981 6%, #ffffff) 100%);
  box-shadow: 0 1.4rem 2.8rem rgba(15, 104, 211, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media only screen and (max-width: 32rem) {
  /* line 481, app/assets/stylesheets/partials/_show-meta.scss */
  .show-outro__license {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* line 507, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-glow {
  position: absolute;
  top: -6rem;
  right: -5rem;
  z-index: -1;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.2), transparent 65%);
  pointer-events: none;
}

/* line 519, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-copy {
  min-width: 0;
}

/* line 522, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-copy .ai-eyebrow {
  margin-bottom: 0.4rem;
}

/* line 527, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-title {
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
  color: #161616;
  margin: 0 0 0.4rem;
}

/* line 535, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0.8rem 1.6rem rgba(15, 104, 211, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* line 552, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-link svg {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s ease;
}

/* line 558, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-link:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 1.2rem 2.2rem rgba(15, 104, 211, 0.38);
}

/* line 563, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__license-link:hover svg {
  transform: translateX(0.2rem);
}

/* line 570, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__disclaimer {
  max-width: 60rem;
  margin: 2.4rem auto 0;
  text-align: center;
}

/* line 576, app/assets/stylesheets/partials/_show-meta.scss */
.show-outro__disclaimer-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(22, 22, 22, 0.52);
}

/* line 586, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase {
  margin-top: 2.75rem;
}

/* line 589, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__inner {
  width: calc(100% - 4rem);
}

@media only screen and (max-width: 64rem) {
  /* line 589, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__inner {
    width: calc(100% - 2rem);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 589, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__inner {
    width: calc(100% - 1.5rem);
  }
}

/* line 601, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(15, 104, 211, 0.16);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(15, 104, 211, 0.05));
  box-shadow: 0 1.2rem 2.4rem rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 619, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* line 626, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__avatar {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(15, 104, 211, 0.2), 0 0.5rem 1rem rgba(22, 22, 22, 0.12);
}

/* line 636, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__meta {
  min-width: 0;
}

/* line 640, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__name {
  margin: 0.1rem 0 0;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 646, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__name a {
  color: #161616;
  text-decoration: none;
}

/* line 650, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__name a:hover {
  text-decoration: underline;
}

/* line 656, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__stats {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: rgba(22, 22, 22, 0.6);
}

/* line 662, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__sep {
  margin: 0 0.4rem;
  color: rgba(22, 22, 22, 0.3);
}

/* line 667, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0.6rem 1.4rem rgba(22, 22, 22, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* line 683, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__link svg {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s ease;
}

/* line 689, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__link:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.26);
}

/* line 694, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__link:hover svg {
  transform: translateX(0.2rem);
}

/* line 700, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.85rem 0 1.1rem;
}

/* line 708, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__header-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

/* line 714, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__eyebrow {
  margin: 0;
  color: rgba(22, 22, 22, 0.52);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/* line 723, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__heading {
  margin: 0;
  color: #161616;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* line 733, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__view-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0f68d3;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* line 744, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__view-all svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* line 749, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__view-all:hover {
  text-decoration: underline;
}

/* line 756, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__grid {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.75rem;
  align-content: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem;
}

/* line 768, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__grid::-webkit-scrollbar {
  display: none;
}

/* line 773, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__result {
  position: relative;
  min-width: 0;
  flex: 0 0 8.5rem;
  scroll-snap-align: start;
}

/* line 779, app/assets/stylesheets/partials/_show-meta.scss */
.creator-showcase__result .emote-item {
  height: 100%;
}

@media only screen and (min-width: 32rem) {
  /* line 785, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }
  /* line 791, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__result {
    flex: initial;
  }
}

@media only screen and (min-width: 48rem) {
  /* line 797, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 64rem) {
  /* line 803, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media only screen and (min-width: 32rem) and (max-width: 47.99rem) {
  /* line 810, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__result:nth-child(n + 9) {
    display: none;
  }
}

@media only screen and (min-width: 48rem) and (max-width: 63.99rem) {
  /* line 816, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__result:nth-child(n + 13) {
    display: none;
  }
}

@media only screen and (min-width: 64rem) {
  /* line 822, app/assets/stylesheets/partials/_show-meta.scss */
  .creator-showcase__result:nth-child(n + 17) {
    display: none;
  }
}

/* line 6, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-landing {
  --seo-accent: #0f68d3;
  --seo-accent-strong: #0e5cbb;
  background: #fff;
}

/* line 11, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-landing--discord {
  --seo-accent: #5865F2;
  --seo-accent-strong: #4954e0;
}

/* line 16, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-landing--custom {
  --seo-accent: #0f68d3;
  --seo-accent-strong: #0e5cbb;
}

/* line 21, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-landing--twitch {
  --seo-accent: #6441a5;
  --seo-accent-strong: #533593;
}

/* line 26, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-landing--slack {
  --seo-accent: #4A154B;
  --seo-accent-strong: #611f69;
}

/* line 31, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-landing--whatsapp {
  --seo-accent: #25D366;
  --seo-accent-strong: #1fb457;
}

/* line 39, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  color: #161616;
  background: radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--seo-accent) 16%, transparent), transparent 26rem), radial-gradient(circle at 12% 90%, rgba(19, 185, 129, 0.12), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #eef6ff 100%);
}

/* line 50, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .55;
  background-image: linear-gradient(rgba(22, 22, 22, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 22, 22, 0.05) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(120deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
}

/* line 65, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* line 72, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__orb {
  position: absolute;
  border-radius: 50%;
  opacity: .5;
}

/* line 77, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__orb--one {
  top: 6%;
  right: 5%;
  width: 17rem;
  height: 17rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--seo-accent) 24%, transparent), transparent 68%);
}

/* line 85, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__orb--two {
  bottom: -5rem;
  left: 3%;
  width: 21rem;
  height: 21rem;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.16), transparent 70%);
}

/* line 94, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(26rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: calc(100% - 2rem);
  max-width: 90rem;
}

@media only screen and (max-width: 64rem) {
  /* line 94, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-hero__inner {
    grid-template-columns: 1fr;
  }
  /* line 106, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-hero__inner .seo-hero__copy,
.seo-hero__inner .seo-hero__showcase {
    min-width: 0;
  }
}

/* line 113, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 44rem;
}

/* line 119, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__eyebrow {
  color: var(--seo-accent);
}

/* line 123, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__title {
  margin: .7rem 0 1rem;
  max-width: 15ch;
  font-size: clamp(2.5rem, 4.4vw, 4.6rem);
  line-height: 1;
  color: #161616;
}

/* line 131, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__lead {
  margin: 0;
  max-width: 39rem;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1.04rem, 1.4vw, 1.24rem);
  line-height: 1.65;
}

/* line 139, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

/* line 146, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__cta {
  --button-bg: var(--seo-accent);
  --button-bg-hover: var(--seo-accent-strong);
  --button-color: #fff;
  --button-border: transparent;
  --button-shadow: 0 .85rem 1.9rem color-mix(in srgb, var(--seo-accent) 30%, transparent);
  --button-shadow-hover: 0 1rem 2.1rem color-mix(in srgb, var(--seo-accent) 36%, transparent);
}

/* line 154, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__cta:hover {
  color: #fff;
}

@media only screen and (max-width: 32rem) {
  /* line 158, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-hero__actions .button {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }
}

/* line 167, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.3rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

/* line 176, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(22, 22, 22, 0.8);
}

/* line 185, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--seo-accent) 14%, transparent);
  color: var(--seo-accent);
}

/* line 195, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__trust-check svg {
  width: .85rem;
  height: .85rem;
}

/* line 198, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__showcase {
  position: relative;
  z-index: 1;
}

/* line 207, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee {
  position: relative;
  display: grid;
  grid-template-columns: 5.75rem 5.75rem 4.5rem 5.75rem;
  justify-content: center;
  gap: clamp(1.1rem, 1.8vw, 1.6rem);
  height: clamp(26rem, 40vw, 36rem);
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

/* line 220, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col {
  position: relative;
  min-width: 0;
  transform: translateX(var(--seo-hero-marquee-shift, 0)) rotate(var(--seo-hero-marquee-tilt, 0deg));
  transform-origin: center;
}

/* line 227, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--1 {
  margin-top: -4rem;
}

/* line 228, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--2 {
  margin-top: -2rem;
}

/* line 229, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--2 {
  grid-column: 4;
}

/* line 231, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--0 {
  --seo-hero-marquee-shift: .4rem;
  --seo-hero-marquee-tilt: -3deg;
}

/* line 235, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--1 {
  --seo-hero-marquee-tilt: 2deg;
}

/* line 236, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--2 {
  --seo-hero-marquee-tilt: -1.5deg;
}

/* line 241, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-track {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
  will-change: transform;
  animation: seo-hero-rise 34s linear infinite;
}

/* line 248, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--0 .seo-hero__marquee-track {
  animation-duration: 38s;
}

/* line 249, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--1 .seo-hero__marquee-track {
  animation-duration: 30s;
}

/* line 250, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__marquee-col--2 .seo-hero__marquee-track {
  animation-duration: 34s;
}

/* line 253, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 4.75rem;
  flex: 0 0 auto;
  transition: transform .25s ease;
}

/* line 262, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile:hover {
  transform: translateY(-3px) scale(1.04);
}

/* line 267, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile-art {
  width: 4.75rem;
  max-width: 100%;
}

/* line 271, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile-art .emote-item__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.75rem;
  height: 4.75rem;
  max-width: 4.75rem;
  max-height: 4.75rem;
  padding: 0;
  background-color: transparent !important;
  background-image: none !important;
  border: 0;
  box-shadow: none;
}

/* line 288, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile-art picture {
  display: contents;
}

/* line 292, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile-art img,
.seo-hero__tile-art .emote-item__icon {
  max-width: 4.75rem;
  max-height: 4.75rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* line 301, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile-art .emote-item__icon svg {
  width: 100%;
  height: 100%;
}

/* line 307, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-hero__tile-code {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(22, 22, 22, 0.6);
}

@media only screen and (max-width: 32rem) {
  /* line 318, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-hero__showcase {
    position: absolute;
    inset: -2rem -1rem;
    opacity: .12;
    pointer-events: none;
  }
  /* line 325, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-hero__marquee {
    height: 100%;
  }
}

@keyframes seo-hero-rise {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 336, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-hero__marquee-track {
    animation: none;
  }
}

/* line 343, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.25rem, 6vw, 5.25rem) 0 clamp(3.5rem, 6vw, 5.5rem);
  color: #161616;
  background: linear-gradient(180deg, #fff 0%, #f6fbff 48%, #fff 100%);
}

/* line 351, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .45;
  background-image: linear-gradient(rgba(22, 22, 22, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 185, 129, 0.05) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
}

/* line 365, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section--search {
  z-index: 3;
  overflow: visible;
  padding-bottom: clamp(4.25rem, 7vw, 6.5rem);
}

/* line 372, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section--highlights::after,
.seo-section--related::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 16%;
  z-index: -1;
  height: 10rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--seo-accent) 10%, transparent), rgba(19, 185, 129, 0.1), transparent);
  transform: rotate(-3deg);
}

/* line 385, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section__inner {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 72rem;
  margin: 0 auto;
}

/* line 393, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section .ai-eyebrow,
.seo-landing .emote-creator-faq .ai-eyebrow {
  color: var(--seo-accent);
}

/* line 400, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-search {
  position: relative;
  width: 100%;
  max-width: 50rem;
  margin: 2rem auto 0;
  overflow: visible;
}

/* line 408, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing {
  width: 100%;
  max-width: none;
  height: 3.8rem;
  margin: 0;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.8rem 2rem rgba(22, 22, 22, 0.06);
  overflow: visible;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* line 420, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing:focus-within {
  border-color: var(--seo-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seo-accent) 12%, transparent), 0 0.8rem 2rem rgba(22, 22, 22, 0.07);
}

/* line 427, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .awesomplete {
  z-index: 8;
}

/* line 430, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .awesomplete ul[id^="awesomplete_list_"] {
  top: calc(100% + .55rem);
  z-index: 12;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 12px;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.12);
  overflow: hidden;
}

/* line 438, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .awesomplete ul[id^="awesomplete_list_"] li {
  padding: .72rem .95rem;
  font-size: .95rem;
}

/* line 445, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search__select {
  display: flex;
}

/* line 449, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-select__current {
  max-width: none;
  width: auto;
  min-width: 6.5rem;
  padding: 0 1.1rem;
  border: none;
  border-right: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem 0 0 0.5rem;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.035), rgba(22, 22, 22, 0.015));
  color: #161616;
  font-size: .95rem;
  font-weight: 800;
}

/* line 462, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-select__current:hover, .search--landing .search-select__current:focus, .search--landing .search-select__current:active {
  border-right-color: color-mix(in srgb, var(--seo-accent) 24%, rgba(22, 22, 22, 0.1));
  background: color-mix(in srgb, var(--seo-accent) 7%, #fff);
}

/* line 469, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-select__current::after {
  margin-left: .5rem;
  color: var(--seo-accent);
  font-size: .62rem;
}

/* line 476, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .seo-search__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding-left: 1rem;
  color: rgba(22, 22, 22, 0.38);
}

/* line 484, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .seo-search__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* line 490, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-input {
  padding-left: .6rem;
  padding-right: .5rem;
  font-size: 1.02rem;
  color: #161616;
  background: transparent;
}

/* line 497, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-input::placeholder {
  color: rgba(22, 22, 22, 0.45);
}

/* line 502, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search__cancel-button {
  align-items: center;
}

/* line 506, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-cancel {
  margin-right: .9rem;
  color: rgba(22, 22, 22, 0.5);
}

/* line 510, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .search-cancel:hover, .search--landing .search-cancel:focus, .search--landing .search-cancel:active {
  color: #161616;
}

/* line 517, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .select-dropdown {
  top: calc(100% + .4rem);
  width: max-content;
  min-width: 8rem;
  max-width: none;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0.8rem 1.8rem rgba(22, 22, 22, 0.1);
  overflow: hidden;
}

/* line 528, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .select-dropdown__item {
  padding: .8rem 1rem;
  color: rgba(22, 22, 22, 0.78);
  font-size: .94rem;
  font-weight: 800;
  text-align: left;
}

/* line 535, app/assets/stylesheets/partials/_seo-landing.scss */
.search--landing .select-dropdown__item:hover, .search--landing .select-dropdown__item:focus, .search--landing .select-dropdown__item:active {
  background: color-mix(in srgb, var(--seo-accent) 8%, #fff);
  color: var(--seo-accent);
}

@media only screen and (max-width: 32rem) {
  /* line 408, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing {
    height: 3.75rem;
    min-height: 0;
    align-items: center;
    flex-wrap: nowrap;
  }
  /* line 550, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .search__select {
    flex: 0 0 auto;
    height: 100%;
  }
  /* line 555, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .search-select {
    width: auto;
  }
  /* line 559, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .search-select__current {
    width: auto;
    height: 100%;
    padding: 0 .85rem;
    border-right: 1px solid rgba(22, 22, 22, 0.1);
    border-bottom: none;
    border-radius: 0.5rem 0 0 0.5rem;
  }
  /* line 568, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .select-dropdown {
    top: calc(100% + .35rem);
    left: 0;
    right: auto;
    z-index: 20;
    width: max-content;
    min-width: 8rem;
    max-width: none;
    border-radius: 10px;
    box-shadow: 0 0.9rem 1.8rem rgba(22, 22, 22, 0.12);
  }
  /* line 579, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .select-dropdown__item {
    padding: .9rem 1rem;
    text-align: left;
  }
  /* line 585, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .seo-search__icon {
    height: 3.75rem;
    padding-left: .95rem;
  }
  /* line 590, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .search__text-input {
    height: 3.75rem;
    flex: 1 1 calc(100% - 4.5rem);
  }
  /* line 595, app/assets/stylesheets/partials/_seo-landing.scss */
  .search--landing .search__cancel-button {
    height: 3.75rem;
  }
}

/* line 601, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-search__tags {
  max-width: 55em;
  margin: 1.5rem auto 0;
}

/* line 608, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
}

@media only screen and (max-width: 64rem) {
  /* line 608, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-guide-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* line 620, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-item h2 {
  font-size: 1.6rem;
  line-height: 1.18;
  margin-bottom: .8rem;
  color: #161616;
}

/* line 627, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-item p {
  color: rgba(22, 22, 22, 0.68);
  font-size: 1rem;
  line-height: 1.68;
  margin-bottom: .85rem;
}

/* line 633, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-item p:last-child {
  margin-bottom: 0;
}

/* line 641, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section--guide-cta {
  padding: clamp(2.5rem, 5vw, 4.25rem) 0;
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--seo-accent) 18%, transparent), transparent 24rem), linear-gradient(135deg, #f7fbff 0%, #fff 56%, color-mix(in srgb, var(--seo-accent) 7%, #fff) 100%);
}

/* line 647, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-section--guide-cta::before {
  opacity: .32;
}

/* line 652, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  min-height: 15rem;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--seo-accent) 24%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--seo-accent) 11%, #fff) 0%, #fff 58%), #fff;
  box-shadow: 0 1.6rem 3.2rem color-mix(in srgb, var(--seo-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* line 670, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta::before {
  content: '';
  position: absolute;
  inset: .7rem;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--seo-accent) 12%, transparent);
  border-radius: 13px;
}

@media only screen and (max-width: 64rem) {
  /* line 652, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-guide-cta {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* line 685, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__glow {
  position: absolute;
  right: -4rem;
  top: -5rem;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--seo-accent) 28%, transparent), transparent 68%);
  opacity: .78;
  pointer-events: none;
}

/* line 697, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__copy,
.seo-guide-cta__actions {
  position: relative;
  z-index: 1;
}

/* line 703, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__eyebrow {
  margin-bottom: .75rem;
}

/* line 707, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__title {
  margin: 0;
  max-width: 14ch;
  color: #161616;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

/* line 715, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__body {
  max-width: 43rem;
  margin: 1rem 0 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.65;
}

/* line 723, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__actions {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  width: 20rem;
  max-width: 100%;
}

/* line 731, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  min-height: 3.35rem;
  padding: .55rem .55rem .55rem 1.15rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: #fff;
  color: rgba(22, 22, 22, 0.88);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.18;
  text-decoration: none;
  box-shadow: 0 0.8rem 1.5rem rgba(22, 22, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* line 751, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link span:first-child {
  min-width: 0;
}

/* line 755, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link:hover, .seo-guide-cta__link:focus-visible {
  border-color: color-mix(in srgb, var(--seo-accent) 45%, transparent);
  color: var(--seo-accent-strong);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 1rem 1.8rem color-mix(in srgb, var(--seo-accent) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* line 767, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--seo-accent) 11%, #fff);
  color: var(--seo-accent);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

/* line 779, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link-icon svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

/* line 786, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link:hover .seo-guide-cta__link-icon,
.seo-guide-cta__link:focus-visible .seo-guide-cta__link-icon {
  background: var(--seo-accent);
  color: #fff;
  transform: translateX(2px);
}

/* line 793, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link--primary {
  border-color: transparent;
  background: var(--seo-accent);
  color: #fff;
  box-shadow: 0 0.95rem 1.9rem color-mix(in srgb, var(--seo-accent) 28%, transparent);
}

/* line 799, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link--primary .seo-guide-cta__link-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* line 804, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link--primary:hover, .seo-guide-cta__link--primary:focus-visible {
  border-color: transparent;
  background: var(--seo-accent-strong);
  color: #fff;
  box-shadow: 0 1.15rem 2.2rem color-mix(in srgb, var(--seo-accent) 34%, transparent);
}

/* line 811, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-guide-cta__link--primary:hover .seo-guide-cta__link-icon, .seo-guide-cta__link--primary:focus-visible .seo-guide-cta__link-icon {
  background: rgba(255, 255, 255, 0.24);
}

/* line 819, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

/* line 824, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media only screen and (max-width: 64rem) {
  /* line 819, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 819, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-highlight-grid {
    grid-template-columns: 1fr;
  }
}

/* line 837, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight {
  display: flex;
  flex-flow: column;
  min-width: 0;
  padding: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--seo-accent) 14%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* line 850, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight:hover {
  border-color: color-mix(in srgb, var(--seo-accent) 32%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 1.4rem 2.4rem color-mix(in srgb, var(--seo-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 859, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--seo-accent) 12%, transparent);
  color: var(--seo-accent);
}

/* line 870, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* line 873, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight__title {
  margin: 0 0 .45rem;
  font-size: 1.04rem;
  line-height: 1.25;
  color: #161616;
}

/* line 880, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-highlight__text {
  margin: 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: .96rem;
  line-height: 1.6;
}

/* line 889, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  margin: 0;
}

@media only screen and (max-width: 64rem) {
  /* line 889, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-specs {
    grid-template-columns: 1fr;
  }
}

/* line 900, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-spec {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-left: 3px solid var(--seo-accent);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.85));
  box-shadow: 0 0.8rem 1.6rem rgba(22, 22, 22, 0.04);
}

/* line 911, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-spec dt {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
}

/* line 919, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-spec dd {
  margin: 0;
  font-size: 1.02rem;
  color: #161616;
  line-height: 1.45;
}

/* line 929, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 929, app/assets/stylesheets/partials/_seo-landing.scss */
  .seo-related-grid {
    grid-template-columns: 1fr;
  }
}

/* line 939, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item {
  display: flex;
  flex-flow: column;
  gap: .4rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--seo-accent) 14%, transparent);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* line 954, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item:hover, .seo-related-item:focus-visible {
  border-color: color-mix(in srgb, var(--seo-accent) 34%, transparent);
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 1.4rem 2.4rem color-mix(in srgb, var(--seo-accent) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 963, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item:hover .seo-related-item__head svg, .seo-related-item:focus-visible .seo-related-item__head svg {
  transform: translateX(3px);
}

/* line 969, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* line 975, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item__head h3 {
  margin: 0;
  font-size: 1.12rem;
  color: var(--seo-accent);
}

/* line 981, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item__head svg {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--seo-accent);
  transition: transform .2s ease;
}

/* line 990, app/assets/stylesheets/partials/_seo-landing.scss */
.seo-related-item p {
  margin: 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: .95rem;
  line-height: 1.55;
}

/* line 1, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-landing {
  background: #fff;
}

/* line 5, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52rem;
  padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: radial-gradient(circle at 78% 18%, rgba(15, 104, 211, 0.18), transparent 27rem), radial-gradient(circle at 30% 90%, rgba(19, 185, 129, 0.14), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #eef6ff 100%);
  color: #161616;
}

/* line 17, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero::after {
  content: '';
  position: absolute;
  inset: auto -12% -32% 38%;
  z-index: -1;
  height: 30rem;
  background: radial-gradient(ellipse, rgba(15, 104, 211, 0.13) 0%, transparent 68%);
  transform: rotate(-8deg);
}

/* line 28, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(28rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: calc(100% - 2rem);
  max-width: 90rem;
}

/* line 38, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 45rem;
}

/* line 44, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero__intro {
  min-width: 0;
}

/* line 48, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero__title {
  max-width: 15ch;
  margin: .7rem 0 1rem;
  color: #161616;
  font-size: clamp(2.75rem, 4.7vw, 5.15rem);
  line-height: .98;
}

/* line 56, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero__lead {
  max-width: 40rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.65;
}

/* line 64, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost {
  display: flex;
  flex-flow: column;
  gap: .85rem;
  max-width: 43rem;
  margin-top: 1.45rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid rgba(15, 104, 211, 0.34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(15, 104, 211, 0.08));
  box-shadow: 0 1.2rem 2.6rem rgba(15, 104, 211, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* line 79, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

/* line 86, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__flag {
  display: inline-flex;
  align-items: center;
  padding: .26rem .55rem;
  border-radius: 999px;
  background: #0f68d3;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 100, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__title {
  color: rgba(22, 22, 22, 0.74);
  font-size: .86rem;
  font-weight: 800;
}

/* line 106, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

/* line 112, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row {
  display: flex;
  flex-flow: column;
  gap: .3rem;
  min-width: 0;
  padding: .9rem .95rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

/* line 123, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row--them {
  border-color: rgba(29, 191, 115, 0.22);
  background: linear-gradient(135deg, rgba(29, 191, 115, 0.08), rgba(255, 255, 255, 0.82));
  color: rgba(22, 22, 22, 0.62);
}

/* line 128, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row--them .emote-creator-cost__brand {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: #15995a;
}

/* line 134, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row--them .emote-creator-cost__brand::before {
  content: '';
  width: .42rem;
  height: .42rem;
  flex: 0 0 .42rem;
  border-radius: 50%;
  background: #1dbf73;
  box-shadow: 0 0 0 0.18rem rgba(29, 191, 115, 0.14);
}

/* line 145, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row--them .emote-creator-cost__price {
  color: rgba(22, 22, 22, 0.48);
}

/* line 149, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row--them .emote-creator-cost__price s {
  text-decoration-color: #ef4444;
  text-decoration-thickness: .12em;
}

/* line 155, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__row--us {
  border-color: rgba(15, 104, 211, 0.42);
  background: rgba(15, 104, 211, 0.18);
  box-shadow: 0 0.9rem 1.9rem rgba(15, 104, 211, 0.14);
}

/* line 161, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__brand {
  color: rgba(22, 22, 22, 0.55);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 170, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__price {
  color: #161616;
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
}

/* line 178, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__unit {
  color: rgba(22, 22, 22, 0.62);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 185, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__note {
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: .86rem;
  line-height: 1.55;
}

/* line 192, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-cost__fine-print {
  display: block;
  margin-top: .25rem;
  color: rgba(22, 22, 22, 0.48);
  font-size: .72rem;
  font-weight: 600;
}

/* line 200, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-hero__showcase {
  position: relative;
  min-height: 41rem;
}

/* line 205, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow {
  position: absolute;
  inset: 0;
}

/* line 210, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow figure {
  margin: 0;
}

/* line 214, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow figcaption {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
  z-index: 2;
  padding: .32rem .58rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(22, 22, 22, 0.72);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* line 230, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__step {
  position: absolute;
  left: .75rem;
  top: .75rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: calc(100% - 1.5rem);
  padding: .28rem .55rem .28rem .28rem;
  border: 1px solid rgba(15, 104, 211, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #161616;
  box-shadow: 0 0.8rem 1.8rem rgba(15, 104, 211, 0.14);
}

/* line 247, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  border-radius: 50%;
  background: #0f68d3;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

/* line 262, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__step-label {
  overflow: hidden;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 273, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__reference,
.emote-creator-flow__sheet {
  position: absolute;
  border: 1px solid rgba(15, 104, 211, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 1.4rem 3.2rem rgba(15, 104, 211, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* line 284, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__reference img,
.emote-creator-flow__sheet img {
  display: block;
  width: 100%;
  height: 100%;
}

/* line 291, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__reference {
  left: 0;
  top: 8%;
  z-index: 2;
  width: 38%;
  max-width: 18rem;
  aspect-ratio: 1122 / 1402;
  overflow: hidden;
  transform: rotate(-5deg);
}

/* line 301, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__reference img {
  object-fit: cover;
}

/* line 306, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__sheet {
  left: 28%;
  top: 1%;
  z-index: 3;
  width: 47%;
  max-width: 22rem;
  aspect-ratio: 959 / 1004;
  padding: .5rem;
  animation-delay: -2.2s;
}

/* line 316, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__sheet img {
  object-fit: contain;
}

/* line 321, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__generator {
  position: absolute;
  right: 0;
  top: 14%;
  z-index: 4;
  width: 42%;
  max-width: 19rem;
}

/* line 330, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__step--emotes {
  left: auto;
  right: .5rem;
  top: -1.5rem;
}

/* line 336, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__connector {
  position: absolute;
  z-index: 5;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.58), transparent);
}

/* line 342, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__connector::after {
  content: '';
  position: absolute;
  right: -.15rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-top: 2px solid rgba(15, 104, 211, 0.72);
  border-right: 2px solid rgba(15, 104, 211, 0.72);
  transform: translateY(-50%) rotate(45deg);
}

/* line 354, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__connector span {
  position: absolute;
  left: 50%;
  top: -.85rem;
  transform: translateX(-50%);
  padding: .22rem .48rem;
  border-radius: 999px;
  background: #0f68d3;
  color: #fff;
  font-size: .67rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.55rem 1.2rem rgba(15, 104, 211, 0.3);
}

/* line 371, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__connector--sheet {
  left: 20%;
  top: 43%;
  width: 20%;
  transform: rotate(-12deg);
}

/* line 378, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__connector--emotes {
  left: 52%;
  top: 40%;
  width: 14%;
  transform: rotate(13deg);
}

/* line 385, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__cta {
  position: absolute;
  left: 22%;
  top: 70%;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-width: 16rem;
  min-height: 4rem;
  padding: 1.15rem 1.65rem;
  font-size: 1.1rem;
  transform: rotate(-2deg);
}

/* line 400, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__cta:hover {
  transform: rotate(-2deg) translateY(-1px);
}

/* line 404, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-flow__cta:active {
  transform: rotate(-2deg);
}

/* line 409, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt {
  --prompt-accent: #0f68d3;
  --prompt-accent-soft: rgba(15, 104, 211, 0.14);
  --prompt-glow: rgba(15, 104, 211, 0.32);
  position: relative;
  width: 100%;
  max-width: 32rem;
}

/* line 419, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__frame {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid rgba(15, 104, 211, 0.22);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.95) 60%, rgba(234, 243, 255, 0.92) 100%);
  box-shadow: 0 1.8rem 3.6rem rgba(15, 104, 211, 0.18), 0 0.35rem 0.9rem rgba(15, 104, 211, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 434, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 17px;
  background: conic-gradient(from 140deg at 50% 50%, rgba(15, 104, 211, 0.35), rgba(19, 185, 129, 0.25), rgba(236, 72, 153, 0.25), rgba(15, 104, 211, 0.35));
  opacity: .35;
}

/* line 450, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__head {
  display: flex;
  align-items: center;
  gap: .65rem;
}

/* line 456, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__dots {
  display: inline-flex;
  gap: .32rem;
}

/* line 460, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__dots span {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.14);
}

/* line 467, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__dots span:nth-child(1) {
  background: #ff6157;
}

/* line 468, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__dots span:nth-child(2) {
  background: #febc2e;
}

/* line 469, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__dots span:nth-child(3) {
  background: #28c840;
}

/* line 472, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__brand {
  color: rgba(22, 22, 22, 0.62);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* line 479, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.14), rgba(19, 185, 129, 0.14));
  color: #0f68d3;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 495, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__chip-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #13b981;
  box-shadow: 0 0 0 0.22rem rgba(19, 185, 129, 0.22);
  animation: emote-creator-prompt-blink 1.4s ease-in-out infinite;
}

/* line 504, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__field {
  display: flex;
  flex-flow: column;
  gap: .35rem;
}

/* line 510, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__field-label {
  color: rgba(22, 22, 22, 0.5);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* line 518, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__field-row {
  display: flex;
  align-items: stretch;
  gap: .55rem;
}

/* line 524, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__input {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  min-height: 3rem;
  padding: .65rem .9rem;
  border: 1.5px solid rgba(15, 104, 211, 0.25);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 0 rgba(15, 104, 211, 0);
  color: #161616;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

/* line 546, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-typing .emote-creator-prompt__input, .emote-creator-prompt.is-generating .emote-creator-prompt__input {
  border-color: rgba(15, 104, 211, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(15, 104, 211, 0.12), 0 0.6rem 1.4rem rgba(15, 104, 211, 0.18);
}

/* line 556, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__text {
  display: inline-block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - .35rem);
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* line 567, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__caret {
  display: inline-block;
  flex: 0 0 auto;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: #0f68d3;
  vertical-align: text-bottom;
  animation: emote-creator-prompt-caret 1s steps(2, end) infinite;
}

/* line 577, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__caret {
  opacity: 0;
}

/* line 582, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: auto;
  flex: 0 0 3rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  box-shadow: 0 0.85rem 1.6rem rgba(15, 104, 211, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: default;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* line 600, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__submit svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 605, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__submit {
  transform: scale(0.94);
  box-shadow: 0 0.5rem 1.2rem rgba(15, 104, 211, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* line 613, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.96), rgba(238, 245, 255, 0.9) 60%, rgba(221, 233, 248, 0.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.18), inset 0 1.1rem 2rem rgba(15, 104, 211, 0.05);
}

/* line 625, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 104, 211, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.08) 1px, transparent 1px);
  background-size: 1.8rem 1.8rem;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 78%);
  opacity: .55;
  transition: opacity 400ms ease;
}

/* line 637, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-revealed .emote-creator-prompt__grid {
  opacity: .25;
}

/* line 642, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(15, 104, 211, 0) 0%, rgba(15, 104, 211, 0.22) 45%, rgba(15, 104, 211, 0.65) 50%, rgba(15, 104, 211, 0.22) 55%, rgba(15, 104, 211, 0) 100%);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

/* line 658, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__scan {
  opacity: 1;
  animation: emote-creator-prompt-scan 1.65s cubic-bezier(0.55, 0.1, 0.35, 0.9) 1;
}

/* line 664, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* line 669, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #0f68d3;
  box-shadow: 0 0 0.55rem rgba(15, 104, 211, 0.8);
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* line 682, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__sparks span, .emote-creator-prompt.is-revealed .emote-creator-prompt__sparks span {
  animation: emote-creator-prompt-spark 1.5s ease-out 1 forwards;
  animation-delay: calc(var(--spark-index) * 110ms);
}

/* line 688, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(1) {
  --spark-x: -7rem;
  --spark-y: -4.8rem;
  background: #f59e0b;
  box-shadow: 0 0 0.55rem rgba(245, 158, 11, 0.8);
}

/* line 689, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(2) {
  --spark-x: 6.5rem;
  --spark-y: -5.4rem;
  background: #13b981;
  box-shadow: 0 0 0.55rem rgba(19, 185, 129, 0.8);
}

/* line 690, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(3) {
  --spark-x: -8rem;
  --spark-y: 3.6rem;
  background: #ec4899;
  box-shadow: 0 0 0.55rem rgba(236, 72, 153, 0.8);
}

/* line 691, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(4) {
  --spark-x: 7.6rem;
  --spark-y: 4.2rem;
  background: #0f68d3;
}

/* line 692, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(5) {
  --spark-x: -2.4rem;
  --spark-y: -6.8rem;
  background: #13b981;
  box-shadow: 0 0 0.55rem rgba(19, 185, 129, 0.8);
}

/* line 693, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(6) {
  --spark-x: 3.2rem;
  --spark-y: -6.2rem;
  background: #f59e0b;
  box-shadow: 0 0 0.55rem rgba(245, 158, 11, 0.8);
}

/* line 694, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(7) {
  --spark-x: -5rem;
  --spark-y: 6rem;
  background: #ec4899;
  box-shadow: 0 0 0.55rem rgba(236, 72, 153, 0.8);
}

/* line 695, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sparks span:nth-child(8) {
  --spark-x: 5.4rem;
  --spark-y: 6.6rem;
  background: #0f68d3;
}

/* line 698, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__loader {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .75rem;
  border: 1px solid rgba(15, 104, 211, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, 0.6rem);
  box-shadow: 0 0.7rem 1.4rem rgba(15, 104, 211, 0.2);
  transition: opacity 220ms ease, transform 260ms ease;
  pointer-events: none;
}

/* line 722, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__loader {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* line 728, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__loader-dots {
  display: inline-flex;
  gap: .22rem;
}

/* line 732, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__loader-dots span {
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: #0f68d3;
  animation: emote-creator-prompt-dots 1.1s ease-in-out infinite;
}

/* line 739, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__loader-dots span:nth-child(2) {
  animation-delay: .15s;
}

/* line 740, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__loader-dots span:nth-child(3) {
  animation-delay: .3s;
}

/* line 744, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__image {
  position: absolute;
  inset: 8%;
  z-index: 3;
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.84) rotate(-3deg);
  transition: opacity 460ms ease, transform 520ms cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

/* line 756, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__image {
  opacity: .25;
  transform: scale(0.92) rotate(-1.5deg);
}

/* line 761, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-revealed .emote-creator-prompt__image {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* line 767, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sheet {
  position: absolute;
  inset: 6%;
  z-index: 2;
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

/* line 779, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__sheet, .emote-creator-prompt.is-revealed .emote-creator-prompt__sheet {
  opacity: 0;
  transform: scale(0.94);
}

/* line 786, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__sheet-label {
  position: absolute;
  left: 50%;
  top: .8rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: .32rem .65rem;
  border: 1px solid rgba(15, 104, 211, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #0f68d3;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0.6rem 1.2rem rgba(15, 104, 211, 0.16);
  transform: translate(-50%, 0);
  transition: opacity 320ms ease, transform 320ms ease;
}

/* line 808, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__sheet-label, .emote-creator-prompt.is-revealed .emote-creator-prompt__sheet-label {
  opacity: 0;
  transform: translate(-50%, -0.5rem);
}

/* line 815, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__sheet-label {
  top: .45rem;
  padding: .24rem .5rem;
  font-size: .52rem;
}

/* line 821, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .55rem .75rem;
  padding-top: .3rem;
}

/* line 830, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .82rem;
}

/* line 837, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__status strong {
  margin-left: .25rem;
  color: #161616;
  font-weight: 800;
}

/* line 844, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.25);
  transition: background 220ms ease, box-shadow 220ms ease;
}

/* line 851, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-generating .emote-creator-prompt__status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 0.22rem rgba(245, 158, 11, 0.22);
  animation: emote-creator-prompt-blink 1s ease-in-out infinite;
}

/* line 857, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt.is-revealed .emote-creator-prompt__status-dot {
  background: #13b981;
  box-shadow: 0 0 0 0.22rem rgba(19, 185, 129, 0.22);
}

/* line 863, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* line 880, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__cta svg {
  width: .95rem;
  height: .95rem;
}

/* line 885, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt__cta:hover, .emote-creator-prompt__cta:focus, .emote-creator-prompt__cta:active {
  background: #0e5cbb;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 1.1rem 2rem rgba(15, 104, 211, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* line 898, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact {
  width: 100%;
  max-width: none;
}

/* line 902, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__frame {
  gap: .65rem;
  padding: .65rem .65rem .7rem;
  border-radius: 12px;
}

/* line 908, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__frame::before {
  border-radius: 13px;
}

/* line 912, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__field {
  gap: .25rem;
}

/* line 916, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__field-label {
  font-size: .55rem;
  letter-spacing: .1em;
}

/* line 921, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__input {
  min-height: 2.1rem;
  padding: .35rem .55rem;
  border-radius: 7px;
  font-size: .82rem;
}

/* line 928, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__submit {
  width: 2.1rem;
  flex-basis: 2.1rem;
  border-radius: 0.5rem;
}

/* line 933, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__submit svg {
  width: .8rem;
  height: .8rem;
}

/* line 936, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__stage {
  border-radius: 9px;
}

/* line 940, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__loader {
  bottom: .45rem;
  padding: .26rem .5rem;
  font-size: .58rem;
}

/* line 946, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-prompt--compact .emote-creator-prompt__loader-dots span {
  width: .25rem;
  height: .25rem;
}

/* line 952, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background: linear-gradient(180deg, #fff 0%, #f6fbff 48%, #fff 100%);
  color: #161616;
}

/* line 961, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .55;
  background-image: linear-gradient(rgba(15, 104, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 185, 129, 0.055) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
}

/* line 975, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 18%;
  z-index: -1;
  height: 10rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.1), rgba(19, 185, 129, 0.1), transparent);
  transform: rotate(-3deg);
}

/* line 988, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__inner {
  width: calc(100% - 2rem);
  max-width: 90rem;
}

/* line 993, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* line 1001, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__copy {
  min-width: 0;
}

/* line 1005, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__title {
  max-width: 15ch;
  margin: .65rem 0 0;
  color: #161616;
  font-size: 3.15rem;
  line-height: 1.02;
}

/* line 1013, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__lead {
  max-width: 39rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* line 1021, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__stage {
  position: relative;
  overflow: hidden;
  padding: 2.15rem;
}

/* line 1026, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.72) 38%, transparent 56%);
  translate: -120% 0;
  animation: emote-creator-stage-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

/* line 1038, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__rail {
  position: absolute;
  left: 4.9rem;
  right: 4.9rem;
  top: 4.85rem;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  height: .18rem;
  background: linear-gradient(90deg, rgba(15, 104, 211, 0.2), rgba(19, 185, 129, 0.35), rgba(245, 158, 11, 0.35), rgba(236, 72, 153, 0.28));
}

/* line 1050, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  transform: translateX(-100%);
  animation: emote-creator-rail-scan 4.2s ease-in-out infinite;
}

/* line 1060, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__rail-node {
  position: relative;
  z-index: 2;
  width: .9rem;
  height: .9rem;
  justify-self: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--step-accent);
  box-shadow: 0 0 0 0.5rem rgba(15, 104, 211, 0.08), 0 0.65rem 1.4rem rgba(15, 104, 211, 0.18);
  animation: emote-creator-node-pulse 2.8s ease-in-out infinite;
  animation-delay: calc(var(--step-index) * 220ms);
}

/* line 1076, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-columns: minmax(17.5rem, 1fr);
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .9rem;
  scroll-padding: .2rem;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(15, 104, 211, 0.42) rgba(15, 104, 211, 0.08);
  scrollbar-width: thin;
  animation: emote-creator-scroll-nudge 1.35s ease-out .9s both;
}

/* line 1092, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__steps::-webkit-scrollbar {
  height: .5rem;
}

/* line 1096, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__steps::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.08);
}

/* line 1101, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__steps::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 104, 211, 0.58), rgba(19, 185, 129, 0.5));
}

/* line 1107, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step {
  position: relative;
  display: flex;
  flex-flow: column;
  min-width: 0;
  min-height: 26rem;
  overflow: hidden;
  padding: .9rem;
  animation: emote-creator-step-rise 700ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: calc(var(--step-index) * 110ms);
  scroll-snap-align: start;
  transition: transform 190ms ease, filter 190ms ease;
}

/* line 1120, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: .26rem;
  background: var(--step-accent);
}

/* line 1128, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step::after {
  content: '';
  position: absolute;
  right: -2.5rem;
  top: -2.5rem;
  width: 7rem;
  height: 7rem;
  background: var(--step-accent);
  opacity: .08;
  transform: rotate(18deg);
}

/* line 1140, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step:hover, .emote-creator-how__step:focus-within {
  transform: translateY(-0.35rem);
}

/* line 1146, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.2rem;
}

/* line 1156, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__number {
  color: rgba(22, 22, 22, 0.34);
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

/* line 1164, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__cue {
  display: inline-flex;
  align-items: center;
  max-width: 11rem;
  overflow: hidden;
  padding: .36rem .58rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 1180, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 12rem;
  margin: 1rem 0 1.1rem;
  overflow: hidden;
}

/* line 1188, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__media::before {
  content: '';
  position: absolute;
  inset: .7rem;
  background: radial-gradient(circle at 50% 50%, var(--step-accent), transparent 62%);
  opacity: .08;
}

/* line 1196, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.88) 44%, transparent 58%);
  transform: translateX(-120%);
  animation: emote-creator-media-scan 4.8s ease-in-out infinite;
  animation-delay: calc(var(--step-index) * 260ms);
}

/* line 1206, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__media img {
  position: relative;
  z-index: 2;
  display: block;
  width: 78%;
  max-width: 12rem;
  max-height: 11rem;
  object-fit: contain;
}

/* line 1217, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  gap: .75rem;
  width: 100%;
  max-width: 14rem;
  color: #161616;
}

/* line 1228, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-row,
.emote-creator-how__prompt-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  padding: .12rem 0 .5rem;
}

/* line 1238, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-row::after,
.emote-creator-how__prompt-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--step-accent), transparent);
  opacity: .46;
}

/* line 1250, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-field {
  align-items: flex-start;
  flex-flow: column;
  gap: .32rem;
}

/* line 1256, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-label {
  color: rgba(22, 22, 22, 0.48);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 1266, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-value,
.emote-creator-how__prompt-text {
  color: #161616;
  font-size: .96rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 1274, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1280, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__prompt-text {
  max-width: 13rem;
  font-size: 1.04rem;
  line-height: 1.28;
}

/* line 1286, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step:nth-child(1) .emote-creator-how__media img {
  width: 62%;
  max-width: 8.5rem;
  max-height: 11.5rem;
  border-radius: 8px;
  object-fit: cover;
}

/* line 1294, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step:nth-child(2) .emote-creator-how__media img {
  width: 84%;
  max-width: 12.5rem;
}

/* line 1299, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__step:nth-child(3) .emote-creator-how__media img,
.emote-creator-how__step:nth-child(4) .emote-creator-how__media img {
  width: 68%;
  max-width: 9.2rem;
}

/* line 1305, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-flow: column;
  gap: .55rem;
}

/* line 1313, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__body h3 {
  margin: 0;
  color: #161616;
  font-size: 1.18rem;
  line-height: 1.15;
}

/* line 1320, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-how__body p {
  margin: 0;
  color: rgba(22, 22, 22, 0.64);
  font-size: .95rem;
  line-height: 1.58;
}

/* line 1328, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-orbit {
  position: absolute;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 50%;
  animation: emote-creator-spin 26s linear infinite;
}

/* line 1335, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-orbit--one {
  right: 8%;
  top: 12%;
  width: 36rem;
  height: 36rem;
}

/* line 1342, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-orbit--two {
  right: 19%;
  top: 23%;
  width: 23rem;
  height: 23rem;
  animation-duration: 19s;
  animation-direction: reverse;
}

/* line 1351, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-orbit--three {
  right: -4%;
  top: 35%;
  width: 18rem;
  height: 18rem;
  border-color: rgba(15, 104, 211, 0.2);
  animation-duration: 15s;
}

@keyframes emote-creator-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -.7rem;
  }
}

@keyframes emote-creator-prompt-aurora {
  to {
    transform: rotate(360deg);
  }
}

@keyframes emote-creator-prompt-caret {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes emote-creator-prompt-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .35;
  }
}

@keyframes emote-creator-prompt-scan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(180%);
    opacity: 0;
  }
}

@keyframes emote-creator-prompt-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x, 0)), calc(-50% + var(--spark-y, 0))) scale(0.6);
  }
}

@keyframes emote-creator-prompt-dots {
  0%, 80%, 100% {
    opacity: .25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes emote-creator-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes emote-creator-step-rise {
  from {
    opacity: 0;
    transform: translateY(1.1rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes emote-creator-stage-sheen {
  0%, 46% {
    translate: -120% 0;
  }
  72%, 100% {
    translate: 120% 0;
  }
}

@keyframes emote-creator-rail-scan {
  0%, 30% {
    transform: translateX(-100%);
  }
  70%, 100% {
    transform: translateX(100%);
  }
}

@keyframes emote-creator-node-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0.5rem rgba(15, 104, 211, 0.08), 0 0.65rem 1.4rem rgba(15, 104, 211, 0.18);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 0.75rem rgba(15, 104, 211, 0.04), 0 0.8rem 1.7rem rgba(15, 104, 211, 0.2);
  }
}

/* line 1442, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background: radial-gradient(circle at 12% 8%, rgba(15, 104, 211, 0.12), transparent 26rem), radial-gradient(circle at 88% 92%, rgba(236, 72, 153, 0.1), transparent 24rem), linear-gradient(180deg, #fff 0%, #f4f9ff 50%, #fff 100%);
  color: #161616;
}

/* line 1453, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image: linear-gradient(rgba(15, 104, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 72, 153, 0.055) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* line 1467, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  top: 38%;
  z-index: -1;
  height: 12rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.09), rgba(245, 158, 11, 0.08), rgba(236, 72, 153, 0.09), transparent);
  transform: rotate(-2deg);
}

/* line 1480, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__inner {
  width: calc(100% - 2rem);
  max-width: 90rem;
}

/* line 1485, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.4rem;
}

/* line 1493, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__copy {
  min-width: 0;
}

/* line 1497, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__title {
  max-width: 16ch;
  margin: .65rem 0 0;
  color: #161616;
  font-size: 3.15rem;
  line-height: 1.02;
}

/* line 1505, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__lead {
  max-width: 39rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* line 1513, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
}

/* line 1519, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card {
  position: relative;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1.4rem 2.6rem rgba(22, 22, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* line 1533, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 15px;
  background: linear-gradient(155deg, var(--style-accent) 0%, transparent 55%);
  opacity: .14;
  transition: opacity .35s ease;
}

/* line 1544, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card:hover, .emote-creator-styles__card:focus-within {
  transform: translateY(-0.35rem);
  border-color: color-mix(in srgb, var(--style-accent) 55%, rgba(15, 104, 211, 0.25));
  box-shadow: 0 1.8rem 3rem rgba(22, 22, 22, 0.12), 0 0.4rem 0.9rem color-mix(in srgb, var(--style-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 1553, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card:hover::before, .emote-creator-styles__card:focus-within::before {
  opacity: .26;
}

/* line 1559, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card--popular {
  border-color: color-mix(in srgb, var(--style-accent) 55%, rgba(15, 104, 211, 0.25));
}

/* line 1562, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card--popular::before {
  opacity: .22;
}

/* line 1567, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  margin: .65rem .65rem 0;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, color-mix(in srgb, var(--style-accent) 18%, #f6fbff) 0%, #ffffff 70%);
}

/* line 1577, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.02);
  transition: transform .5s ease;
}

/* line 1588, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card:hover .emote-creator-styles__card-media img,
.emote-creator-styles__card:focus-within .emote-creator-styles__card-media img {
  transform: scale(1.06);
}

/* line 1593, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__chip {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0.35rem 0.75rem rgba(22, 22, 22, 0.12), inset 0 0 0 1px color-mix(in srgb, var(--style-accent) 45%, rgba(15, 104, 211, 0.2));
  color: var(--style-accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* line 1610, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__badge {
  position: absolute;
  top: .55rem;
  right: .55rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--style-accent), color-mix(in srgb, var(--style-accent) 60%, #ffffff));
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 0.9rem color-mix(in srgb, var(--style-accent) 35%, transparent);
}

/* line 1625, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card-body {
  padding: 1rem 1.1rem 1.2rem;
}

/* line 1629, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card-title {
  margin: 0;
  color: #161616;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.005em;
}

/* line 1637, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card-tag {
  margin: .15rem 0 .55rem;
  color: var(--style-accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* line 1646, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__card-text {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: .92rem;
  line-height: 1.5;
}

/* line 1653, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__features {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 1.6rem;
  margin-top: 2.2rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.16);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.94), rgba(15, 104, 211, 0.06));
  box-shadow: 0 1.2rem 2.4rem rgba(15, 104, 211, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 1672, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__features::after {
  content: '';
  position: absolute;
  inset: .55rem;
  pointer-events: none;
  border-radius: 8px;
  background: linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) top left/14px 1px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) top left/1px 14px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) top right/14px 1px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) top right/1px 14px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) bottom left/14px 1px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) bottom left/1px 14px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) bottom right/14px 1px no-repeat, linear-gradient(rgba(15, 104, 211, 0.55), rgba(15, 104, 211, 0.55)) bottom right/1px 14px no-repeat;
  opacity: .65;
  z-index: 0;
}

/* line 1692, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__features::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 104, 211, 0) 8%, rgba(15, 104, 211, 0.55) 35%, rgba(19, 185, 129, 0.85) 50%, rgba(15, 104, 211, 0.55) 65%, rgba(15, 104, 211, 0) 92%, transparent 100%);
  box-shadow: 0 0 12px rgba(15, 104, 211, 0.55), 0 0 28px rgba(19, 185, 129, 0.35);
  animation: emote-creator-features-scan 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes emote-creator-features-scan {
  0% {
    top: 0%;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  48% {
    top: 100%;
    opacity: 1;
  }
  52% {
    top: 100%;
    opacity: 0;
  }
  56% {
    top: 0%;
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 1727, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__features::before {
    animation: none;
    opacity: 0;
  }
}

/* line 1733, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__features-head {
  display: flex;
  flex-flow: column;
  gap: .35rem;
}

/* line 1739, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__features-flag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .26rem .7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.14), rgba(236, 72, 153, 0.12));
  color: #0f68d3;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* line 1754, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__features-text {
  margin: 0;
  color: rgba(22, 22, 22, 0.72);
  font-size: .98rem;
  line-height: 1.55;
}

/* line 1761, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 1770, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.1);
}

/* line 1781, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(15, 104, 211, 0.14) 48%, rgba(19, 185, 129, 0.22) 50%, rgba(15, 104, 211, 0.14) 52%, transparent 70%);
  transform: translateX(-110%);
  animation: emote-creator-feature-detect 4s ease-in-out infinite;
  pointer-events: none;
}

/* line 1799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(1)::before {
  animation-delay: 0s;
}

/* line 1800, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(1) .emote-creator-styles__feature-icon {
  animation-delay: 0s;
}

/* line 1799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(2)::before {
  animation-delay: 0.12s;
}

/* line 1800, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(2) .emote-creator-styles__feature-icon {
  animation-delay: 0.12s;
}

/* line 1799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(3)::before {
  animation-delay: 0.24s;
}

/* line 1800, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(3) .emote-creator-styles__feature-icon {
  animation-delay: 0.24s;
}

/* line 1799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(4)::before {
  animation-delay: 0.36s;
}

/* line 1800, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(4) .emote-creator-styles__feature-icon {
  animation-delay: 0.36s;
}

/* line 1799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(5)::before {
  animation-delay: 0.48s;
}

/* line 1800, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(5) .emote-creator-styles__feature-icon {
  animation-delay: 0.48s;
}

/* line 1799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(6)::before {
  animation-delay: 0.6s;
}

/* line 1800, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature:nth-child(6) .emote-creator-styles__feature-icon {
  animation-delay: 0.6s;
}

@keyframes emote-creator-feature-detect {
  0%, 55% {
    transform: translateX(-110%);
  }
  72% {
    transform: translateX(110%);
  }
  100% {
    transform: translateX(110%);
  }
}

/* line 1811, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.14), rgba(19, 185, 129, 0.14));
  color: #0f68d3;
  animation: emote-creator-feature-lockon 4s ease-in-out infinite;
}

/* line 1823, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature-icon svg {
  width: 1rem;
  height: 1rem;
}

@keyframes emote-creator-feature-lockon {
  0%, 58% {
    box-shadow: 0 0 0 0 rgba(19, 185, 129, 0);
    color: #0f68d3;
  }
  64% {
    box-shadow: 0 0 0 3px rgba(19, 185, 129, 0.35);
    color: #13b981;
  }
  78% {
    box-shadow: 0 0 0 6px rgba(19, 185, 129, 0);
    color: #0f68d3;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(19, 185, 129, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 1837, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__feature::before,
.emote-creator-styles__feature-icon {
    animation: none;
  }
}

/* line 1843, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-styles__feature-label {
  color: #161616;
  font-size: .9rem;
  font-weight: 600;
}

/* line 1849, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background: radial-gradient(circle at 82% 12%, rgba(19, 185, 129, 0.14), transparent 28rem), radial-gradient(circle at 15% 88%, rgba(15, 104, 211, 0.12), transparent 24rem), linear-gradient(180deg, #fff 0%, #f5fbf9 50%, #fff 100%);
  color: #161616;
}

/* line 1860, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image: linear-gradient(rgba(19, 185, 129, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.055) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* line 1874, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 32%;
  z-index: -1;
  height: 10rem;
  background: linear-gradient(90deg, transparent, rgba(19, 185, 129, 0.1), rgba(15, 104, 211, 0.1), transparent);
  transform: rotate(-2deg);
}

/* line 1887, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__inner {
  width: calc(100% - 2rem);
  max-width: 90rem;
}

/* line 1892, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* line 1900, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__copy {
  min-width: 0;
}

/* line 1904, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__title {
  max-width: 17ch;
  margin: .65rem 0 0;
  color: #161616;
  font-size: 3.15rem;
  line-height: 1.02;
}

/* line 1912, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__lead {
  max-width: 39rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* line 1920, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  overflow: hidden;
  max-width: 62rem;
  margin: 0 auto;
  border: 1px solid rgba(19, 185, 129, 0.42);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.8rem 3.6rem rgba(19, 185, 129, 0.14), 0 0.35rem 1rem rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* line 1935, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-main {
  display: flex;
  flex-flow: column;
  gap: 1.1rem;
  padding: 2rem 2.15rem 2.1rem;
}

/* line 1942, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-flag {
  align-self: flex-start;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #13b981, #0fa472);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 0.9rem rgba(19, 185, 129, 0.28);
}

/* line 1956, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-heading {
  display: flex;
  flex-flow: column;
  gap: .25rem;
}

/* line 1962, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-title {
  margin: 0;
  color: #161616;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* line 1970, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-subtitle,
.emote-creator-pricing__card-description {
  margin: 0;
  color: rgba(22, 22, 22, 0.62);
  font-size: .95rem;
  line-height: 1.55;
}

/* line 1978, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__volume {
  display: flex;
  flex-flow: column;
  gap: .35rem;
  margin-top: .25rem;
  padding-top: 1.15rem;
  border-top: 1px dashed rgba(19, 185, 129, 0.3);
}

/* line 1987, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__volume-figure {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

/* line 1992, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__volume-figure strong {
  color: #0fa472;
  font-size: clamp(3rem, 5vw, 4.6rem);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: .9;
}

/* line 2000, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__volume-figure span {
  color: #161616;
  font-size: 1.05rem;
  font-weight: 750;
}

/* line 2007, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__volume small {
  color: rgba(22, 22, 22, 0.46);
  font-size: .75rem;
  font-weight: 650;
}

/* line 2013, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-aside {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 2.15rem;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.72), transparent 12rem), linear-gradient(145deg, rgba(19, 185, 129, 0.15), rgba(15, 104, 211, 0.1));
  border-left: 1px solid rgba(19, 185, 129, 0.2);
}

/* line 2025, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-price {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

/* line 2031, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-price-amount {
  color: #161616;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1;
}

/* line 2039, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-price-unit {
  color: rgba(22, 22, 22, 0.58);
  font-size: .95rem;
  font-weight: 700;
}

/* line 2045, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-price-per-emote {
  margin: .45rem 0 1.45rem;
  color: #0fa472;
  font-size: .9rem;
  font-weight: 750;
}

/* line 2052, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .85rem 1rem;
  border-radius: .7rem;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  font-size: .95rem;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 0.8rem 1.5rem rgba(15, 104, 211, 0.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* line 2068, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform .2s ease;
}

/* line 2074, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-cta:hover, .emote-creator-pricing__card-cta:focus-visible {
  background: linear-gradient(135deg, #0e5cbb, #0f68d3);
  color: #fff;
  transform: translateY(-0.15rem);
  box-shadow: 0 1rem 1.8rem rgba(15, 104, 211, 0.3);
}

/* line 2081, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-cta:hover svg, .emote-creator-pricing__card-cta:focus-visible svg {
  transform: translateX(0.15rem);
}

/* line 2085, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__card-billing-note {
  margin-top: .8rem;
  color: rgba(22, 22, 22, 0.5);
  font-size: .72rem;
  line-height: 1.4;
}

/* line 2092, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

/* line 2101, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perk {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.1), 0 0.4rem 0.9rem rgba(22, 22, 22, 0.04);
}

/* line 2113, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perk-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(19, 185, 129, 0.18), rgba(15, 104, 211, 0.14));
  color: #13b981;
}

/* line 2124, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perk-check svg {
  width: .95rem;
  height: .95rem;
}

/* line 2130, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perk-copy {
  display: flex;
  flex-flow: column;
  gap: .15rem;
}

/* line 2136, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perk-label {
  color: #161616;
  font-size: .92rem;
  font-weight: 700;
}

/* line 2142, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-pricing__perk-text {
  color: rgba(22, 22, 22, 0.62);
  font-size: .82rem;
  line-height: 1.4;
}

@keyframes emote-creator-cue-glow {
  0%, 100% {
    background: rgba(255, 255, 255, 0.78);
  }
  50% {
    background: rgba(255, 255, 255, 0.96);
  }
}

@keyframes emote-creator-media-scan {
  0%, 42% {
    transform: translateX(-120%);
  }
  68%, 100% {
    transform: translateX(120%);
  }
}

@keyframes emote-creator-scroll-nudge {
  0%, 100% {
    transform: translateX(0);
  }
  42% {
    transform: translateX(-0.8rem);
  }
  68% {
    transform: translateX(0.25rem);
  }
}

/* line 2164, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background: radial-gradient(circle at 18% 14%, rgba(15, 104, 211, 0.14), transparent 26rem), radial-gradient(circle at 86% 84%, rgba(19, 185, 129, 0.12), transparent 24rem), linear-gradient(180deg, #fff 0%, #f7fbff 55%, #fff 100%);
  color: #161616;
}

/* line 2176, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__art {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 38%;
  z-index: -1;
  height: 9rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.09), rgba(19, 185, 129, 0.09), transparent);
  transform: rotate(-1.5deg);
}

/* line 2187, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__inner {
  width: calc(100% - 2rem);
  max-width: 90rem;
}

/* line 2192, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.7fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.4rem;
}

/* line 2200, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__copy {
  min-width: 0;
}

/* line 2204, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__title {
  max-width: 22ch;
  margin: .65rem 0 0;
  color: #161616;
  font-size: 3.15rem;
  line-height: 1.02;
  letter-spacing: -.01em;
}

/* line 2213, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__lead {
  max-width: 39rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* line 2221, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__list {
  display: flex;
  flex-flow: column;
  gap: .75rem;
  max-width: 60rem;
  margin: 0 auto;
}

/* line 2229, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* line 30, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__item:hover {
  border-color: rgba(15, 104, 211, 0.3);
  box-shadow: 0 1.4rem 2.4rem rgba(15, 104, 211, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 37, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__item[open] {
  border-color: rgba(15, 104, 211, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, #0f68d3 4%, #ffffff));
  box-shadow: 0 1.6rem 2.8rem rgba(15, 104, 211, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 2233, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: auto;
  height: auto;
  padding: 1.3rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* line 59, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__summary::-webkit-details-marker {
  display: none;
}

/* line 60, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__summary::marker {
  content: '';
}

/* line 62, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__summary:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.55);
  outline-offset: -2px;
  border-radius: 14px;
}

/* line 2237, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__question {
  flex: 1;
  color: #161616;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.005em;
}

/* line 2246, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__icon {
  flex: 0 0 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}

/* line 81, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__icon svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}

/* line 2250, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__item[open] .emote-creator-faq__icon {
  transform: rotate(180deg);
  background: #0f68d3;
  color: #fff;
}

/* line 2256, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__answer {
  padding: 0 1.5rem 1.4rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: 1rem;
  line-height: 1.65;
}

/* line 2262, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__answer p {
  margin: 0;
  max-width: 56ch;
}

/* line 2268, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  max-width: 50rem;
  margin: 2.8rem auto 0;
  padding: 1.7rem 1.9rem;
  border: 1px solid rgba(15, 104, 211, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, #0f68d3 6%, #ffffff) 0%, #ffffff 45%, color-mix(in srgb, #13b981 6%, #ffffff) 100%);
  box-shadow: 0 1.6rem 3rem rgba(15, 104, 211, 0.12), 0 0.3rem 0.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 2292, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: linear-gradient(rgba(15, 104, 211, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.07) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 30% 50%, #000 0%, transparent 70%);
}

/* line 2297, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot-glow {
  position: absolute;
  top: -6rem;
  right: -6rem;
  z-index: -1;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.22), transparent 65%);
  pointer-events: none;
}

/* line 2309, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot-copy {
  display: flex;
  flex-flow: column;
  gap: .55rem;
  min-width: 0;
  flex: 1 1 22rem;
}

/* line 2317, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot-text {
  margin: 0;
  color: #161616;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
}

/* line 2326, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot-sub {
  display: block;
  margin-top: .25rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* line 2336, app/assets/stylesheets/partials/_emote_creator_landing.scss */
.emote-creator-faq__foot-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .005em;
  box-shadow: 0 1.2rem 2.2rem rgba(15, 104, 211, 0.32), 0 0.25rem 0.6rem rgba(15, 104, 211, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

/* line 121, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__foot-link svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform .2s ease;
}

/* line 127, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__foot-link:hover, .emote-creator-faq__foot-link:focus-visible {
  transform: translateY(-0.2rem);
  background: linear-gradient(135deg, #0e5cbb, #0f68d3);
  box-shadow: 0 1.6rem 2.8rem rgba(15, 104, 211, 0.42), 0 0.35rem 0.8rem rgba(15, 104, 211, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  text-decoration: none;
}

/* line 138, app/assets/stylesheets/partials/_landing_patterns.scss */
.emote-creator-faq__foot-link:hover svg, .emote-creator-faq__foot-link:focus-visible svg {
  transform: translateX(0.2rem);
}

@media only screen and (max-width: 64rem) {
  /* line 2341, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero {
    min-height: 0;
    padding-top: clamp(3rem, 7vw, 4.5rem);
  }
  /* line 2346, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* line 2351, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__copy {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
  }
  /* line 2357, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__title {
    max-width: 16ch;
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2363, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__lead {
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2368, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost {
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2373, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__showcase {
    min-height: clamp(34rem, 75vw, 44rem);
  }
  /* line 2377, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow {
    max-width: 48rem;
    margin: 0 auto;
  }
  /* line 2382, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__generator {
    top: 16%;
    width: 38%;
  }
  /* line 2387, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step {
    padding-right: .48rem;
  }
  /* line 2391, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step-label {
    font-size: .62rem;
  }
  /* line 2395, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how {
    padding: 4.5rem 0 5rem;
  }
  /* line 2399, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    text-align: center;
  }
  /* line 2406, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__title,
.emote-creator-how__lead {
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2412, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__title {
    font-size: 2.65rem;
  }
  /* line 2416, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__rail {
    display: none;
  }
  /* line 2420, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles {
    padding: 4.5rem 0 5rem;
  }
  /* line 2424, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    text-align: center;
  }
  /* line 2431, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__title,
.emote-creator-styles__lead {
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2437, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__title {
    font-size: 2.65rem;
  }
  /* line 2441, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 2445, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__features {
    grid-template-columns: 1fr;
    text-align: center;
  }
  /* line 2450, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__features-flag {
    margin: 0 auto;
  }
  /* line 2454, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__feature {
    text-align: left;
  }
  /* line 2458, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing {
    padding: 4.5rem 0 5rem;
  }
  /* line 2462, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    text-align: center;
  }
  /* line 2469, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__title,
.emote-creator-pricing__lead {
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2475, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__title {
    font-size: 2.65rem;
  }
  /* line 2479, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__card {
    grid-template-columns: 1fr;
  }
  /* line 2483, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__card-aside {
    align-items: center;
    border-top: 1px solid rgba(19, 185, 129, 0.2);
    border-left: 0;
    text-align: center;
  }
  /* line 2490, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 2494, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq {
    padding: 4.5rem 0 5rem;
  }
  /* line 2498, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
    text-align: center;
  }
  /* line 2505, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__title,
.emote-creator-faq__lead {
    margin-right: auto;
    margin-left: auto;
  }
  /* line 2511, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__title {
    font-size: 2.65rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 2517, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero {
    padding: 2.4rem 0 2.8rem;
  }
  /* line 2520, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero::before {
    background-size: 3rem 3rem;
  }
  /* line 2525, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__inner {
    width: calc(100% - 1rem);
    max-width: 32rem;
    gap: 1.6rem;
  }
  /* line 2531, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__copy {
    display: contents;
  }
  /* line 2535, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__intro {
    order: 1;
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
  }
  /* line 2542, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__title {
    max-width: 12ch;
    font-size: clamp(2.1rem, 10vw, 3.1rem);
    line-height: 1.02;
  }
  /* line 2548, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__lead {
    font-size: 1rem;
    line-height: 1.55;
  }
  /* line 2553, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost {
    order: 5;
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    gap: .75rem;
    padding: .85rem;
  }
  /* line 2563, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost__head {
    justify-content: center;
  }
  /* line 2567, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost__rows {
    grid-template-columns: 1fr;
    gap: .55rem;
  }
  /* line 2572, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost__row {
    padding: .75rem;
  }
  /* line 2576, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost__price {
    font-size: 1.85rem;
  }
  /* line 2580, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost__note {
    font-size: .8rem;
  }
  /* line 2584, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__showcase {
    display: contents;
    width: 100%;
    min-height: 0;
  }
  /* line 2590, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow {
    display: contents;
  }
  /* line 2594, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__reference,
.emote-creator-flow__sheet {
    order: 3;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    transform: none;
  }
  /* line 2604, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__reference {
    align-self: end;
  }
  /* line 2608, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__sheet {
    align-self: start;
    padding: .35rem;
  }
  /* line 2613, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__connector {
    display: none;
  }
  /* line 2617, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__cta {
    position: relative;
    inset: auto;
    order: 2;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    padding: 1rem 1.25rem;
    transform: none;
  }
  /* line 2627, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__cta:hover {
    transform: translateY(-1px);
  }
  /* line 2631, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__cta:active {
    transform: translateY(0);
  }
  /* line 2636, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__generator {
    position: relative;
    inset: auto;
    order: 4;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 1.4rem;
  }
  /* line 2646, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step {
    left: .45rem;
    top: .45rem;
    max-width: calc(100% - .9rem);
    padding: .22rem .42rem .22rem .22rem;
  }
  /* line 2653, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step--emotes {
    left: .5rem;
    right: auto;
    top: -1.4rem;
  }
  /* line 2659, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step-number {
    width: 1.25rem;
    height: 1.25rem;
    flex-basis: 1.25rem;
    font-size: .66rem;
  }
  /* line 2666, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step-label {
    font-size: .56rem;
    letter-spacing: .02em;
  }
  /* line 2671, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow figcaption {
    left: .45rem;
    bottom: .45rem;
    max-width: calc(100% - .9rem);
    overflow: hidden;
    padding: .24rem .4rem;
    font-size: .56rem;
    text-overflow: ellipsis;
  }
  /* line 2681, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how {
    padding: 3.25rem 0 3.75rem;
  }
  /* line 2685, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__inner {
    width: calc(100% - 1rem);
    max-width: 32rem;
  }
  /* line 2690, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__head {
    margin-bottom: 1.25rem;
  }
  /* line 2694, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__title {
    max-width: 13ch;
    font-size: 2.15rem;
    line-height: 1.05;
  }
  /* line 2700, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__lead {
    font-size: .98rem;
    line-height: 1.55;
  }
  /* line 2705, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__stage {
    padding: .9rem .9rem .75rem;
  }
  /* line 2709, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__steps {
    grid-auto-columns: minmax(16.5rem, 82vw);
    gap: .75rem;
  }
  /* line 2714, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__step {
    min-height: 0;
  }
  /* line 2718, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__media {
    min-height: 10.5rem;
    margin: .8rem 0 .9rem;
  }
  /* line 2723, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__body h3 {
    font-size: 1.08rem;
  }
  /* line 2727, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__body p {
    font-size: .9rem;
  }
  /* line 2731, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles {
    padding: 3.25rem 0 3.75rem;
  }
  /* line 2735, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__inner {
    width: calc(100% - 1rem);
    max-width: 32rem;
  }
  /* line 2740, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__head {
    margin-bottom: 1.4rem;
  }
  /* line 2744, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__title {
    max-width: 14ch;
    font-size: 2.15rem;
    line-height: 1.05;
  }
  /* line 2750, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__lead {
    font-size: .98rem;
    line-height: 1.55;
  }
  /* line 2755, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__grid {
    gap: .8rem;
  }
  /* line 2759, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__card-body {
    padding: .85rem .9rem 1rem;
  }
  /* line 2763, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__card-title {
    font-size: 1.05rem;
  }
  /* line 2767, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__card-text {
    font-size: .85rem;
  }
  /* line 2771, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__features {
    margin-top: 1.5rem;
    padding: 1.1rem 1.1rem 1.2rem;
  }
  /* line 2776, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 2780, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing {
    padding: 3.25rem 0 3.75rem;
  }
  /* line 2784, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__inner {
    width: calc(100% - 1rem);
    max-width: 32rem;
  }
  /* line 2789, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__head {
    margin-bottom: 1.4rem;
  }
  /* line 2793, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__title {
    max-width: 14ch;
    font-size: 2.15rem;
    line-height: 1.05;
  }
  /* line 2799, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__lead {
    font-size: .98rem;
    line-height: 1.55;
  }
  /* line 2804, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__card-main,
.emote-creator-pricing__card-aside {
    padding: 1.4rem 1.15rem;
  }
  /* line 2809, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq {
    padding: 3.25rem 0 3.75rem;
  }
  /* line 2813, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__inner {
    width: calc(100% - 1rem);
    max-width: 32rem;
  }
  /* line 2818, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__head {
    margin-bottom: 1.6rem;
  }
  /* line 2822, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__title {
    max-width: 22ch;
    font-size: 2.15rem;
    line-height: 1.05;
  }
  /* line 2828, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__lead {
    font-size: .98rem;
    line-height: 1.55;
  }
  /* line 2833, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__summary {
    padding: 1.1rem 1.15rem;
    gap: .9rem;
  }
  /* line 2838, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__question {
    font-size: 1rem;
  }
  /* line 2842, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__icon {
    width: 1.9rem;
    height: 1.9rem;
  }
  /* line 2847, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__answer {
    padding: 0 1.15rem 1.2rem;
    font-size: .95rem;
  }
  /* line 2852, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__foot {
    padding: 1.5rem 1.3rem;
    gap: 1.2rem;
    text-align: left;
  }
  /* line 2858, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__foot-text {
    font-size: 1.1rem;
  }
  /* line 2862, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__foot-sub {
    font-size: .9rem;
  }
  /* line 2866, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__foot-link {
    width: 100%;
    justify-content: center;
  }
  /* line 2871, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__foot-glow {
    top: -8rem;
    right: -8rem;
    width: 14rem;
    height: 14rem;
  }
}

@media only screen and (max-width: 24rem) {
  /* line 2880, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__inner {
    width: calc(100% - .75rem);
    max-width: 24rem;
  }
  /* line 2885, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-hero__title {
    font-size: clamp(1.9rem, 11vw, 2.55rem);
  }
  /* line 2889, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-cost__title,
.emote-creator-cost__unit,
.emote-creator-cost__note {
    font-size: .74rem;
  }
  /* line 2895, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow {
    gap: .55rem;
  }
  /* line 2899, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__cta {
    padding: .9rem 1rem;
    font-size: 1rem;
  }
  /* line 2904, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step-label {
    display: none;
  }
  /* line 2908, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__step--emotes .emote-creator-flow__step-label {
    display: inline;
  }
  /* line 2912, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-prompt__input {
    font-size: .85rem;
  }
  /* line 2916, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__inner {
    width: calc(100% - .75rem);
    max-width: 24rem;
  }
  /* line 2921, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__title {
    font-size: 1.8rem;
  }
  /* line 2925, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__cue {
    max-width: 8.4rem;
    font-size: .58rem;
  }
  /* line 2930, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-how__number {
    font-size: 1.12rem;
  }
  /* line 2934, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__inner {
    width: calc(100% - .75rem);
    max-width: 24rem;
  }
  /* line 2939, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__title {
    font-size: 1.8rem;
  }
  /* line 2943, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__grid {
    grid-template-columns: 1fr;
  }
  /* line 2947, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__card-media {
    aspect-ratio: 4 / 3;
  }
  /* line 2951, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-styles__feature-list {
    grid-template-columns: 1fr;
  }
  /* line 2955, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__inner {
    width: calc(100% - .75rem);
    max-width: 24rem;
  }
  /* line 2960, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__title {
    font-size: 1.8rem;
  }
  /* line 2964, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__price-amount {
    font-size: 2.1rem;
  }
  /* line 2968, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-pricing__perks {
    grid-template-columns: 1fr;
  }
  /* line 2972, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__inner {
    width: calc(100% - .75rem);
    max-width: 24rem;
  }
  /* line 2977, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__title {
    font-size: 1.8rem;
  }
  /* line 2981, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-faq__question {
    font-size: .95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 2987, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-flow__reference,
.emote-creator-flow__sheet,
.emote-creator-flow__generator,
.emote-creator-flow__cta,
.emote-creator-prompt__frame::before,
.emote-creator-prompt__caret,
.emote-creator-prompt__chip-dot,
.emote-creator-prompt__loader-dots span,
.emote-creator-prompt__scan,
.emote-creator-prompt__sparks span,
.emote-creator-prompt__status-dot,
.emote-creator-orbit,
.emote-creator-how__stage::before,
.emote-creator-how__rail::after,
.emote-creator-how__rail-node,
.emote-creator-how__steps,
.emote-creator-how__step,
.emote-creator-how__cue,
.emote-creator-how__media::after {
    animation: none;
  }
}

@media (max-width: 32rem) {
  /* line 3012, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-prompt--compact .emote-creator-prompt__frame::before,
.emote-creator-prompt--compact .emote-creator-prompt__caret,
.emote-creator-prompt--compact .emote-creator-prompt__loader-dots span,
.emote-creator-prompt--compact .emote-creator-prompt__scan,
.emote-creator-prompt--compact .emote-creator-prompt__sparks span {
    animation: none;
  }
  /* line 3020, app/assets/stylesheets/partials/_emote_creator_landing.scss */
  .emote-creator-prompt--compact .emote-creator-prompt__image,
.emote-creator-prompt--compact .emote-creator-prompt__sheet {
    filter: none;
  }
}

/* line 1, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent-open {
  overflow: hidden;
}

/* line 5, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1400;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

@keyframes cookie-consent-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cookie-consent-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cookie-consent-dialog-in {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* line 43, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner {
  position: relative;
  width: 100%;
  max-width: 60rem;
  padding: 1.5rem 1.65rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  pointer-events: auto;
  animation: cookie-consent-slide-up 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* line 49, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* line 55, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #2a82e6 0%, #0f68d3 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 104, 211, 0.38);
}

/* line 68, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* line 73, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* line 78, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0;
  color: #161616;
}

/* line 86, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: rgba(22, 22, 22, 0.68);
}

/* line 93, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

/* line 100, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-link {
  color: #0f68d3;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(15, 104, 211, 0.28);
  text-underline-offset: 2px;
}

/* line 108, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__banner-link:hover {
  text-decoration-color: #0f68d3;
}

/* line 112, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__button {
  min-width: 8.5rem;
}

/* line 116, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: cookie-consent-fade-in 200ms ease-out;
}

/* line 124, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog {
  position: relative;
  width: 100%;
  max-width: 44rem;
  padding: 1.75rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  animation: cookie-consent-dialog-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* line 136, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* line 143, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog-title {
  margin: 0;
  color: #161616;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}

/* line 148, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog-lead {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  font-size: 0.97rem;
}

/* line 153, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog-close {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.cookie-consent__dialog-close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.cookie-consent__dialog-close:hover, .cookie-consent__dialog-close:focus-visible, .cookie-consent__dialog-close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.cookie-consent__dialog-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 158, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog-close:hover {
  color: #161616;
}

/* line 162, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(32, 189, 90, 0.1);
  color: #137a3a;
  font-size: 0.92rem;
  font-weight: 600;
}

/* line 171, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__status:empty {
  display: none;
}

/* line 176, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__gpc-note {
  margin: 0.75rem 0 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* line 183, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__group {
  margin-top: 0.85rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 14px;
  background: #fafbfc;
  transition: border-color 150ms ease, background 150ms ease;
}

/* line 192, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__group:hover {
  border-color: rgba(22, 22, 22, 0.18);
}

/* line 196, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* line 203, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__group-title {
  display: block;
  font-weight: 800;
  font-size: 1.02rem;
  color: #14161c;
}

/* line 210, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__group-description {
  margin: 0.35rem 0 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: rgba(22, 22, 22, 0.72);
}

/* line 217, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

/* line 226, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* line 237, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle-track {
  position: relative;
  display: inline-block;
  width: 2.4rem;
  height: 1.35rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.2);
  transition: background 180ms ease;
}

/* line 247, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.35rem - 4px);
  height: calc(1.35rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* line 259, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input:checked + .cookie-consent__toggle-track {
  background: #20bd5a;
}

/* line 263, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input:checked + .cookie-consent__toggle-track .cookie-consent__toggle-thumb {
  transform: translateX(calc(2.4rem - 1.35rem));
}

/* line 267, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input:focus-visible + .cookie-consent__toggle-track {
  box-shadow: 0 0 0 3px rgba(32, 189, 90, 0.35);
}

/* line 271, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input:checked ~ .cookie-consent__toggle-label {
  color: #137a3a;
}

/* line 275, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input:checked ~ .cookie-consent__toggle-label--off {
  font-size: 0;
}

/* line 279, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle input:checked ~ .cookie-consent__toggle-label--off::before {
  content: 'On';
  font-size: 0.85rem;
}

/* line 284, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(22, 22, 22, 0.55);
  min-width: 1.8rem;
}

/* line 291, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle--locked .cookie-consent__toggle-track {
  background: #20bd5a;
  opacity: 0.85;
}

/* line 296, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle--locked .cookie-consent__toggle-thumb {
  transform: translateX(calc(2.4rem - 1.35rem));
}

/* line 300, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__toggle--locked .cookie-consent__toggle-label {
  color: #137a3a;
}

/* line 304, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 313, app/assets/stylesheets/partials/_cookie-consent.scss */
.cookie-consent__manage-link {
  font-weight: 600;
}

@media only screen and (max-width: 48em) {
  /* line 318, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
  }
  /* line 324, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__banner {
    padding: 1.15rem 1.15rem 1.2rem;
    border-radius: 16px;
  }
  /* line 329, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__banner-body {
    gap: 0.85rem;
  }
  /* line 333, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__banner-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  /* line 338, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__banner-title {
    font-size: 1.05rem;
  }
  /* line 342, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__banner-actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* line 347, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__banner-actions .cookie-consent__button {
    width: 100%;
  }
  /* line 351, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__dialog {
    width: calc(100vw - 1rem);
    padding: 1.25rem;
  }
  /* line 356, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__group-header,
.cookie-consent__dialog-header {
    flex-direction: column;
    align-items: flex-start;
  }
  /* line 362, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__dialog-actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* line 367, app/assets/stylesheets/partials/_cookie-consent.scss */
  .cookie-consent__dialog-actions .cookie-consent__button {
    width: 100%;
  }
}

/* line 378, app/assets/stylesheets/partials/_cookie-consent.scss */
#consumer-privacy-footer-wrapper.consumer-privacy {
  display: none !important;
}

/* line 385, app/assets/stylesheets/partials/_cookie-consent.scss */
img[src*="intentiq.com"],
img[src*="sync-gdpr"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* line 1, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* line 10, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge.hidden {
  display: none;
}

/* line 14, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 20, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__dialog {
  position: relative;
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  z-index: 1;
}

/* line 25, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__close {
  position: absolute;
  right: 0.85rem;
  top: 0.75rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.download-challenge__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.download-challenge__close:hover, .download-challenge__close:focus-visible, .download-challenge__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.download-challenge__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 32, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* line 37, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__title {
  margin: 0;
  color: #161616;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 41, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__text {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  margin: 0.75rem 0 1rem;
}

/* line 46, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__widget {
  min-height: 70px;
}

/* line 50, app/assets/stylesheets/partials/_download-challenge.scss */
.download-challenge__status {
  margin-top: 0.85rem;
  color: #4b5563;
  font-size: 0.95rem;
}

/* line 1, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 12, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate[hidden] {
  display: none;
}

/* line 16, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__dialog {
  position: relative;
  width: 100%;
  max-width: 28.5rem;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  margin: auto;
  text-align: center;
}

/* line 22, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__close {
  position: absolute;
  right: 0.85rem;
  top: 0.75rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.feature-gate__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.feature-gate__close:hover, .feature-gate__close:focus-visible, .feature-gate__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.feature-gate__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 29, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__eyebrow {
  margin: 0;
  color: #e11d48;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* line 34, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}

/* line 44, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

/* line 50, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__title {
  margin: 0;
  color: #161616;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 54, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__message {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  max-width: 22rem;
  margin: 0.75rem auto 1.2rem;
}

/* line 62, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser {
  max-width: 21rem;
  margin: 0 auto 1.1rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .65rem;
  background: #f1f5f9;
  box-shadow: 0 0.5rem 1.4rem rgba(15, 23, 42, 0.08);
  overflow: hidden;
  text-align: left;
}

/* line 73, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-bar {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .55rem .65rem;
  background: #fff;
  border-bottom: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 82, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-dots {
  display: flex;
  gap: .28rem;
}

/* line 86, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-dots span {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.16);
}

/* line 94, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-address {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: rgba(22, 22, 22, 0.72);
  font-size: .72rem;
  font-weight: 700;
}

/* line 107, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-address svg {
  width: .8rem;
  height: .8rem;
  flex: none;
  color: #13b981;
}

/* line 115, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-extension {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: .5rem;
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}

/* line 126, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-extension svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* line 132, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-ping {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(225, 29, 72, 0.55);
  border-radius: .5rem;
  animation: feature-gate-ping 1.6s ease-out infinite;
}

/* line 140, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-menu {
  position: relative;
  margin: .6rem .65rem .65rem auto;
  max-width: 13.5rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .55rem;
  background: #fff;
  box-shadow: 0 0.55rem 1.2rem rgba(15, 23, 42, 0.12);
}

/* line 150, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-menu-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .7rem;
}

/* line 158, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-menu-label {
  color: #161616;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

/* line 165, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-toggle {
  position: relative;
  width: 1.9rem;
  height: 1.05rem;
  flex: none;
  border-radius: 999px;
  background: #13b981;
}

/* line 173, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-toggle::after {
  content: '';
  position: absolute;
  top: .14rem;
  right: .14rem;
  width: .77rem;
  height: .77rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

/* line 186, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__browser-cursor {
  position: absolute;
  right: .25rem;
  bottom: -.85rem;
  width: 1.15rem;
  height: 1.15rem;
}

/* line 194, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__steps {
  display: grid;
  gap: .55rem;
  margin: 0 auto 1.4rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* line 202, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__steps li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
}

/* line 209, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__step-number {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  align-self: flex-start;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
}

/* line 224, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__step-text {
  color: rgba(22, 22, 22, 0.78);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

/* line 231, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__step-text strong {
  color: #161616;
  font-weight: 800;
}

/* line 237, app/assets/stylesheets/partials/_feature-gate.scss */
.feature-gate__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  width: 100%;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.feature-gate__button:hover, .feature-gate__button:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

@keyframes feature-gate-ping {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  75%,
100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 257, app/assets/stylesheets/partials/_feature-gate.scss */
  .feature-gate__browser-ping {
    animation: none;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 265, app/assets/stylesheets/partials/_feature-gate.scss */
  .feature-gate__step-text {
    white-space: normal;
  }
}

/* line 270, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner,
[data-feature-gate-protected-class='adblock-support-banner'] {
  --adblock-support-banner-column-span: 999;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 1rem;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(225, 29, 72, 0.2);
  border-radius: .65rem;
  background: radial-gradient(circle at 0 50%, rgba(225, 29, 72, 0.1), transparent 15rem), linear-gradient(135deg, #fff, #fff8fa);
  box-shadow: 0 0.65rem 1.8rem rgba(22, 22, 22, 0.1);
}

/* line 290, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner[hidden],
[data-feature-gate-protected-class='adblock-support-banner'][hidden] {
  display: none;
}

/* line 294, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__icon,
[data-feature-gate-protected-class__icon='adblock-support-banner'] {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}

/* line 303, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__icon svg,
[data-feature-gate-protected-class__icon='adblock-support-banner'] svg {
  width: 1.65rem;
  height: 1.65rem;
}

/* line 309, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__copy,
[data-feature-gate-protected-class__copy='adblock-support-banner'] {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

/* line 314, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__copy strong,
[data-feature-gate-protected-class__copy='adblock-support-banner'] strong {
  color: #161616;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

/* line 321, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__copy span,
[data-feature-gate-protected-class__copy='adblock-support-banner'] span {
  color: rgba(22, 22, 22, 0.66);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}

/* line 329, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__promise,
[data-feature-gate-protected-class__promise='adblock-support-banner'] {
  display: flex;
  gap: .4rem;
}

/* line 333, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__promise span,
[data-feature-gate-protected-class__promise='adblock-support-banner'] span {
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.08);
  color: rgba(22, 22, 22, 0.7);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 344, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__button,
[data-feature-gate-protected-class__button='adblock-support-banner'] {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 0.5rem;
  background: #e11d48;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 361, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__button span,
[data-feature-gate-protected-class__button='adblock-support-banner'] span {
  opacity: .72;
}

/* line 365, app/assets/stylesheets/partials/_feature-gate.scss */
.adblock-support-banner__button:hover, .adblock-support-banner__button:focus-visible,
[data-feature-gate-protected-class__button='adblock-support-banner']:hover,
[data-feature-gate-protected-class__button='adblock-support-banner']:focus-visible {
  background: #c1193e;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.16);
  outline: none;
}

@media only screen and (max-width: 64rem) {
  /* line 375, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner,
[data-feature-gate-protected-class='adblock-support-banner'] {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  /* line 379, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner__promise,
[data-feature-gate-protected-class__promise='adblock-support-banner'] {
    display: none;
  }
}

@media only screen and (max-width: 30rem) {
  /* line 386, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner,
[data-feature-gate-protected-class='adblock-support-banner'] {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .7rem;
    padding: .85rem;
  }
  /* line 392, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner__icon,
[data-feature-gate-protected-class__icon='adblock-support-banner'] {
    width: 2.4rem;
    height: 2.4rem;
  }
  /* line 396, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner__icon svg,
[data-feature-gate-protected-class__icon='adblock-support-banner'] svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  /* line 402, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner__copy strong,
[data-feature-gate-protected-class__copy='adblock-support-banner'] strong {
    font-size: .94rem;
  }
  /* line 406, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner__copy span,
[data-feature-gate-protected-class__copy='adblock-support-banner'] span {
    font-size: .76rem;
  }
  /* line 410, app/assets/stylesheets/partials/_feature-gate.scss */
  .adblock-support-banner__button,
[data-feature-gate-protected-class__button='adblock-support-banner'] {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* line 417, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner {
  --consent-upsell-banner-column-span: 999;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(15, 104, 211, 0.2);
  border-radius: .65rem;
  background: radial-gradient(circle at 0 50%, rgba(15, 104, 211, 0.12), transparent 15rem), linear-gradient(135deg, #fff, #f5faff);
  box-shadow: 0 0.65rem 1.8rem rgba(22, 22, 22, 0.1);
}

/* line 436, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner[hidden] {
  display: none;
}

/* line 440, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.11);
  color: #0f68d3;
}

/* line 449, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* line 455, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

/* line 460, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__copy strong {
  color: #161616;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.15;
}

/* line 467, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__copy span {
  color: rgba(22, 22, 22, 0.66);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
}

/* line 475, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* line 481, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__review, .consent-upsell-banner__button {
  min-height: 2.55rem;
  padding: .65rem .9rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

/* line 493, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__review {
  border: 1px solid rgba(22, 22, 22, 0.13);
  background: #fff;
  color: rgba(22, 22, 22, 0.7);
}

/* line 498, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__review:hover, .consent-upsell-banner__review:focus-visible {
  border-color: rgba(15, 104, 211, 0.3);
  color: #0f68d3;
  outline: none;
}

/* line 506, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__button {
  border: 0;
  background: #0f68d3;
  color: #fff;
}

/* line 511, app/assets/stylesheets/partials/_feature-gate.scss */
.consent-upsell-banner__button:hover, .consent-upsell-banner__button:focus-visible {
  background: #0d58b2;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.16);
  outline: none;
}

@media only screen and (max-width: 64rem) {
  /* line 521, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* line 524, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media only screen and (max-width: 30rem) {
  /* line 532, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner {
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .7rem;
    padding: .85rem;
  }
  /* line 537, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner__icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  /* line 542, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner__copy strong {
    font-size: .94rem;
  }
  /* line 546, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner__copy span {
    font-size: .76rem;
  }
  /* line 550, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  /* line 555, app/assets/stylesheets/partials/_feature-gate.scss */
  .consent-upsell-banner__review, .consent-upsell-banner__button {
    width: 100%;
  }
}

/* line 1, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 12, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate[hidden] {
  display: none;
}

/* line 16, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__dialog {
  position: relative;
  width: 100%;
  max-width: 29rem;
  padding: 2.15rem 1.85rem 1.75rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  margin: auto;
  text-align: center;
}

/* line 22, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__close {
  position: absolute;
  right: .85rem;
  top: .75rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-gate__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-gate__close:hover, .premium-gate__close:focus-visible, .premium-gate__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-gate__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 29, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__icon {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 104, 211, 0.16);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95), transparent 1.1rem), rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  box-shadow: 0 0.85rem 1.8rem rgba(15, 104, 211, 0.13);
}

/* line 43, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

/* line 49, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* line 54, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__title {
  margin: 0;
  color: #161616;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 58, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__message {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  max-width: 23rem;
  margin: .8rem auto 1.35rem;
  font-size: .94rem;
}

/* line 65, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__actions {
  display: grid;
  gap: .65rem;
  justify-items: center;
}

/* line 71, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  width: 100%;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-gate__primary:hover, .premium-gate__primary:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 75, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__primary:hover, .premium-gate__primary:focus-visible, .premium-gate__primary:active {
  color: #fff;
  text-decoration: none;
}

/* line 83, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__text-link {
  display: inline-flex;
  justify-content: center;
  padding: .25rem .35rem;
  color: rgba(22, 22, 22, 0.68);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  transition: color 150ms ease;
}

/* line 94, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate__text-link:hover, .premium-gate__text-link:focus-visible {
  color: #0f68d3;
  outline: none;
  text-decoration: none;
}

/* line 103, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-open {
  overflow: hidden;
}

/* line 107, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-tooltip {
  position: fixed;
  z-index: 10040;
  display: grid;
  box-sizing: border-box;
  gap: .18rem;
  min-width: 11.5rem;
  max-width: 15rem;
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  padding: .58rem .68rem;
  border-radius: .55rem;
  background: #111827;
  color: #fff;
  box-shadow: 0 0.55rem 1.4rem rgba(22, 22, 22, 0.22);
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateY(0.2rem) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease;
}

/* line 128, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-tooltip[hidden] {
  display: none;
}

/* line 132, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* line 137, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-tooltip strong {
  display: flex;
  gap: .4rem;
  align-items: baseline;
  flex-wrap: nowrap;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

/* line 149, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-tooltip em {
  color: rgba(255, 255, 255, 0.66);
  font-size: .61rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 158, app/assets/stylesheets/partials/_premium-gate.scss */
.premium-gate-tooltip small {
  color: rgba(255, 255, 255, 0.78);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.32;
  overflow-wrap: break-word;
}

@media (max-width: 16.5rem) {
  /* line 107, app/assets/stylesheets/partials/_premium-gate.scss */
  .premium-gate-tooltip {
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
  }
}

/* line 3, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* line 16, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal[hidden] {
  display: none;
}

/* line 20, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal.is-open {
  opacity: 1;
}

/* line 24, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 64rem;
  padding: 0;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 42rem;
  max-height: calc(100dvh - 2.5rem);
  overflow: hidden;
  transform: translateY(0.35rem) scale(0.985);
  transition: transform 180ms ease;
}

/* line 37, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal.is-open .settings-modal__dialog {
  transform: translateY(0) scale(1);
}

/* line 41, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.45rem 1.55rem 1.2rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.09);
}

/* line 50, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__heading {
  display: grid;
  gap: .22rem;
  min-width: 0;
}

/* line 56, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__autosave-status-slot {
  display: flex;
  align-items: center;
  min-height: 1.1rem;
  margin-top: .08rem;
}

/* line 63, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__autosave-status {
  color: rgba(22, 22, 22, 0.55);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.35;
}

/* line 69, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__autosave-status[data-state='saving'] {
  color: rgba(15, 104, 211, 0.9);
}

/* line 73, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__autosave-status[data-state='saved'] {
  color: #0f8f64;
}

/* line 77, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__autosave-status[data-state='error'] {
  color: #b42318;
}

/* line 81, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__autosave-status[hidden] {
  display: block;
  visibility: hidden;
}

/* line 87, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 91, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__title {
  margin: 0;
  color: #161616;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 95, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__subtitle {
  max-width: 38rem;
  margin: .18rem 0 0;
  color: rgba(22, 22, 22, 0.62);
  font-size: .86rem;
  line-height: 1.45;
}

/* line 103, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  flex: 0 0 auto;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.settings-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.settings-modal__close:hover, .settings-modal__close:focus-visible, .settings-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.settings-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 107, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* line 113, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  flex: 1 1 0;
}

/* line 121, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* line 128, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__status-area {
  flex: 0 0 auto;
  min-height: 0;
}

/* line 133, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tabs {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  padding: .85rem .75rem;
  border-right: 1px solid rgba(22, 22, 22, 0.08);
  background: rgba(255, 255, 255, 0.42);
}

/* line 145, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab {
  position: relative;
  display: grid;
  align-content: center;
  gap: .22rem;
  width: 100%;
  min-height: 4.6rem;
  padding: .72rem .75rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(22, 22, 22, 0.62);
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

/* line 161, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab:hover, .settings-modal__tab:focus-visible {
  border-color: rgba(15, 104, 211, 0.22);
  background: rgba(15, 104, 211, 0.035);
  color: #161616;
  outline: none;
}

/* line 169, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab:focus-visible {
  box-shadow: 0 0 0 2px rgba(15, 104, 211, 0.16);
}

/* line 173, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab[aria-selected='true'] {
  border-color: rgba(15, 104, 211, 0.22);
  background: rgba(15, 104, 211, 0.06);
  color: #161616;
}

/* line 178, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab[aria-selected='true']::before {
  position: absolute;
  inset: 1px auto 1px 0;
  width: 2px;
  border-radius: 0 999px 999px 0;
  background: rgba(15, 104, 211, 0.72);
  content: '';
}

/* line 189, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab-label {
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 195, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab-description {
  color: rgba(22, 22, 22, 0.5);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}

/* line 202, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__tab[aria-selected='true'] .settings-modal__tab-description {
  color: rgba(22, 22, 22, 0.58);
}

/* line 206, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__content {
  position: relative;
  min-width: 0;
  min-height: 25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.35rem 1.5rem;
  flex: 1 1 auto;
}

/* line 216, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__loading, .settings-modal__load-error {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  min-height: 24rem;
  color: rgba(22, 22, 22, 0.62);
  text-align: center;
}

/* line 226, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__loading[hidden], .settings-modal__load-error[hidden] {
  display: none;
}

/* line 230, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__loading p, .settings-modal__load-error p {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
}

/* line 237, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid rgba(15, 104, 211, 0.18);
  border-top-color: #0f68d3;
  border-radius: 50%;
  animation: settings-modal-spin .75s linear infinite;
}

/* line 246, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__load-error {
  color: #9b174c;
}

/* line 249, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__load-error p {
  max-width: 22rem;
}

/* line 254, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__panel {
  display: grid;
  gap: 1rem;
}

/* line 258, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__panel[hidden] {
  display: none;
}

/* line 263, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__panel-heading {
  display: grid;
  gap: .25rem;
  margin: .1rem .1rem .2rem;
}

/* line 269, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__panel-title {
  margin: 0;
  color: #161616;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 900;
  line-height: 1.15;
}

/* line 277, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__panel-copy {
  max-width: 42rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.62);
  font-size: .86rem;
  line-height: 1.5;
}

/* line 285, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__card {
  display: grid;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: .75rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 295, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__card-heading {
  display: grid;
  gap: .2rem;
}

/* line 299, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__card-heading h4,
.settings-modal__card-heading p {
  margin: 0;
}

/* line 304, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__card-heading h4 {
  color: #161616;
  font-size: .98rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 311, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__card-heading p {
  color: rgba(22, 22, 22, 0.6);
  font-size: .8rem;
  line-height: 1.4;
}

/* line 318, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__identity-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
}

/* line 324, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__avatar {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  overflow: hidden;
  border: 3px solid rgba(15, 104, 211, 0.12);
  border-radius: 1rem;
  background: rgba(15, 104, 211, 0.06);
}

/* line 334, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 341, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__identity-copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

/* line 346, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__identity-copy strong {
  overflow: hidden;
  color: #161616;
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 355, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__identity-copy > span {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.55);
  font-size: .82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 365, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__sync-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #0f8f64;
  font-size: .73rem;
  font-weight: 800;
}

/* line 374, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__status-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #13b981;
}

/* line 381, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__form-card {
  gap: 1rem;
}

/* line 385, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__field-header {
  display: grid;
  gap: .18rem;
}

/* line 390, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__field-label {
  color: rgba(22, 22, 22, 0.78);
  font-size: .82rem;
  font-weight: 900;
}

/* line 396, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__field-hint {
  margin: 0;
  color: rgba(22, 22, 22, 0.55);
  font-size: .78rem;
  line-height: 1.35;
}

/* line 403, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__form-card trix-editor {
  min-height: 8rem;
  padding: .75rem .8rem;
  border: 1px solid rgba(22, 22, 22, 0.16);
  border-radius: .6rem;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 411, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__form-card trix-editor:focus {
  border-color: rgba(15, 104, 211, 0.72);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.12);
}

/* line 418, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__form-feedback {
  padding: .65rem .75rem;
  border: 1px solid rgba(236, 72, 153, 0.18);
  border-radius: .55rem;
  background: rgba(236, 72, 153, 0.08);
  color: #9b174c;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.35;
}

/* line 428, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__form-feedback[hidden] {
  display: none;
}

/* line 433, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connections {
  display: grid;
  gap: .6rem;
}

/* line 438, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: .65rem;
  background: rgba(22, 22, 22, 0.025);
}

/* line 449, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .65rem;
  background: rgba(22, 22, 22, 0.07);
}

/* line 457, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-icon img {
  width: 1.35rem;
  height: 1.35rem;
}

/* line 463, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}

/* line 468, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-copy strong {
  color: #161616;
  font-size: .9rem;
  font-weight: 900;
}

/* line 474, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-copy span {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.56);
  font-size: .78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 484, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .4rem;
}

/* line 492, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-status, .settings-modal__connection-note {
  color: #0f8f64;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
}

/* line 500, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connection-note {
  color: rgba(22, 22, 22, 0.45);
}

/* line 504, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__inline-form {
  margin: 0;
}

/* line 508, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connect, .settings-modal__disconnect {
  min-height: 2.1rem;
  padding: .45rem .7rem;
  border: 0;
  border-radius: .5rem;
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
}

/* line 519, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connect {
  color: #fff;
}

/* line 522, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connect--discord {
  background: #5865F2;
}

/* line 523, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__connect--twitch {
  background: #6441a5;
}

/* line 526, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__disconnect {
  background: rgba(22, 22, 22, 0.08);
  color: rgba(22, 22, 22, 0.7);
}

/* line 531, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1rem;
}

/* line 537, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__detail {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

/* line 542, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__detail dt {
  color: rgba(22, 22, 22, 0.48);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* line 550, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__detail dd {
  overflow: hidden;
  margin: 0;
  color: #161616;
  font-size: .82rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 561, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__danger-zone {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(255, 255, 255, 0.84);
}

/* line 566, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__danger-eyebrow {
  color: #b42318 !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* line 574, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__danger-form {
  margin: 0;
}

/* line 577, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__danger-form .button {
  min-height: 2.5rem;
  border: 0;
  border-radius: .55rem;
  background: #b42318;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

/* line 586, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__danger-form .button:hover, .settings-modal__danger-form .button:focus-visible {
  background: #912018;
  outline: none;
}

/* line 594, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
}

/* line 600, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .75rem;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

/* line 609, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* line 615, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-copy {
  display: grid;
  gap: .18rem;
}

/* line 619, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-copy h4,
.settings-modal__security-copy p {
  margin: 0;
}

/* line 622, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-copy h4 {
  color: #161616;
  font-size: .9rem;
  font-weight: 900;
}

/* line 623, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__security-copy p {
  color: rgba(22, 22, 22, 0.6);
  font-size: .78rem;
  line-height: 1.4;
}

/* line 626, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__setting-list {
  display: grid;
  gap: .55rem;
}

/* line 631, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .75rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: .6rem;
  background: rgba(22, 22, 22, 0.02);
}

/* line 642, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__setting-copy {
  display: grid;
  gap: .18rem;
}

/* line 646, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__setting-copy label {
  color: #161616;
  font-size: .86rem;
  font-weight: 900;
  cursor: pointer;
}

/* line 653, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal__setting-copy span {
  color: rgba(22, 22, 22, 0.56);
  font-size: .76rem;
  line-height: 1.35;
}

/* line 660, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal input.settings-modal__checkbox {
  position: relative;
  width: 2.8rem;
  height: 1.6rem;
  min-width: 2.8rem;
  min-height: 1.6rem;
  max-width: none;
  max-height: none;
  margin: 0;
  appearance: none;
  transform: none;
  display: block;
  border: 1px solid rgba(22, 22, 22, 0.2);
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.12);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* line 678, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal input.settings-modal__checkbox::after {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.16);
  content: '';
  transition: transform 160ms ease;
}

/* line 691, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal input.settings-modal__checkbox::before {
  display: none;
  content: none;
}

/* line 696, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal input.settings-modal__checkbox:checked {
  border-color: #0f68d3;
  background: #0f68d3;
}

/* line 700, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal input.settings-modal__checkbox:checked::after {
  transform: translateX(1.2rem);
}

/* line 703, app/assets/stylesheets/partials/_settings-modal.scss */
.settings-modal input.settings-modal__checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.16);
}

/* line 710, app/assets/stylesheets/partials/_settings-modal.scss */
body.settings-modal-open {
  overflow: hidden;
}

/* line 714, app/assets/stylesheets/partials/_settings-modal.scss */
body.settings-modal-open .notifications {
  z-index: 9900;
}

@keyframes settings-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 44rem) {
  /* line 724, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  /* line 730, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__tabs {
    flex-direction: row;
    height: auto;
    min-height: 3.45rem;
    flex: 0 0 auto;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: 0;
    padding: .5rem .8rem .6rem;
    border-right: 0;
    border-bottom: 1px solid rgba(22, 22, 22, 0.08);
    background: transparent;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .8rem;
    -webkit-overflow-scrolling: touch;
  }
  /* line 749, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__tabs::-webkit-scrollbar {
    display: none;
  }
  /* line 752, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__tab {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 2.35rem;
    align-content: initial;
    padding: .5rem .7rem;
    font-size: .8rem;
    scroll-snap-align: start;
  }
  /* line 762, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__tab[aria-selected='true']::before {
    inset: auto .7rem 0;
    width: auto;
    height: 2px;
  }
  /* line 768, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__tab[aria-selected='true'] {
    border-color: transparent;
    background: rgba(15, 104, 211, 0.035);
  }
  /* line 774, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__tab-description {
    display: none;
  }
  /* line 776, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__content {
    min-height: 0;
    padding: 1rem .8rem 1.2rem;
  }
  /* line 781, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__details {
    grid-template-columns: 1fr;
  }
  /* line 783, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__connection {
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* line 787, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__connection-action {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 32rem) {
  /* line 795, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal {
    align-items: end;
    padding: 0;
  }
  /* line 799, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__dialog {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: .9rem .9rem 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* line 806, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal__header {
    padding: 1rem 1rem .85rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 815, app/assets/stylesheets/partials/_settings-modal.scss */
  .settings-modal,
.settings-modal__dialog,
.settings-modal__tab,
.settings-modal input.settings-modal__checkbox,
.settings-modal input.settings-modal__checkbox::after {
    animation: none;
    transition: none;
  }
}

/* line 1, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 180ms ease;
}

/* line 14, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings[hidden] {
  display: none;
}

/* line 18, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings.is-open {
  opacity: 1;
}

/* line 22, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__dialog {
  position: relative;
  width: 100%;
  max-width: 39rem;
  padding: 1.2rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  display: grid;
  gap: 1.05rem;
  margin: auto;
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  transform: translateY(0.35rem) scale(0.985);
  transition: transform 180ms ease;
}

/* line 33, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings.is-open .premium-settings__dialog {
  transform: translateY(0) scale(1);
}

/* line 37, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__topbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: .15rem .15rem 0;
}

/* line 45, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__heading {
  display: grid;
  gap: .18rem;
  min-width: 0;
}

/* line 51, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 55, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__title {
  margin: 0;
  color: #161616;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 59, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  flex: 0 0 auto;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-settings__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-settings__close:hover, .premium-settings__close:focus-visible, .premium-settings__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.premium-settings__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 63, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* line 69, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section {
  display: grid;
  gap: .95rem;
  padding: 1.05rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 81, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-head {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: .78rem;
  align-items: center;
}

/* line 88, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: rgba(88, 101, 242, 0.1);
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.13), 0 0.45rem 1rem rgba(88, 101, 242, 0.08);
}

/* line 99, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-mark img {
  width: 1.72rem;
  height: 1.72rem;
  object-fit: contain;
}

/* line 106, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-mark--twitch {
  background: rgba(100, 65, 165, 0.1);
  box-shadow: inset 0 0 0 1px rgba(100, 65, 165, 0.13), 0 0.45rem 1rem rgba(100, 65, 165, 0.08);
}

/* line 113, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-mark--subscription {
  background: rgba(19, 185, 129, 0.1);
  color: #0f8f64;
  box-shadow: inset 0 0 0 1px rgba(19, 185, 129, 0.13), 0 0.45rem 1rem rgba(19, 185, 129, 0.08);
}

/* line 120, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-mark--subscription svg {
  width: 1.7rem;
  height: 1.7rem;
}

/* line 126, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__subscription-details {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

/* line 132, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__subscription-detail {
  display: grid;
  gap: .18rem;
  min-width: 9.5rem;
  padding: .7rem .78rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 7px;
  background: rgba(22, 22, 22, 0.025);
}

/* line 141, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__subscription-detail span {
  color: rgba(22, 22, 22, 0.58);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}

/* line 148, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__subscription-detail strong,
.premium-settings__subscription-detail time {
  color: #161616;
  font-size: .85rem;
  font-weight: 900;
  line-height: 1.25;
}

/* line 157, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__subscription-message {
  margin: 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: .84rem;
  line-height: 1.4;
}

/* line 164, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__subscription-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

/* line 170, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-copy {
  display: grid;
  gap: .22rem;
  min-width: 0;
}

/* line 175, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-copy h4 {
  margin: 0;
  color: #161616;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.16;
}

/* line 184, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__section-copy p {
  margin: 0;
  color: rgba(22, 22, 22, 0.62);
  font-size: .86rem;
  line-height: 1.4;
}

/* line 192, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 2rem;
  padding: .42rem .68rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: rgba(22, 22, 22, 0.66);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

/* line 207, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__status::before {
  content: '';
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .72;
}

/* line 216, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__status--active {
  background: rgba(19, 185, 129, 0.12);
  color: #0f8f64;
}

/* line 222, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__error {
  padding: .78rem .85rem;
  border: 1px solid rgba(236, 72, 153, 0.18);
  border-radius: 8px;
  background: rgba(236, 72, 153, 0.08);
  color: #a0144d;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.35;
}

/* line 233, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview {
  display: grid;
  grid-template-columns: 7.6rem minmax(0, 1fr);
  gap: .85rem;
  align-items: stretch;
  min-width: 0;
  padding: .7rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 8px;
  background: #fff;
}

/* line 244, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview[hidden] {
  display: none;
}

/* line 249, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 5.9rem;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(22, 22, 22, 0.96), rgba(88, 101, 242, 0.78));
}

/* line 261, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 267, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-icon-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

/* line 274, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-media--banner .premium-settings__preview-icon-wrap {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  width: 2.9rem;
  height: 2.9rem;
}

/* line 282, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-icon {
  display: block;
  width: 3.8rem;
  height: 3.8rem;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: .95rem;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0.75rem 1.55rem rgba(0, 0, 0, 0.24);
  object-fit: cover;
}

/* line 293, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-media--banner .premium-settings__preview-icon {
  width: 2.65rem;
  height: 2.65rem;
  border-width: 2px;
  border-radius: .72rem;
  box-shadow: 0 0.65rem 1.2rem rgba(0, 0, 0, 0.26);
}

/* line 301, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-icon-wrap--round, .premium-settings__preview-icon--round {
  border-radius: 50%;
}

/* line 306, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-copy {
  display: grid;
  align-content: center;
  gap: .24rem;
  min-width: 0;
}

/* line 312, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-copy strong {
  overflow: hidden;
  color: #161616;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 322, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-copy span:not(.premium-settings__preview-kicker) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(22, 22, 22, 0.64);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
}

/* line 334, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__preview-kicker {
  color: rgba(15, 104, 211, 0.76);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

/* line 342, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__form, .premium-settings__language-form, .premium-settings__locked {
  display: grid;
  gap: .7rem;
}

/* line 349, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__form[hidden], .premium-settings__language-form[hidden] {
  display: none;
}

/* line 354, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-width: 0;
  padding: .85rem;
  border: 1px solid rgba(100, 65, 165, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

/* line 366, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__toggle-copy {
  display: grid;
  gap: .22rem;
  min-width: 0;
}

/* line 371, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__toggle-copy strong {
  overflow: hidden;
  color: #161616;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 381, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__toggle-copy span {
  color: rgba(22, 22, 22, 0.6);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 389, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__field {
  display: grid;
  gap: .48rem;
}

/* line 394, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__label {
  color: rgba(22, 22, 22, 0.74);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.25;
}

/* line 401, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  min-width: 0;
}

/* line 409, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__input-row {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(22, 22, 22, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0.45rem 1rem rgba(15, 23, 42, 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* line 424, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__input-row:focus-within {
  border-color: rgba(15, 104, 211, 0.72);
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.12), 0 0.55rem 1.1rem rgba(15, 104, 211, 0.08);
}

/* line 432, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__input-icon {
  justify-self: center;
  width: 1.22rem;
  height: 1.22rem;
  color: rgba(22, 22, 22, 0.42);
  pointer-events: none;
}

/* line 440, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__input {
  min-width: 0;
  width: 100%;
  min-height: 2.9rem;
  padding: .76rem .86rem .76rem 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: #161616;
  box-shadow: none;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
}

/* line 454, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__input::placeholder {
  color: rgba(22, 22, 22, 0.34);
  font-weight: 600;
}

/* line 459, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__input:focus {
  outline: none;
  box-shadow: none;
}

/* line 465, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__hint {
  margin: -.08rem 0 0;
  color: rgba(22, 22, 22, 0.56);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 473, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings form.premium-settings__form input.premium-settings__input[type="text"] {
  padding: .76rem .86rem .76rem 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  box-shadow: none;
}

/* line 481, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__language-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

/* line 488, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__language-select {
  width: 100%;
}

/* line 492, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .promotion-language-select__item,
.premium-settings .promotion-language-select__option {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: .42rem;
}

/* line 500, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .promotion-language-select__option {
  width: 100%;
}

/* line 504, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .promotion-language-select__flag {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

/* line 510, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .promotion-language-select__label {
  overflow: hidden;
  min-width: 0;
  color: #161616;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 519, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .promotion-language-select__native {
  overflow: hidden;
  min-width: 0;
  color: rgba(22, 22, 22, 0.52);
  font-size: .78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 529, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select {
  min-width: 0;
}

/* line 533, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select::before,
.premium-settings .ts-wrapper.premium-settings__language-select::after {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* line 544, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select::before {
  content: '';
  right: .72rem;
  top: 50%;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  background: #13b981;
  box-shadow: 0 0.42rem 0.85rem rgba(19, 185, 129, 0.28);
  transform: translateY(-50%) scale(0.82);
}

/* line 556, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select::after {
  content: '';
  right: 1.17rem;
  top: 50%;
  width: .42rem;
  height: .24rem;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: translateY(-62%) rotate(-45deg) scale(0.82);
}

/* line 567, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select.is-save-confirmed::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* line 572, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select.is-save-confirmed::after {
  opacity: 1;
  transform: translateY(-62%) rotate(-45deg) scale(1);
}

/* line 577, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select .ts-control {
  min-height: 2.9rem;
  padding: .54rem 2.45rem .54rem .74rem;
  border-color: rgba(22, 22, 22, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0.45rem 1rem rgba(15, 23, 42, 0.04);
}

/* line 588, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select.focus .ts-control {
  border-color: rgba(15, 104, 211, 0.72);
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.12), 0 0.55rem 1.1rem rgba(15, 104, 211, 0.08);
}

/* line 595, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select .ts-dropdown {
  overflow: hidden;
  border-color: rgba(22, 22, 22, 0.12);
  border-radius: 8px;
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.14);
}

/* line 602, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select .option {
  padding: .58rem .72rem;
}

/* line 606, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings .ts-wrapper.premium-settings__language-select .active {
  background: rgba(15, 104, 211, 0.08);
}

/* line 610, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__primary, .premium-settings__secondary {
  min-height: 2.75rem;
  font-size: .86rem;
}

/* line 616, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__remove {
  justify-self: start;
  min-height: 2.28rem;
  margin-top: .28rem;
  padding: .56rem .74rem;
  font-size: .78rem;
}

/* line 624, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__locked {
  padding: .85rem;
  border: 1px dashed rgba(15, 104, 211, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

/* line 630, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__locked p {
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: .88rem;
  line-height: 1.4;
}

/* line 638, app/assets/stylesheets/partials/_premium-settings.scss */
.premium-settings__connect-form {
  display: inline-flex;
}

/* line 643, app/assets/stylesheets/partials/_premium-settings.scss */
.settings-modal__premium-settings.premium-settings {
  position: static;
  inset: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
  align-items: initial;
  justify-content: initial;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  opacity: 1;
  transform: none;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* line 666, app/assets/stylesheets/partials/_premium-settings.scss */
body.premium-settings-open {
  overflow: hidden;
}

@media screen and (max-width: 32rem) {
  /* line 671, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings {
    align-items: end;
    padding: 0;
  }
  /* line 675, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__dialog {
    max-height: calc(100vh - .75rem);
    border-radius: 8px 8px 0 0;
  }
  /* line 680, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__section-head {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
  /* line 684, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__status {
    grid-column: 1 / -1;
    justify-self: start;
  }
  /* line 689, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__preview {
    grid-template-columns: 1fr;
  }
  /* line 693, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__preview-media {
    min-height: 8.5rem;
  }
  /* line 697, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__control {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem;
  }
  /* line 702, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__control .premium-settings__primary {
    min-width: 4.7rem;
    padding-inline: .85rem;
  }
  /* line 707, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__locked .premium-settings__primary, .premium-settings__secondary:not(.premium-settings__remove) {
    width: 100%;
  }
  /* line 712, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__toggle-row {
    grid-template-columns: 1fr;
  }
  /* line 716, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__connect-form {
    display: grid;
  }
  /* line 720, app/assets/stylesheets/partials/_premium-settings.scss */
  .premium-settings__language-control {
    grid-template-columns: 1fr;
  }
}

/* line 1, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 220ms ease;
}

/* line 15, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention[hidden] {
  display: none;
}

/* line 19, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* line 25, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 48rem;
  padding: 0;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  border-color: rgba(15, 104, 211, 0.32);
  background: #fff;
  opacity: 0;
  transform: translateY(1rem) scale(0.975);
  transition: opacity 220ms ease, transform 280ms cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

/* line 41, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention.is-open .premium-cancellation-retention__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* line 47, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__hero {
  position: relative;
  overflow: hidden;
  padding: 1.55rem 1.9rem 1.45rem;
  background: radial-gradient(circle at 85% 5%, rgba(112, 184, 255, 0.36), transparent 17rem), radial-gradient(circle at 10% 110%, rgba(19, 185, 129, 0.22), transparent 17rem), linear-gradient(135deg, #0b3473 0%, #0f68d3 58%, #0d5bbb 100%);
  color: #fff;
}

/* line 57, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__hero::after {
  position: absolute;
  right: -3.5rem;
  bottom: -6.5rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 2.7rem rgba(255, 255, 255, 0.035), 0 0 0 5.4rem rgba(255, 255, 255, 0.025);
  content: '';
  pointer-events: none;
}

/* line 73, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__status {
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(7, 28, 60, 0.24);
  color: rgba(255, 255, 255, 0.9);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 92, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__status svg {
  width: .9rem;
  height: .9rem;
}

/* line 98, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 .4rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: .71rem;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 110, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__title {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.05;
}

/* line 122, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__lead {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: .55rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: .94rem;
  line-height: 1.42;
}

/* line 131, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__lead time {
  color: #fff;
  font-weight: 900;
}

/* line 137, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__body {
  display: grid;
  gap: .9rem;
  overflow-y: auto;
  padding: 1.05rem 1.35rem;
  background: linear-gradient(rgba(15, 104, 211, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.025) 1px, transparent 1px), linear-gradient(180deg, #fff, #f8fbff);
  background-size: 3.5rem 3.5rem, 3.5rem 3.5rem, auto;
}

/* line 148, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__body:focus-visible {
  outline: 3px solid rgba(15, 104, 211, 0.3);
  outline-offset: -3px;
}

/* line 154, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__impact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: .8rem .9rem;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: .85rem;
  background: radial-gradient(circle at 100% 0, rgba(15, 104, 211, 0.13), transparent 13rem), linear-gradient(135deg, rgba(237, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 168, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__impact-copy {
  min-width: 0;
}

/* line 171, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__impact-copy h3 {
  margin: .18rem 0 .25rem;
  color: #161616;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 179, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__impact-copy p {
  max-width: 31rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.64);
  font-size: .82rem;
  line-height: 1.35;
}

/* line 188, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__impact-kicker {
  color: #0f68d3;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* line 196, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(6.4rem, 1fr));
  gap: .55rem;
}

/* line 202, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__stat {
  display: grid;
  gap: .18rem;
  min-width: 0;
  padding: .75rem .8rem;
  border: 1px solid rgba(15, 104, 211, 0.13);
  border-radius: .7rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.055);
}

/* line 212, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__stat strong {
  overflow: hidden;
  color: #0f68d3;
  font-size: 1.28rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  text-overflow: ellipsis;
}

/* line 222, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__stat span {
  color: rgba(22, 22, 22, 0.58);
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

/* line 231, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefits {
  display: grid;
  gap: .55rem;
}

/* line 236, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__section-heading {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

/* line 241, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__section-heading span {
  color: #0f68d3;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* line 249, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__section-heading h3 {
  margin: 0;
  color: #161616;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 258, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 267, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: .55rem;
  min-width: 0;
  padding: .7rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: .78rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.55rem 1.2rem rgba(15, 23, 42, 0.05);
}

/* line 280, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .7rem;
  background: rgba(15, 104, 211, 0.09);
  color: #0f68d3;
}

/* line 289, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 294, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-icon--promotion, .premium-cancellation-retention__benefit-icon--discord {
  background: rgba(88, 101, 242, 0.1);
  color: #5865F2;
}

/* line 300, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-icon--maker {
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.12), rgba(19, 185, 129, 0.13));
  color: #0d73c9;
}

/* line 306, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-copy {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

/* line 311, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-copy strong {
  color: #161616;
  font-size: .84rem;
  font-weight: 900;
  line-height: 1.25;
}

/* line 318, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__benefit-copy span {
  color: rgba(22, 22, 22, 0.6);
  font-size: .73rem;
  line-height: 1.4;
}

/* line 325, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__growth-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(19, 185, 129, 0.2);
  border-radius: .78rem;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.96), rgba(247, 255, 252, 0.98));
}

/* line 336, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__growth-mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: #fff;
  color: #0b9b69;
  box-shadow: 0 0.45rem 1rem rgba(19, 185, 129, 0.14);
}

/* line 346, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__growth-mark svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* line 352, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__growth-copy {
  display: grid;
  gap: .2rem;
}

/* line 356, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__growth-copy strong {
  color: #096849;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.25;
}

/* line 363, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__growth-copy span {
  color: rgba(7, 90, 64, 0.74);
  font-size: .75rem;
  line-height: 1.42;
}

/* line 370, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: .65rem;
}

/* line 376, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__footer {
  position: relative;
  z-index: 2;
  padding: .65rem 1.35rem .7rem;
  border-top: 1px solid rgba(15, 104, 211, 0.12);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -0.7rem 1.6rem rgba(15, 23, 42, 0.07);
}

/* line 385, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__keep-form {
  margin: 0;
}

/* line 389, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__keep,
.premium-cancellation-retention__leave {
  width: 100%;
  min-height: 2.85rem;
}

/* line 395, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__keep {
  --button-shadow: 0 .8rem 1.65rem rgba($primary-color, .28);
  --button-shadow-hover: 0 1rem 2rem rgba($primary-color, .34);
  font-size: .94rem;
}

/* line 400, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__keep svg {
  transition: transform 160ms ease;
}

/* line 404, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__keep:hover svg, .premium-cancellation-retention__keep:focus-visible svg {
  transform: translateX(0.2rem);
}

/* line 410, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__leave {
  color: rgba(22, 22, 22, 0.7);
  font-size: .84rem;
}

/* line 415, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__billing-note {
  grid-column: 1 / -1;
  margin: -.05rem 0 0;
  color: rgba(22, 22, 22, 0.48);
  font-size: .69rem;
  line-height: 1.35;
  text-align: center;
}

/* line 423, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
.premium-cancellation-retention__billing-note time {
  color: rgba(22, 22, 22, 0.66);
  font-weight: 800;
}

/* line 429, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
body.premium-cancellation-retention-open {
  overflow: hidden;
}

@media only screen and (max-width: 44rem) {
  /* line 434, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention {
    align-items: flex-end;
    padding: 0;
  }
  /* line 439, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__dialog {
    max-height: 94dvh;
    margin: auto 0 0;
    border-radius: 1.15rem 1.15rem 0 0;
    transform: translateY(2rem);
  }
  /* line 446, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__hero {
    padding: 1.4rem 1.1rem 1.2rem;
  }
  /* line 450, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__status {
    position: relative;
    top: auto;
    right: auto;
    width: max-content;
    margin-bottom: .6rem;
  }
  /* line 458, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__body {
    gap: .8rem;
    padding: .9rem .85rem;
  }
  /* line 463, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__impact {
    grid-template-columns: 1fr;
  }
  /* line 467, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__benefit-list {
    grid-template-columns: 1fr;
  }
  /* line 471, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__benefit {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    padding: .65rem;
  }
  /* line 476, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__benefit-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  /* line 481, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__actions {
    grid-template-columns: 1fr;
  }
  /* line 485, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__footer {
    padding: 0.65rem 0.85rem calc(.65rem + env(safe-area-inset-bottom));
  }
}

@media only screen and (max-width: 28rem) {
  /* line 491, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__stats {
    grid-template-columns: 1fr;
  }
  /* line 495, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__section-heading {
    display: grid;
    gap: .25rem;
  }
  /* line 500, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__growth-note {
    align-items: start;
  }
}

@media (max-height: 40rem) {
  /* line 506, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__dialog {
    display: block;
    overflow-y: auto;
  }
  /* line 511, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__body {
    overflow: visible;
  }
  /* line 515, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention__footer {
    position: sticky;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 522, app/assets/stylesheets/partials/_premium-cancellation-retention.scss */
  .premium-cancellation-retention,
.premium-cancellation-retention__dialog,
.premium-cancellation-retention__keep svg {
    transition: none;
  }
}

/* line 2, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* line 12, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__modal[hidden] {
  display: none;
}

/* line 17, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__dialog {
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: 1.5rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
}

/* line 21, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

/* line 29, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__copy {
  display: flex;
  flex-flow: column;
  gap: 0.4rem;
}

/* line 35, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 39, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__title {
  margin: 0;
  color: #161616;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

/* line 43, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__text {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
}

/* line 47, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.emote-report__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.emote-report__close:hover, .emote-report__close:focus-visible, .emote-report__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.emote-report__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 51, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__form {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

/* line 57, app/assets/stylesheets/partials/_emote-report.scss */
.emote-report__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (max-width: 640px) {
  /* line 67, app/assets/stylesheets/partials/_emote-report.scss */
  .emote-report__dialog {
    padding: 1.1rem;
  }
  /* line 71, app/assets/stylesheets/partials/_emote-report.scss */
  .emote-report__actions {
    flex-flow: column-reverse;
  }
  /* line 75, app/assets/stylesheets/partials/_emote-report.scss */
  .emote-report__actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* line 1, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 0 4rem;
  color: rgba(22, 22, 22, 0.86);
  font-size: 1rem;
  line-height: 1.7;
}

/* line 10, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-page__title {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: #161616;
  letter-spacing: -0.01em;
}

/* line 19, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-page__meta {
  margin: 0 0 2.5rem;
  font-size: 0.875rem;
  color: rgba(22, 22, 22, 0.55);
}

/* line 25, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-page__lead {
  margin: 0 0 2.5rem;
  font-size: 1.0625rem;
  color: rgba(22, 22, 22, 0.7);
}

/* line 31, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-page__lead p + p {
  margin-top: 0.75rem;
}

/* line 35, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-page__notice {
  margin: 0 0 2rem;
  padding: 0.85rem 1rem;
  background: rgba(244, 180, 0, 0.08);
  border-left: 3px solid rgba(201, 134, 0, 0.55);
  font-size: 0.9375rem;
  color: rgba(22, 22, 22, 0.78);
}

/* line 44, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section {
  padding: 1.75rem 0 0;
  margin-top: 1.75rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 50, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* line 56, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #161616;
  letter-spacing: -0.005em;
}

/* line 64, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section p,
.legal-section li,
.legal-section dd,
.legal-section dt {
  font-size: 1rem;
  line-height: 1.7;
}

/* line 72, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section p + p,
.legal-section p + ul,
.legal-section ul + p,
.legal-section p + dl,
.legal-section dl + p {
  margin-top: 0.75rem;
}

/* line 80, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section ul {
  list-style: disc;
  padding-left: 1.25rem;
}

/* line 85, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section li + li {
  margin-top: 0.35rem;
}

/* line 89, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section a,
.legal-page__lead a {
  color: #0f68d3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* line 96, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-section a:hover,
.legal-page__lead a:hover {
  text-decoration: none;
}

/* line 101, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-definition-list {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.5rem 1.25rem;
  margin: 0;
}

/* line 108, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-definition-list dt {
  font-weight: 600;
  color: rgba(22, 22, 22, 0.6);
}

/* line 113, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-definition-list dd {
  margin: 0;
  color: #161616;
}

/* line 118, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-cookie-table {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* line 125, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-cookie-table th,
.legal-cookie-table td {
  padding: 0.75rem 0.85rem 0.75rem 0;
  border-bottom: 1px solid rgba(22, 22, 22, 0.08);
  vertical-align: top;
  text-align: left;
}

/* line 133, app/assets/stylesheets/partials/_legal-pages.scss */
.legal-cookie-table th {
  font-weight: 600;
  color: rgba(22, 22, 22, 0.6);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-color: rgba(22, 22, 22, 0.18);
}

@media only screen and (max-width: 40em) {
  /* line 143, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-page__title {
    font-size: 1.625rem;
  }
  /* line 147, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-definition-list {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
  /* line 152, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-definition-list dd + dt {
    margin-top: 0.5rem;
  }
  /* line 156, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-cookie-table thead {
    display: none;
  }
  /* line 160, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-cookie-table,
.legal-cookie-table tbody,
.legal-cookie-table tr,
.legal-cookie-table td {
    display: block;
    width: 100%;
  }
  /* line 168, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-cookie-table tr {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(22, 22, 22, 0.08);
  }
  /* line 173, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-cookie-table td {
    padding: 0.15rem 0;
    border: none;
  }
  /* line 178, app/assets/stylesheets/partials/_legal-pages.scss */
  .legal-cookie-table td:first-child {
    font-weight: 600;
    color: #161616;
  }
}

/* line 186, app/assets/stylesheets/partials/_legal-pages.scss */
.sitemap-tag-list {
  columns: 3 12rem;
  column-gap: 1.5rem;
}

/* line 190, app/assets/stylesheets/partials/_legal-pages.scss */
.sitemap-tag-list li {
  break-inside: avoid;
}

/* line 1, app/assets/stylesheets/partials/_licenses.scss */
.license-body {
  margin-top: 0.75rem;
}

/* line 4, app/assets/stylesheets/partials/_licenses.scss */
.license-body p,
.license-body li {
  font-size: 1rem;
  line-height: 1.7;
}

/* line 10, app/assets/stylesheets/partials/_licenses.scss */
.license-body ul {
  list-style: disc;
  padding-left: 1.25rem;
}

/* line 15, app/assets/stylesheets/partials/_licenses.scss */
.license-body li + li,
.license-body p + p,
.license-body p + ul,
.license-body ul + p {
  margin-top: 0.5rem;
}

/* line 1, app/assets/stylesheets/partials/_faq.scss */
.faq {
  padding: 1rem 0 4rem;
  color: rgba(22, 22, 22, 0.86);
  /* Override reset.scss `input[type="search"] { box-sizing: content-box; }` */
}

/* line 5, app/assets/stylesheets/partials/_faq.scss */
.faq__head {
  max-width: 44rem;
  margin: 0 auto 2rem;
  text-align: center;
}

/* line 11, app/assets/stylesheets/partials/_faq.scss */
.faq__title {
  margin: 0 0 0.35rem;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

/* line 20, app/assets/stylesheets/partials/_faq.scss */
.faq__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

/* line 26, app/assets/stylesheets/partials/_faq.scss */
.faq__layout {
  max-width: 52rem;
  margin: 0 auto;
}

/* line 31, app/assets/stylesheets/partials/_faq.scss */
.faq__nav {
  margin-bottom: 1.75rem;
}

/* line 35, app/assets/stylesheets/partials/_faq.scss */
.faq__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0.45rem;
}

/* line 45, app/assets/stylesheets/partials/_faq.scss */
.faq__nav-link {
  display: block;
  padding: 0.38rem 0.78rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  color: rgba(22, 22, 22, 0.62);
  font-size: 0.86rem;
  font-weight: 700;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

/* line 57, app/assets/stylesheets/partials/_faq.scss */
.faq__nav-link:hover {
  text-decoration: none;
  color: #161616;
  border-color: rgba(15, 104, 211, 0.28);
  background: rgba(15, 104, 211, 0.06);
}

/* line 64, app/assets/stylesheets/partials/_faq.scss */
.faq__nav-link:focus-visible {
  outline: 2px solid rgba(15, 104, 211, 0.95);
  outline-offset: 2px;
}

/* line 70, app/assets/stylesheets/partials/_faq.scss */
.faq__content {
  min-width: 0;
  max-width: 52rem;
  margin: 0 auto;
}

/* line 76, app/assets/stylesheets/partials/_faq.scss */
.faq__search {
  margin-bottom: 2rem;
}

/* line 80, app/assets/stylesheets/partials/_faq.scss */
.faq__search-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(22, 22, 22, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.45rem;
}

/* line 90, app/assets/stylesheets/partials/_faq.scss */
.faq__search-input {
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(22, 22, 22, 0.18);
  border-radius: 6px;
  background: #fff;
  font-size: 0.9375rem;
  color: #161616;
}

/* line 101, app/assets/stylesheets/partials/_faq.scss */
.faq__search-input::placeholder {
  color: rgba(22, 22, 22, 0.4);
}

/* line 105, app/assets/stylesheets/partials/_faq.scss */
.faq__search-input:focus-visible {
  outline: none;
  border-color: rgba(15, 104, 211, 0.7);
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.15);
}

/* line 113, app/assets/stylesheets/partials/_faq.scss */
.faq input.faq__search-input[type='search'] {
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* line 119, app/assets/stylesheets/partials/_faq.scss */
.faq__section {
  padding-top: 1.75rem;
  margin-top: 1.75rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  scroll-margin-top: calc(5.75rem + 1rem);
}

/* line 125, app/assets/stylesheets/partials/_faq.scss */
.faq__section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

/* line 132, app/assets/stylesheets/partials/_faq.scss */
.faq__footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  color: rgba(22, 22, 22, 0.65);
  font-size: 0.9375rem;
}

/* line 139, app/assets/stylesheets/partials/_faq.scss */
.faq__footer p {
  margin: 0;
}

/* line 143, app/assets/stylesheets/partials/_faq.scss */
.faq__footer a {
  color: #0f68d3;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* line 148, app/assets/stylesheets/partials/_faq.scss */
.faq__footer a:hover {
  text-decoration: none;
}

@media only screen and (max-width: 64rem) {
  /* line 157, app/assets/stylesheets/partials/_faq.scss */
  .faq__title {
    font-size: 1.625rem;
  }
  /* line 161, app/assets/stylesheets/partials/_faq.scss */
  .faq__nav-link {
    padding: 0.35rem 0.7rem;
  }
}

/* line 13, app/assets/stylesheets/partials/_tools.scss */
.tools-hub {
  background: #fff;
  color: #161616;
}

/* line 18, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__hero-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 2rem);
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

@media only screen and (min-width: 68.75rem) {
  /* line 18, app/assets/stylesheets/partials/_tools.scss */
  .tools-hub__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: 2rem;
    max-width: calc(64rem + 20rem + 2rem);
  }
}

/* line 35, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__hero-main {
  min-width: 0;
}

/* line 39, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__title {
  margin: .7rem auto 1rem;
  max-width: 18ch;
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  line-height: 1.03;
  color: #161616;
}

/* line 47, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__lead {
  margin: 0 auto;
  max-width: 46rem;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.65;
}

/* line 55, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__trust {
  justify-content: center;
}

/* line 59, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin: clamp(2.4rem, 4vw, 3.4rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media only screen and (max-width: 32rem) {
  /* line 59, app/assets/stylesheets/partials/_tools.scss */
  .tools-hub__grid {
    grid-template-columns: 1fr;
  }
}

/* line 73, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__item {
  min-width: 0;
}

/* line 75, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card {
  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 1.7rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.86));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* line 91, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card:hover {
  border-color: rgba(15, 104, 211, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 1.6rem 2.6rem rgba(15, 104, 211, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 98, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card:hover .tools-hub__card-cta {
  gap: .55rem;
}

/* line 99, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card:hover .tools-hub__card-icon {
  transform: scale(1.05);
}

/* line 103, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  padding: .26rem .6rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* line 117, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  transition: transform .25s ease;
}

/* line 129, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-icon img,
.tools-hub__card-icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

/* line 133, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #161616;
}

/* line 139, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-tagline {
  margin-top: .25rem;
  color: #0f68d3;
  font-size: .9rem;
  font-weight: 700;
}

/* line 146, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-copy {
  flex: 1;
  margin-top: .7rem;
  color: rgba(22, 22, 22, 0.66);
  font-size: .94rem;
  line-height: 1.6;
}

/* line 154, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.1rem;
}

/* line 161, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__tag {
  padding: .26rem .6rem;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.035);
  color: rgba(22, 22, 22, 0.7);
  font-size: .72rem;
  font-weight: 700;
}

/* line 171, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.2rem;
  color: #0f68d3;
  font-size: .92rem;
  font-weight: 800;
  transition: gap .2s ease;
}

/* line 181, app/assets/stylesheets/partials/_tools.scss */
.tools-hub__card-cta svg {
  width: 1rem;
  height: 1rem;
}

/* line 187, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__steps.tools-hub__steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media only screen and (max-width: 64rem) {
  /* line 187, app/assets/stylesheets/partials/_tools.scss */
  .bgr-how__steps.tools-hub__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 187, app/assets/stylesheets/partials/_tools.scss */
  .bgr-how__steps.tools-hub__steps {
    grid-template-columns: 1fr;
  }
}

/* line 199, app/assets/stylesheets/partials/_tools.scss */
.tool-page {
  max-width: 48rem;
  margin: 0 auto;
}

/* line 203, app/assets/stylesheets/partials/_tools.scss */
.tool-page__head {
  margin-bottom: 2rem;
}

/* line 205, app/assets/stylesheets/partials/_tools.scss */
.tool-page__title {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

/* line 210, app/assets/stylesheets/partials/_tools.scss */
.tool-page__subtitle {
  color: rgba(22, 22, 22, 0.7);
}

/* line 214, app/assets/stylesheets/partials/_tools.scss */
.tool-page__body {
  padding: 2.5rem;
  border: 1px dashed rgba(22, 22, 22, 0.2);
  border-radius: 0.9rem;
  text-align: center;
}

/* line 221, app/assets/stylesheets/partials/_tools.scss */
.tool-page__placeholder {
  color: rgba(22, 22, 22, 0.55);
  font-weight: 500;
  margin: 0;
}

/* line 246, app/assets/stylesheets/partials/_tools.scss */
.bgr-landing {
  background: #fff;
  color: #161616;
}

/* line 253, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  background: radial-gradient(circle at 82% 12%, rgba(15, 104, 211, 0.16), transparent 26rem), radial-gradient(circle at 12% 88%, rgba(19, 185, 129, 0.12), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f7fbff 48%, #eef6ff 100%);
}

/* line 265, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .55;
  background-image: linear-gradient(rgba(15, 104, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.06) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(120deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 22%, #000 80%, transparent 100%);
}

/* line 280, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* line 287, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__orb {
  position: absolute;
  border-radius: 50%;
  opacity: .5;
}

/* line 292, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__orb--one {
  top: 8%;
  right: 6%;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(15, 104, 211, 0.22), transparent 68%);
}

/* line 300, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__orb--two {
  bottom: -4rem;
  left: 4%;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle, rgba(19, 185, 129, 0.16), transparent 70%);
}

/* line 309, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
  width: calc(100% - 2rem);
  max-width: 90rem;
}

@media only screen and (min-width: 68.75rem) {
  /* line 309, app/assets/stylesheets/partials/_tools.scss */
  .bgr-hero__inner {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

/* line 323, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 2.75rem);
  min-width: 0;
}

/* line 330, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 42rem;
}

/* line 336, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__title {
  margin: .7rem 0 1rem;
  max-width: 16ch;
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  line-height: 1.02;
  color: #161616;
}

/* line 344, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__lead {
  margin: 0;
  max-width: 38rem;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.65;
}

/* line 352, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.3rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

/* line 361, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(22, 22, 22, 0.8);
}

/* line 370, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 380, app/assets/stylesheets/partials/_tools.scss */
.bgr-hero__trust-check svg {
  width: .85rem;
  height: .85rem;
}

/* line 385, app/assets/stylesheets/partials/_tools.scss */
.tool-rail {
  display: none;
  min-width: 0;
}

@media only screen and (min-width: 68.75rem) {
  /* line 385, app/assets/stylesheets/partials/_tools.scss */
  .tool-rail {
    display: block;
    align-self: stretch;
  }
}

/* line 397, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__inner {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

/* line 408, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__inner #sidebar_btf_placeholder,
.tool-rail__inner .sidebar_btf_placeholder {
  width: 100%;
}

/* line 413, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__inner #sidebar_btf_sticky_wrapper {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
}

/* line 419, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__inner #sidebar_btf_wrapper {
  max-width: 100%;
  margin-inline: auto;
}

/* line 424, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__card {
  padding: 1.1rem 1.2rem 1.25rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0.9rem 2rem rgba(15, 104, 211, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* line 434, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__eyebrow {
  display: block;
  margin-bottom: .55rem;
  color: rgba(22, 22, 22, 0.48);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* line 443, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__links {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 451, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__item {
  min-width: 0;
}

/* line 453, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__link {
  display: block;
  padding: .55rem .65rem;
  border-radius: .75rem;
  text-decoration: none;
  transition: background .15s ease;
}

/* line 460, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__link:hover {
  background: rgba(15, 104, 211, 0.07);
}

/* line 463, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__link:hover .tool-rail__link-label {
  color: #0f68d3;
}

/* line 467, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__link-label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: #161616;
}

/* line 474, app/assets/stylesheets/partials/_tools.scss */
.tool-rail__link-text {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  line-height: 1.45;
  color: rgba(22, 22, 22, 0.55);
}

/* line 484, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.4rem;
  padding: 1.4rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1.4rem 3rem rgba(15, 104, 211, 0.12), 0 0.2rem 0.6rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media only screen and (max-width: 32rem) {
  /* line 484, app/assets/stylesheets/partials/_tools.scss */
  .bgr-studio {
    grid-template-columns: 1fr;
  }
}

/* line 504, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__canvas {
  position: relative;
  min-height: 19rem;
  border-radius: .95rem;
  overflow: hidden;
  background-color: #fff;
  background-image: linear-gradient(45deg, rgba(22, 22, 22, 0.065) 25%, transparent 25%), linear-gradient(-45deg, rgba(22, 22, 22, 0.065) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(22, 22, 22, 0.065) 75%), linear-gradient(-45deg, transparent 75%, rgba(22, 22, 22, 0.065) 75%);
  background-size: 1.4rem 1.4rem;
  background-position: 0 0, 0 .7rem, .7rem -.7rem, -.7rem 0;
}

/* line 512, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__dropzone {
  position: absolute;
  inset: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 1.5rem;
  border: 2px dashed rgba(15, 104, 211, 0.4);
  border-radius: .95rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(15, 104, 211, 0.05));
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

/* line 528, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__dropzone:hover, .bgr-studio__dropzone.is-dragging {
  border-color: #0f68d3;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(15, 104, 211, 0.12));
}

/* line 534, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__dropzone.is-dragging {
  transform: scale(0.99);
}

/* line 537, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* line 548, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .4rem;
  border-radius: 1rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 559, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__drop-icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

/* line 562, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__drop-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #161616;
}

/* line 568, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__drop-sub {
  font-size: .92rem;
  color: rgba(22, 22, 22, 0.6);
}

/* line 573, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__drop-browse {
  color: #0f68d3;
  font-weight: 700;
  text-decoration: underline;
}

/* line 579, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__drop-meta {
  margin-top: .45rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.45);
}

/* line 588, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__result {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
}

/* line 597, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* line 605, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__image {
  max-width: 100%;
  max-height: 16rem;
  object-fit: contain;
}

/* line 611, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__change {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(22, 22, 22, 0.78);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

/* line 628, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__change svg {
  width: .85rem;
  height: .85rem;
}

/* line 630, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__change:hover {
  border-color: rgba(15, 104, 211, 0.5);
  color: #0f68d3;
}

/* line 636, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__side {
  display: flex;
  flex-flow: column;
  gap: .85rem;
  align-self: stretch;
}

/* line 643, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__file {
  display: flex;
  flex-flow: column;
  gap: .2rem;
  min-width: 0;
}

/* line 650, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__file-name {
  font-weight: 800;
  color: #161616;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 658, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__file-meta {
  font-size: .82rem;
  color: rgba(22, 22, 22, 0.55);
}

/* line 663, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  padding: .42rem .75rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: rgba(22, 22, 22, 0.6);
  font-size: .8rem;
  font-weight: 700;
}

/* line 675, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__status-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
}

/* line 682, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__status[data-state='queued'], .bgr-studio__status[data-state='uploading'], .bgr-studio__status[data-state='processing'] {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 688, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__status[data-state='queued'] .bgr-studio__status-dot, .bgr-studio__status[data-state='uploading'] .bgr-studio__status-dot, .bgr-studio__status[data-state='processing'] .bgr-studio__status-dot {
  animation: bgr-pulse 1s ease-in-out infinite;
}

/* line 691, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__status[data-state='error'] {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

@keyframes bgr-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .4;
    transform: scale(0.7);
  }
}

/* line 702, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__error {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: #dc2626;
}

/* line 709, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: auto;
  padding: .85rem 1.1rem;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 0.6rem 1.4rem rgba(15, 104, 211, 0.28);
}

/* line 724, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__download svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 726, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__download:hover {
  transform: translateY(-1px);
}

/* line 728, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__download.is-disabled {
  background: rgba(22, 22, 22, 0.12);
  color: rgba(22, 22, 22, 0.45);
  box-shadow: none;
  pointer-events: none;
}

/* line 736, app/assets/stylesheets/partials/_tools.scss */
.bgr-studio__hint {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(22, 22, 22, 0.5);
}

/* line 743, app/assets/stylesheets/partials/_tools.scss */
.tool-next-steps {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  min-width: 0;
  margin-top: -.15rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(22, 22, 22, 0.09);
}

/* line 754, app/assets/stylesheets/partials/_tools.scss */
.tool-next-steps[hidden] {
  display: none;
}

@media only screen and (max-width: 32rem) {
  /* line 743, app/assets/stylesheets/partials/_tools.scss */
  .tool-next-steps {
    align-items: stretch;
    flex-flow: column;
  }
}

/* line 762, app/assets/stylesheets/partials/_tools.scss */
.tool-next-steps__head {
  display: block;
  min-width: 0;
}

/* line 767, app/assets/stylesheets/partials/_tools.scss */
.tool-next-steps__eyebrow {
  color: rgba(22, 22, 22, 0.48);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* line 774, app/assets/stylesheets/partials/_tools.scss */
.tool-next-steps__actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  min-width: 0;
}

@media only screen and (max-width: 32rem) {
  /* line 774, app/assets/stylesheets/partials/_tools.scss */
  .tool-next-steps__actions {
    justify-content: stretch;
  }
}

@media only screen and (max-width: 25rem) {
  /* line 774, app/assets/stylesheets/partials/_tools.scss */
  .tool-next-steps__actions {
    flex-flow: column;
  }
}

/* line 789, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .62rem .65rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .7rem;
  background: rgba(255, 255, 255, 0.78);
  color: #161616;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

@media only screen and (min-width: 25.01rem) {
  /* line 789, app/assets/stylesheets/partials/_tools.scss */
  .tool-next-step {
    min-width: 13rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 789, app/assets/stylesheets/partials/_tools.scss */
  .tool-next-step {
    flex: 1 1 0;
  }
}

/* line 811, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step:hover {
  border-color: rgba(15, 104, 211, 0.38);
  background: rgba(255, 255, 255, 0.94);
  transform: translateY(-1px);
}

/* line 817, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step--primary {
  border-color: rgba(15, 104, 211, 0.2);
  background: rgba(255, 255, 255, 0.92);
}

/* line 821, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step--primary .tool-next-step__icon {
  background: #0f68d3;
  color: #fff;
}

/* line 828, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: .65rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 838, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step__icon svg {
  width: 1.08rem;
  height: 1.08rem;
}

/* line 844, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step__copy {
  display: flex;
  flex-flow: column;
  gap: .12rem;
  min-width: 0;
}

/* line 851, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step__label {
  color: #161616;
  font-size: .8rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 858, app/assets/stylesheets/partials/_tools.scss */
.tool-next-step__text {
  color: rgba(22, 22, 22, 0.58);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.35;
}

/* line 866, app/assets/stylesheets/partials/_tools.scss */
.bgr-landing.is-active .bgr-studio__dropzone {
  display: none;
}

/* line 867, app/assets/stylesheets/partials/_tools.scss */
.bgr-landing.is-active .bgr-studio__result {
  display: flex;
}

/* line 872, app/assets/stylesheets/partials/_tools.scss */
.bgr-how,
.bgr-features,
.bgr-usecases {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4rem, 6vw, 6rem);
  color: #161616;
  background: linear-gradient(180deg, #fff 0%, #f6fbff 48%, #fff 100%);
}

/* line 882, app/assets/stylesheets/partials/_tools.scss */
.bgr-how::before,
.bgr-features::before,
.bgr-usecases::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  background-image: linear-gradient(rgba(15, 104, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 185, 129, 0.055) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 82%, transparent 100%);
}

/* line 897, app/assets/stylesheets/partials/_tools.scss */
.bgr-features::after,
.bgr-usecases::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 18%;
  z-index: -1;
  height: 10rem;
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.1), rgba(19, 185, 129, 0.1), transparent);
  transform: rotate(-3deg);
}

/* line 910, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__inner,
.bgr-features__inner,
.bgr-usecases__inner {
  width: calc(100% - 2rem);
  max-width: 72rem;
  margin: 0 auto;
}

/* line 918, app/assets/stylesheets/partials/_tools.scss */
.bgr-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(17rem, 0.7fr);
  align-items: end;
  gap: 2rem;
  margin-bottom: 2.4rem;
}

@media only screen and (max-width: 64rem) {
  /* line 918, app/assets/stylesheets/partials/_tools.scss */
  .bgr-section-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* line 931, app/assets/stylesheets/partials/_tools.scss */
.bgr-section-head__copy {
  min-width: 0;
}

/* line 933, app/assets/stylesheets/partials/_tools.scss */
.bgr-section-title {
  max-width: 18ch;
  margin: .65rem 0 0;
  color: #161616;
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.01em;
}

/* line 942, app/assets/stylesheets/partials/_tools.scss */
.bgr-section-lead {
  max-width: 39rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.66);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* line 950, app/assets/stylesheets/partials/_tools.scss */
.bgr-link {
  color: #0f68d3;
  font-weight: 700;
  text-decoration: none;
}

/* line 955, app/assets/stylesheets/partials/_tools.scss */
.bgr-link:hover {
  text-decoration: underline;
}

/* line 960, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bgr-step;
}

@media only screen and (max-width: 32rem) {
  /* line 960, app/assets/stylesheets/partials/_tools.scss */
  .bgr-how__steps {
    grid-template-columns: 1fr;
  }
}

/* line 974, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__step {
  position: relative;
  padding: 1.7rem 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* line 979, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__step:hover {
  border-color: rgba(15, 104, 211, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 1.4rem 2.4rem rgba(15, 104, 211, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 988, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: .9rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  font-size: 1.05rem;
  font-weight: 900;
}

/* line 1002, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__step-title {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  color: #161616;
}

/* line 1008, app/assets/stylesheets/partials/_tools.scss */
.bgr-how__step-text {
  margin: 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: .95rem;
  line-height: 1.6;
}

/* line 1017, app/assets/stylesheets/partials/_tools.scss */
.bgr-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

@media only screen and (max-width: 32rem) {
  /* line 1017, app/assets/stylesheets/partials/_tools.scss */
  .bgr-features__grid {
    grid-template-columns: 1fr;
  }
}

/* line 1027, app/assets/stylesheets/partials/_tools.scss */
.bgr-feature {
  display: flex;
  flex-flow: column;
  padding: 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* line 1039, app/assets/stylesheets/partials/_tools.scss */
.bgr-feature:hover {
  border-color: rgba(15, 104, 211, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 1.4rem 2.4rem rgba(15, 104, 211, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 1048, app/assets/stylesheets/partials/_tools.scss */
.bgr-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

/* line 1059, app/assets/stylesheets/partials/_tools.scss */
.bgr-feature__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* line 1062, app/assets/stylesheets/partials/_tools.scss */
.bgr-feature__title {
  margin: 0 0 .45rem;
  font-size: 1.1rem;
  color: #161616;
}

/* line 1068, app/assets/stylesheets/partials/_tools.scss */
.bgr-feature__text {
  margin: 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: .94rem;
  line-height: 1.6;
}

/* line 1077, app/assets/stylesheets/partials/_tools.scss */
.bgr-usecases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}

@media only screen and (max-width: 64rem) {
  /* line 1077, app/assets/stylesheets/partials/_tools.scss */
  .bgr-usecases__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 1077, app/assets/stylesheets/partials/_tools.scss */
  .bgr-usecases__grid {
    grid-template-columns: 1fr;
  }
}

/* line 1094, app/assets/stylesheets/partials/_tools.scss */
.bgr-usecase {
  display: flex;
  flex-flow: column;
  gap: .35rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* line 1107, app/assets/stylesheets/partials/_tools.scss */
.bgr-usecase:hover {
  border-color: rgba(15, 104, 211, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 1.4rem 2.4rem rgba(15, 104, 211, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 1116, app/assets/stylesheets/partials/_tools.scss */
.bgr-usecase__label {
  font-weight: 800;
  color: #161616;
}

/* line 1121, app/assets/stylesheets/partials/_tools.scss */
.bgr-usecase__text {
  color: rgba(22, 22, 22, 0.6);
  font-size: .9rem;
  line-height: 1.55;
}

/* line 1127, app/assets/stylesheets/partials/_tools.scss */
.bgr-usecases__cross {
  margin: 0;
  text-align: center;
  color: rgba(22, 22, 22, 0.65);
  font-size: .98rem;
}

/* line 1137, app/assets/stylesheets/partials/_tools.scss */
.pc-landing .bgr-hero__title {
  max-width: 18ch;
}

/* line 1140, app/assets/stylesheets/partials/_tools.scss */
.pc-studio {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
}

@media only screen and (max-width: 32rem) {
  /* line 1140, app/assets/stylesheets/partials/_tools.scss */
  .pc-studio {
    grid-template-columns: 1fr;
  }
}

/* line 1148, app/assets/stylesheets/partials/_tools.scss */
.pc-select-wrap {
  min-width: 0;
}

/* line 1150, app/assets/stylesheets/partials/_tools.scss */
.pc-select {
  width: 100%;
  min-height: 2.9rem;
  padding: 0 .9rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: .7rem;
  background: rgba(255, 255, 255, 0.9);
  color: #161616;
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
}

/* line 1162, app/assets/stylesheets/partials/_tools.scss */
.pc-select:focus {
  border-color: rgba(15, 104, 211, 0.65);
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.12);
  outline: none;
}

/* line 1169, app/assets/stylesheets/partials/_tools.scss */
.pc-output {
  display: flex;
  flex-flow: column;
  gap: .18rem;
  padding: .85rem .95rem;
  border: 1px solid rgba(15, 104, 211, 0.12);
  border-radius: .75rem;
  background: rgba(15, 104, 211, 0.055);
}

/* line 1179, app/assets/stylesheets/partials/_tools.scss */
.pc-output__label {
  color: rgba(22, 22, 22, 0.48);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* line 1186, app/assets/stylesheets/partials/_tools.scss */
.pc-output__value {
  color: #161616;
  font-size: .95rem;
  font-weight: 900;
}

/* line 1192, app/assets/stylesheets/partials/_tools.scss */
.pc-output__meta {
  color: rgba(22, 22, 22, 0.58);
  font-size: .78rem;
  line-height: 1.45;
}

/* line 1198, app/assets/stylesheets/partials/_tools.scss */
.pc-step {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: .82rem;
  font-weight: 800;
}

/* line 1207, app/assets/stylesheets/partials/_tools.scss */
.pc-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1218, app/assets/stylesheets/partials/_tools.scss */
.pc-convert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #161616;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  box-shadow: 0 0.6rem 1.4rem rgba(22, 22, 22, 0.18);
}

/* line 1233, app/assets/stylesheets/partials/_tools.scss */
.pc-convert svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 1235, app/assets/stylesheets/partials/_tools.scss */
.pc-convert:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* line 1237, app/assets/stylesheets/partials/_tools.scss */
.pc-convert:disabled {
  cursor: not-allowed;
  opacity: .42;
  box-shadow: none;
}

/* line 1249, app/assets/stylesheets/partials/_tools.scss */
.rc-landing .bgr-hero__title {
  max-width: 20ch;
}

/* line 1252, app/assets/stylesheets/partials/_tools.scss */
.rc-hero {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* line 1256, app/assets/stylesheets/partials/_tools.scss */
.rc-hero__inner {
  transition: max-width .35s ease, gap .35s ease;
}

/* line 1260, app/assets/stylesheets/partials/_tools.scss */
.rc-studio {
  align-self: stretch;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  transition: transform .35s ease, box-shadow .35s ease, padding .35s ease, border-radius .35s ease;
}

@media only screen and (max-width: 64rem) {
  /* line 1260, app/assets/stylesheets/partials/_tools.scss */
  .rc-studio {
    grid-template-columns: 1fr;
  }
}

/* line 1270, app/assets/stylesheets/partials/_tools.scss */
.rc-studio__canvas {
  display: flex;
  align-self: stretch;
  min-height: 19rem;
  background: none;
  transition: height .35s ease, min-height .35s ease;
}

/* line 1281, app/assets/stylesheets/partials/_tools.scss */
.rc-editor {
  flex-flow: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 1rem;
  padding: 1rem;
}

/* line 1289, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__filebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .85rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .85rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.35rem 1rem rgba(22, 22, 22, 0.06);
}

/* line 1300, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__filebar .bgr-studio__file {
  flex: 1;
  min-width: 0;
}

/* line 1306, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__stage {
  position: relative;
  flex: 1;
  min-height: 26rem;
}

/* line 1312, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__cropper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: transparent;
}

/* line 1319, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__cropper .cropper-container {
  margin: 0 auto;
}

/* line 1324, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__cropper .cropper-canvas {
  background-color: #fff;
  background-image: linear-gradient(45deg, rgba(22, 22, 22, 0.065) 25%, transparent 25%), linear-gradient(-45deg, rgba(22, 22, 22, 0.065) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(22, 22, 22, 0.065) 75%), linear-gradient(-45deg, transparent 75%, rgba(22, 22, 22, 0.065) 75%);
  background-size: 1.4rem 1.4rem;
  background-position: 0 0, 0 .7rem, .7rem -.7rem, -.7rem 0;
}

/* line 1329, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__cropper .cropper-modal {
  background-color: transparent;
  opacity: 1;
}

/* line 1335, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* line 1341, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__hint {
  position: absolute;
  left: 50%;
  bottom: .65rem;
  transform: translateX(-50%);
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.62);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
  white-space: nowrap;
}

/* line 1357, app/assets/stylesheets/partials/_tools.scss */
.rc-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* line 1368, app/assets/stylesheets/partials/_tools.scss */
.rc-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 2.5rem;
  padding: 0 .95rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(22, 22, 22, 0.055);
  color: rgba(22, 22, 22, 0.72);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

/* line 1384, app/assets/stylesheets/partials/_tools.scss */
.rc-tool-button svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 1389, app/assets/stylesheets/partials/_tools.scss */
.rc-tool-button:hover {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1394, app/assets/stylesheets/partials/_tools.scss */
.rc-tool-button:active {
  background: rgba(15, 104, 211, 0.18);
}

@media only screen and (max-width: 26rem) {
  /* line 1399, app/assets/stylesheets/partials/_tools.scss */
  .rc-tool-button__label {
    display: none;
  }
}

/* line 1407, app/assets/stylesheets/partials/_tools.scss */
.rc-panel {
  min-width: 0;
}

/* line 1411, app/assets/stylesheets/partials/_tools.scss */
.rc-change {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  padding: .5rem .8rem;
  border: 1px solid rgba(15, 104, 211, 0.3);
  border-radius: 0.5rem;
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

/* line 1426, app/assets/stylesheets/partials/_tools.scss */
.rc-change svg {
  width: .95rem;
  height: .95rem;
}

/* line 1428, app/assets/stylesheets/partials/_tools.scss */
.rc-change:hover {
  background: rgba(15, 104, 211, 0.15);
  border-color: rgba(15, 104, 211, 0.55);
}

/* line 1434, app/assets/stylesheets/partials/_tools.scss */
.rc-control {
  display: flex;
  flex-flow: column;
  gap: .4rem;
}

/* line 1440, app/assets/stylesheets/partials/_tools.scss */
.rc-control--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

/* line 1446, app/assets/stylesheets/partials/_tools.scss */
.rc-control__field {
  display: flex;
  flex-flow: column;
  gap: .4rem;
  min-width: 0;
}

/* line 1453, app/assets/stylesheets/partials/_tools.scss */
.rc-control__label {
  color: rgba(22, 22, 22, 0.62);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* line 1460, app/assets/stylesheets/partials/_tools.scss */
.rc-control__select,
.rc-control__input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0 .85rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: .75rem;
  background: rgba(255, 255, 255, 0.92);
  color: #161616;
  font-size: .92rem;
  font-weight: 800;
}

/* line 1472, app/assets/stylesheets/partials/_tools.scss */
.rc-control__select:focus,
.rc-control__input:focus {
  border-color: rgba(15, 104, 211, 0.65);
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.12);
  outline: none;
}

/* line 1479, app/assets/stylesheets/partials/_tools.scss */
.rc-control__select {
  cursor: pointer;
}

/* line 1483, app/assets/stylesheets/partials/_tools.scss */
.rc-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid rgba(15, 104, 211, 0.12);
  border-radius: 1rem;
  background: rgba(15, 104, 211, 0.055);
}

/* line 1494, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__label,
.rc-preview__meta {
  align-self: stretch;
  text-align: center;
}

/* line 1500, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__label {
  color: rgba(22, 22, 22, 0.52);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* line 1507, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__meta {
  color: rgba(22, 22, 22, 0.7);
  font-size: .82rem;
  font-weight: 800;
}

/* line 1513, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .6rem;
  background-color: #fff;
  background-image: linear-gradient(45deg, rgba(22, 22, 22, 0.065) 25%, transparent 25%), linear-gradient(-45deg, rgba(22, 22, 22, 0.065) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(22, 22, 22, 0.065) 75%), linear-gradient(-45deg, transparent 75%, rgba(22, 22, 22, 0.065) 75%);
  background-size: 1.4rem 1.4rem;
  background-position: 0 0, 0 .7rem, .7rem -.7rem, -.7rem 0;
}

/* line 1523, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__canvas {
  display: block;
  max-width: 100%;
  max-height: 12rem;
  height: auto;
}

/* line 1529, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__canvas[hidden] {
  display: none;
}

/* line 1532, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated {
  position: relative;
  overflow: hidden;
}

/* line 1536, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated[hidden] {
  display: none;
}

/* line 1539, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated.is-padded .rc-preview__animated-clip {
  outline: 1px solid rgba(217, 119, 6, 0.95);
}

/* line 1543, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated.is-padded .rc-preview__animated-padding {
  display: block;
}

/* line 1549, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated-padding {
  display: none;
  position: absolute;
  z-index: 1;
  background: rgba(245, 158, 11, 0.42);
  pointer-events: none;
}

/* line 1557, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated-clip {
  position: absolute;
  z-index: 2;
  overflow: hidden;
}

/* line 1563, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__animated-img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  max-width: none;
}

/* line 1571, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__warning {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: .6rem;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.45;
}

/* line 1585, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__warning[hidden] {
  display: none;
}

/* line 1587, app/assets/stylesheets/partials/_tools.scss */
.rc-preview__warning svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .05rem;
  color: #d97706;
}

/* line 1596, app/assets/stylesheets/partials/_tools.scss */
.rc-download {
  border: 0;
  cursor: pointer;
}

/* line 1600, app/assets/stylesheets/partials/_tools.scss */
.rc-download:disabled {
  cursor: not-allowed;
}

/* line 1606, app/assets/stylesheets/partials/_tools.scss */
.rc-landing:not(.is-active) .rc-advanced {
  display: none !important;
}

/* line 1612, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .rc-hero__copy {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

/* line 1618, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .bgr-hero__trust {
  justify-content: center;
}

/* line 1622, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .bgr-hero__title {
  max-width: none;
  margin-inline: auto;
}

/* line 1627, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .bgr-hero__lead {
  margin-inline: auto;
}

/* line 1631, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .rc-studio {
  grid-template-columns: minmax(0, 1.55fr) minmax(21rem, 0.95fr);
  gap: 1.75rem;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-radius: 1.5rem;
  animation: rc-studio-open .35s ease both;
}

/* line 1639, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .bgr-studio__result {
  display: flex;
}

/* line 1641, app/assets/stylesheets/partials/_tools.scss */
.rc-landing.is-active .rc-studio__canvas {
  align-self: start;
  height: clamp(38rem, 56vw, 42rem);
}

@media only screen and (max-width: 64rem) {
  /* line 1647, app/assets/stylesheets/partials/_tools.scss */
  .rc-landing.is-active .rc-studio {
    grid-template-columns: 1fr;
  }
}

@keyframes rc-studio-open {
  from {
    opacity: .9;
    transform: translateY(0.75rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 1666, app/assets/stylesheets/partials/_tools.scss */
  .rc-landing.is-active .rc-studio__canvas {
    height: 34rem;
  }
  /* line 1670, app/assets/stylesheets/partials/_tools.scss */
  .rc-editor__filebar {
    align-items: stretch;
    flex-direction: column;
  }
  /* line 1675, app/assets/stylesheets/partials/_tools.scss */
  .rc-change {
    justify-content: center;
  }
  /* line 1679, app/assets/stylesheets/partials/_tools.scss */
  .rc-editor__stage {
    min-height: 17rem;
  }
  /* line 1683, app/assets/stylesheets/partials/_tools.scss */
  .rc-control--grid {
    grid-template-columns: 1fr;
  }
}

/* line 1, app/assets/stylesheets/partials/_creators.scss */
.creators-page {
  background: #fff;
}

/* line 4, app/assets/stylesheets/partials/_creators.scss */
.creators-page__hero {
  background: #161616;
  color: #fff;
  overflow: hidden;
}

/* line 10, app/assets/stylesheets/partials/_creators.scss */
.creators-page__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.62fr);
  gap: 3rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 10, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 22, app/assets/stylesheets/partials/_creators.scss */
.creators-page__hero-copy {
  max-width: 48rem;
}

/* line 26, app/assets/stylesheets/partials/_creators.scss */
.creators-page__eyebrow {
  color: #0f68d3;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* line 35, app/assets/stylesheets/partials/_creators.scss */
.creators-page__title {
  color: inherit;
  font-size: 4rem;
  line-height: 1.02;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 35, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__title {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 35, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__title {
    font-size: 2.35rem;
  }
}

/* line 50, app/assets/stylesheets/partials/_creators.scss */
.creators-page__intro {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 40rem;
}

/* line 57, app/assets/stylesheets/partials/_creators.scss */
.creators-page__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 43rem;
}

@media only screen and (max-width: 32rem) {
  /* line 57, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__stats {
    grid-template-columns: 1fr;
  }
}

/* line 69, app/assets/stylesheets/partials/_creators.scss */
.creators-page__stat {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 1rem;
}

/* line 74, app/assets/stylesheets/partials/_creators.scss */
.creators-page__stat strong,
.creators-page__stat span {
  display: block;
}

/* line 79, app/assets/stylesheets/partials/_creators.scss */
.creators-page__stat strong {
  color: #fff;
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

/* line 88, app/assets/stylesheets/partials/_creators.scss */
.creators-page__stat span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-top: 0.45rem;
  text-transform: uppercase;
}

/* line 98, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
  color: #161616;
  padding: 1.5rem;
}

/* line 105, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search-panel h2 {
  font-size: 1.55rem;
  margin-bottom: 0.55rem;
}

/* line 110, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search-panel p {
  color: rgba(22, 22, 22, 0.62);
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* line 118, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search {
  display: flex;
  gap: 0.6rem;
}

/* line 122, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .awesomplete {
  flex: 1 1 auto;
  height: auto;
  min-width: 0;
}

/* line 128, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .awesomplete ul[id^="awesomplete_list_"] {
  top: calc(100% + 0.35rem);
  border: 1px solid rgba(22, 22, 22, 0.08);
  box-shadow: 0 0.8rem 1.7rem rgba(22, 22, 22, 0.14);
  z-index: 10;
}

/* line 135, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .autocomplete-creator {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

/* line 142, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .autocomplete-creator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
}

/* line 150, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .autocomplete-creator__icon svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}

/* line 156, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .autocomplete-creator__icon .twitch {
  fill: #6441a5;
}

/* line 161, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search .autocomplete-creator__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 32rem) {
  /* line 118, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__search {
    flex-direction: column;
  }
}

/* line 173, app/assets/stylesheets/partials/_creators.scss */
.creators-page__search-input {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: 6px;
  color: #161616;
  font: inherit;
  padding: 0.8rem 0.9rem;
}

/* line 183, app/assets/stylesheets/partials/_creators.scss */
.creators-page__directory {
  background: rgba(22, 22, 22, 0.025);
}

/* line 187, app/assets/stylesheets/partials/_creators.scss */
.creators-page__section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* line 194, app/assets/stylesheets/partials/_creators.scss */
.creators-page__section-head h2 {
  font-size: 2.25rem;
  line-height: 1.15;
  margin-bottom: 0.55rem;
}

/* line 200, app/assets/stylesheets/partials/_creators.scss */
.creators-page__section-head p {
  color: rgba(22, 22, 22, 0.62);
  line-height: 1.6;
  max-width: 40rem;
}

@media only screen and (max-width: 32rem) {
  /* line 187, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* line 212, app/assets/stylesheets/partials/_creators.scss */
.creators-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

/* line 218, app/assets/stylesheets/partials/_creators.scss */
.creators-page__empty {
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 8px;
  background: #fff;
  padding: 1.5rem;
}

/* line 224, app/assets/stylesheets/partials/_creators.scss */
.creators-page__empty h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

/* line 229, app/assets/stylesheets/partials/_creators.scss */
.creators-page__empty p {
  color: rgba(22, 22, 22, 0.62);
  line-height: 1.55;
}

/* line 235, app/assets/stylesheets/partials/_creators.scss */
.creators-page__pagination {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media only screen and (max-width: 32rem) {
  /* line 235, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__pagination {
    align-items: stretch;
    flex-direction: column;
  }
}

/* line 247, app/assets/stylesheets/partials/_creators.scss */
.creators-page__leaderboard-section {
  background: #fff;
}

/* line 251, app/assets/stylesheets/partials/_creators.scss */
.creators-page__leaderboard {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(21rem, 1fr);
  gap: 3rem;
  align-items: start;
}

@media only screen and (max-width: 64rem) {
  /* line 251, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__leaderboard {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 263, app/assets/stylesheets/partials/_creators.scss */
.creators-page__leaderboard-copy {
  max-width: 35rem;
}

/* line 266, app/assets/stylesheets/partials/_creators.scss */
.creators-page__leaderboard-copy h2 {
  font-size: 2.65rem;
  line-height: 1.08;
  margin-bottom: 0.8rem;
}

@media only screen and (max-width: 32rem) {
  /* line 266, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__leaderboard-copy h2 {
    font-size: 2rem;
  }
}

/* line 276, app/assets/stylesheets/partials/_creators.scss */
.creators-page__leaderboard-copy p:not(.creators-page__eyebrow) {
  color: rgba(22, 22, 22, 0.64);
  line-height: 1.7;
}

/* line 282, app/assets/stylesheets/partials/_creators.scss */
.creators-page__leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* line 288, app/assets/stylesheets/partials/_creators.scss */
.creators-page__content {
  background: rgba(15, 104, 211, 0.04);
}

/* line 292, app/assets/stylesheets/partials/_creators.scss */
.creators-page__content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media only screen and (max-width: 64rem) {
  /* line 292, app/assets/stylesheets/partials/_creators.scss */
  .creators-page__content-grid {
    grid-template-columns: 1fr;
  }
}

/* line 302, app/assets/stylesheets/partials/_creators.scss */
.creators-page__content-item {
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 8px;
  padding: 1.35rem;
}

/* line 308, app/assets/stylesheets/partials/_creators.scss */
.creators-page__content-item h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

/* line 314, app/assets/stylesheets/partials/_creators.scss */
.creators-page__content-item p {
  color: rgba(22, 22, 22, 0.66);
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

/* line 320, app/assets/stylesheets/partials/_creators.scss */
.creators-page__content-item p:last-child {
  margin-bottom: 0;
}

/* line 327, app/assets/stylesheets/partials/_creators.scss */
.creator-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 8px;
  color: inherit;
  padding: 1rem;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

/* line 341, app/assets/stylesheets/partials/_creators.scss */
.creator-card:hover, .creator-card:focus-visible {
  border-color: rgba(15, 104, 211, 0.55);
  box-shadow: 0 0.75rem 1.6rem rgba(22, 22, 22, 0.08);
  text-decoration: none;
  transform: translateY(-1px);
}

/* line 348, app/assets/stylesheets/partials/_creators.scss */
.creator-card:hover .creator-card__action, .creator-card:focus-visible .creator-card__action {
  color: #0f68d3;
}

/* line 353, app/assets/stylesheets/partials/_creators.scss */
.creator-card__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(22, 22, 22, 0.06);
}

/* line 360, app/assets/stylesheets/partials/_creators.scss */
.creator-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 368, app/assets/stylesheets/partials/_creators.scss */
.creator-card__body {
  min-width: 0;
}

/* line 372, app/assets/stylesheets/partials/_creators.scss */
.creator-card h3 {
  color: #161616;
  font-size: 1.1rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 382, app/assets/stylesheets/partials/_creators.scss */
.creator-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  color: rgba(22, 22, 22, 0.56);
  font-size: 0.86rem;
  line-height: 1.35;
}

/* line 391, app/assets/stylesheets/partials/_creators.scss */
.creator-card__action {
  grid-column: 2;
  color: rgba(22, 22, 22, 0.44);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.16s ease;
}

/* line 402, app/assets/stylesheets/partials/_creators.scss */
.creator-rank {
  display: grid;
  grid-template-columns: 2.5rem auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 8px;
  color: inherit;
  padding: 0.85rem;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

/* line 415, app/assets/stylesheets/partials/_creators.scss */
.creator-rank:hover, .creator-rank:focus-visible {
  border-color: rgba(15, 104, 211, 0.55);
  text-decoration: none;
  transform: translateY(-1px);
}

/* line 422, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__position {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
}

/* line 435, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(22, 22, 22, 0.06);
}

/* line 442, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 450, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__identity, .creator-rank__downloads {
  min-width: 0;
}

/* line 454, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__identity strong,
.creator-rank__identity span, .creator-rank__downloads strong,
.creator-rank__downloads span {
  display: block;
}

/* line 461, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__identity strong {
  color: #161616;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 468, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__identity span {
  color: rgba(22, 22, 22, 0.54);
  font-size: 0.86rem;
  margin-top: 0.2rem;
}

/* line 475, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__downloads {
  text-align: right;
}

/* line 478, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__downloads strong {
  color: #161616;
  font-size: 1.08rem;
}

/* line 483, app/assets/stylesheets/partials/_creators.scss */
.creator-rank__downloads span {
  color: rgba(22, 22, 22, 0.5);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media only screen and (max-width: 32rem) {
  /* line 402, app/assets/stylesheets/partials/_creators.scss */
  .creator-rank {
    grid-template-columns: 2.25rem auto minmax(0, 1fr);
  }
  /* line 495, app/assets/stylesheets/partials/_creators.scss */
  .creator-rank__downloads {
    grid-column: 3;
    text-align: left;
  }
}

/* line 4, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-empty, .ai-emote-create-tile, .ai-emote-tile, .ai-emote-generation-status, .ai-sample-emotes, .ai-card {
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 14px 32px rgba(22, 22, 22, 0.05);
}

/* line 13, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-page {
  min-height: calc(100vh - 5.75rem);
}

/* line 16, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-page > .container {
  max-width: 72rem;
}

@media only screen and (max-width: 32rem) {
  /* line 13, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-page {
    min-height: calc(100vh - 4.25rem);
  }
}

/* line 25, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 37, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .6rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: rgba(22, 22, 22, 0.6);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 52, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-status::before {
  content: '';
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
}

/* line 60, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-status--ready {
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}

/* line 61, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-status--queued, .ai-status--processing {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 63, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-status--failed {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

/* line 66, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-status--live::before {
  animation: ai-status-pulse 1.2s ease-in-out infinite;
}

@keyframes ai-status-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .35;
    transform: scale(0.6);
  }
}

/* line 76, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.06);
  color: rgba(22, 22, 22, 0.7);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

/* line 90, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: ai-spin .7s linear infinite;
}

/* line 100, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-spinner--lg {
  width: 1.35rem;
  height: 1.35rem;
  border-width: 2.5px;
}

@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}

/* line 114, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkles {
  --ai-sparkle-size: 5.25rem;
  position: relative;
  width: var(--ai-sparkle-size);
  height: var(--ai-sparkle-size);
  color: #0f68d3;
}

/* line 121, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkles--lg {
  --ai-sparkle-size: 8.5rem;
}

/* line 124, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkles::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 104, 211, 0.32) 0%, transparent 70%);
  animation: ai-sparkle-glow 2.6s ease-in-out infinite;
}

/* line 134, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkle {
  position: absolute;
  fill: currentColor;
  transform-origin: center;
  filter: drop-shadow(0 2px 5px rgba(15, 104, 211, 0.45));
}

/* line 142, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkle--main {
  top: 22%;
  left: 22%;
  width: 56%;
  height: 56%;
  animation: ai-sparkle-main 6.5s ease-in-out infinite;
}

/* line 151, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkle--two {
  top: 1%;
  left: 64%;
  width: 28%;
  height: 28%;
  animation: ai-sparkle-twinkle 2s ease-in-out infinite;
}

/* line 159, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sparkle--three {
  top: 61%;
  left: 4%;
  width: 23%;
  height: 23%;
  animation: ai-sparkle-twinkle 2s ease-in-out 1s infinite;
}

@keyframes ai-sparkle-main {
  0%, 100% {
    transform: rotate(0deg) scale(0.94);
    opacity: .85;
  }
  50% {
    transform: rotate(180deg) scale(1.04);
    opacity: 1;
  }
}

@keyframes ai-sparkle-twinkle {
  0%, 100% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(160deg);
    opacity: 1;
  }
}

@keyframes ai-sparkle-glow {
  0%, 100% {
    transform: scale(0.82);
    opacity: .45;
  }
  50% {
    transform: scale(1.12);
    opacity: .9;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 183, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sparkles::before,
.ai-sparkle {
    animation-duration: 6s;
  }
}

/* line 191, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-dash {
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

/* line 197, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

@media only screen and (max-width: 32rem) {
  /* line 204, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
}

/* line 210, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card {
  position: relative;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  color: #161616;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* line 220, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card:hover, .ai-card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(15, 104, 211, 0.35);
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.05), 0 20px 40px rgba(15, 104, 211, 0.14);
  text-decoration: none;
}

/* line 231, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, rgba(15, 104, 211, 0.12), rgba(15, 104, 211, 0.02));
}

/* line 238, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 245, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-actions {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

/* line 258, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-actions form {
  margin: 0;
}

/* line 263, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card:hover .ai-card__quick-actions,
.ai-card:focus-within .ai-card__quick-actions,
.ai-card--management .ai-card__quick-actions {
  opacity: 1;
  transform: translateY(0);
}

/* line 270, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.35rem;
  padding: .55rem .72rem;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.94);
  color: #0f68d3;
  box-shadow: 0 10px 24px rgba(22, 22, 22, 0.16);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

/* line 288, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-action svg {
  width: .95rem;
  height: .95rem;
  flex: none;
}

/* line 294, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-action:hover, .ai-card__quick-action:focus {
  border-color: rgba(15, 104, 211, 0.35);
  background: #fff;
  color: #0f68d3;
  text-decoration: none;
}

/* line 302, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-action--danger {
  border-color: rgba(220, 38, 38, 0.18);
  color: #dc2626;
}

/* line 306, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__quick-action--danger:hover, .ai-card__quick-action--danger:focus {
  border-color: rgba(220, 38, 38, 0.35);
  color: #dc2626;
}

/* line 314, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__glyph {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(15, 104, 211, 0.22);
  box-shadow: 0 0 0 0.65rem rgba(15, 104, 211, 0.1);
}

/* line 322, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__media-tag {
  position: absolute;
  top: .7rem;
  left: .7rem;
}

/* line 328, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__media-tag .ai-status {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(22, 22, 22, 0.14);
}

/* line 333, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__body {
  display: flex;
  flex-flow: column;
  gap: .7rem;
  padding: 1rem 1.1rem 1.15rem;
}

/* line 340, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__name {
  margin: 0;
  overflow-wrap: anywhere;
  color: #161616;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* line 349, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* line 355, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__style {
  color: rgba(22, 22, 22, 0.55);
  font-size: .85rem;
  font-weight: 500;
}

/* line 361, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__actions {
  display: flex;
  align-items: center;
  margin-top: .1rem;
}

/* line 366, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__actions form {
  width: 100%;
  margin: 0;
}

/* line 372, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__action {
  width: 100%;
  min-height: 2.6rem;
  justify-content: center;
  border-radius: 0.5rem;
  font-size: .82rem;
}

/* line 379, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__action svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* line 386, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__action-note {
  margin: .05rem 0 0;
  color: rgba(22, 22, 22, 0.6);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
}

@media only screen and (max-width: 32rem) {
  /* line 395, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-card__media-tag {
    top: .5rem;
    left: .5rem;
  }
  /* line 400, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-card__media-tag .ai-status {
    padding: .28rem .46rem;
    font-size: .58rem;
    letter-spacing: .02em;
  }
  /* line 406, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-card__body {
    gap: .55rem;
    padding: .8rem;
  }
  /* line 411, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-card__name {
    font-size: .98rem;
  }
  /* line 415, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-card__meta-row {
    align-items: flex-start;
    flex-flow: column;
    gap: .35rem;
  }
  /* line 421, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tag {
    padding: .26rem .48rem;
    font-size: .64rem;
  }
  /* line 426, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-card__style {
    font-size: .76rem;
    line-height: 1.25;
  }
}

/* line 432, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress {
  display: flex;
  flex-flow: column;
  gap: .4rem;
}

/* line 438, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress--overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.7rem .85rem .8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.98));
}

/* line 446, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress--overlay .ai-progress {
  background: rgba(22, 22, 22, 0.1);
}

/* line 451, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  color: rgba(22, 22, 22, 0.55);
  font-size: .78rem;
  font-weight: 600;
}

/* line 461, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress-metrics {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  color: rgba(22, 22, 22, 0.58);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* line 471, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress-countdown {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(22, 22, 22, 0.48);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

/* line 480, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-card__progress-countdown::before {
  content: '';
  width: .24rem;
  height: .24rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.28);
}

/* line 489, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-progress {
  position: relative;
  height: .35rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.08);
  overflow: hidden;
}

/* line 497, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f68d3, #398cf1);
  transition: width .5s ease;
}

/* line 504, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-progress__fill--animated {
  transition: none;
}

/* line 509, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-progress__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(15, 104, 211, 0), #0f68d3, #4292f2, rgba(15, 104, 211, 0));
  animation: ai-progress-slide 1.3s ease-in-out infinite;
}

@keyframes ai-progress-slide {
  0% {
    left: -45%;
  }
  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 530, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-progress__bar {
    animation-duration: 3s;
  }
}

/* line 535, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__reference-details {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  min-width: 0;
  animation: ai-wizard-section-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ai-wizard-section-in {
  from {
    opacity: 0;
    transform: translateY(0.9rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 556, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__reference-details {
    animation: none;
  }
}

/* line 561, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

/* line 567, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* line 571, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-use-case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* line 574, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-use-case-grid .ai-wizard__choice-body--inline {
  align-items: flex-start;
  padding: 1.15rem;
}

/* line 579, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-use-case-grid .ai-wizard__choice-glyph {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
}

/* line 585, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-use-case-grid .ai-wizard__choice-platform-icon {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
}

/* line 592, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-source-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* line 596, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-source-grid .ai-wizard__choice-body--inline {
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 1rem;
  min-height: 8.5rem;
  padding: 1.25rem;
  overflow: hidden;
}

/* line 605, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-source-grid .ai-wizard__choice-face,
.ai-emote-source-grid .ai-wizard__choice-glyph {
  flex: 0 0 5.25rem;
  width: 5.25rem;
  height: 5.25rem;
  border-radius: .8rem;
}

/* line 613, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-source-grid .ai-wizard__choice-glyph svg {
  width: 2rem;
  height: 2rem;
}

/* line 618, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder .ai-emote-source-grid.ai-wizard__choice-grid .ai-wizard__choice-text {
  flex: 1 1 0;
  min-width: 0;
  padding-top: .15rem;
}

/* line 624, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-source-grid .ai-wizard__choice-title {
  margin-bottom: .3rem;
  font-size: 1.08rem;
}

/* line 629, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-source-grid .ai-wizard__choice-desc {
  font-size: .86rem;
  line-height: 1.5;
}

/* line 635, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-avatar-picker {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  contain: inline-size;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding: .2rem .2rem .75rem;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
}

@media (hover: hover) and (pointer: fine) {
  /* line 652, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-avatar-picker.ai-wizard__choice-grid, .ai-emote-avatar-picker.ai-wizard__choice-grid .ai-wizard__choice {
    cursor: grab;
  }
  /* line 657, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-avatar-picker.ai-wizard__choice-grid.is-dragging, .ai-emote-avatar-picker.ai-wizard__choice-grid.is-dragging .ai-wizard__choice {
    cursor: grabbing;
  }
  /* line 662, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-avatar-picker.is-dragging {
    scroll-snap-type: none;
    user-select: none;
  }
  /* line 667, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-avatar-picker img {
    -webkit-user-drag: none;
    user-select: none;
  }
}

/* line 673, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-avatar-picker .ai-wizard__choice {
  position: relative;
  flex: 0 0 15rem;
  width: 15rem;
  max-width: calc(100% - .4rem);
  scroll-snap-align: start;
}

/* line 685, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-grid--optional .ai-wizard__choice-body {
  opacity: .5;
}

/* line 687, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-grid--optional .ai-wizard__choice:hover .ai-wizard__choice-body,
.ai-wizard__choice-grid--optional .ai-wizard__choice input:checked + .ai-wizard__choice-body {
  opacity: 1;
}

/* line 691, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard .ai-wizard__choice,
.ai-builder .ai-wizard__choice {
  display: block;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

/* line 698, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard .ai-wizard__choice[hidden],
.ai-builder .ai-wizard__choice[hidden] {
  display: none;
}

/* line 700, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard .ai-wizard__choice input,
.ai-builder .ai-wizard__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* line 709, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice--keep {
  margin-bottom: .75rem;
}

/* line 713, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__field-hint {
  margin: 0 0 .75rem;
  color: rgba(22, 22, 22, 0.55);
  font-size: .82rem;
  line-height: 1.4;
}

/* line 719, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__field-hint[hidden] {
  display: none;
}

/* line 722, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-body {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: .5rem;
  height: 100%;
  padding: 1.1rem;
  border: 1.5px solid rgba(22, 22, 22, 0.12);
  border-radius: .8rem;
  background: #fff;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

/* line 734, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-body::after {
  content: '\2713';
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #0f68d3;
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* line 754, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-body--inline {
  flex-flow: row nowrap;
  align-items: center;
  gap: .85rem;
}

/* line 760, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder .ai-wizard__choice-body--inline {
  align-content: flex-start;
  flex-wrap: wrap;
}

/* line 764, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder .ai-wizard__choice-body--inline .ai-wizard__choice-text {
  flex: 1 1 10rem;
}

/* line 769, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice:hover .ai-wizard__choice-body {
  border-color: rgba(15, 104, 211, 0.4);
}

/* line 773, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice input:checked + .ai-wizard__choice-body {
  border-color: #0f68d3;
  background: rgba(15, 104, 211, 0.05);
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.1);
}

/* line 778, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice input:checked + .ai-wizard__choice-body::after {
  opacity: 1;
  transform: scale(1);
}

/* line 784, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice input:focus-visible + .ai-wizard__choice-body {
  border-color: #0f68d3;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.25);
}

/* line 789, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-badge {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 1;
  padding: .22rem .5rem;
  border-radius: 1rem;
  background: #e23b4e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(226, 59, 78, 0.4);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 806, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-glyph {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .65rem;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

/* line 815, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-glyph svg {
  width: 1.45rem;
  height: 1.45rem;
}

/* line 821, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
}

/* line 828, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon img {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}

/* line 835, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon svg {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
}

/* line 841, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon--custom {
  color: #0f68d3;
}

/* line 845, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon--stack {
  position: relative;
  overflow: visible;
}

/* line 849, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon--stack img {
  position: absolute;
  width: 1.55rem;
  height: 1.55rem;
}

/* line 855, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon--stack img:nth-child(1) {
  top: .1rem;
  left: 0;
  z-index: 3;
}

/* line 861, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon--stack img:nth-child(2) {
  top: .7rem;
  left: .72rem;
  z-index: 2;
}

/* line 867, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-platform-icon--stack img:nth-child(3) {
  top: 1.3rem;
  left: 1.44rem;
  z-index: 1;
}

/* line 875, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-face {
  --choice-face-accent: #0f68d3;
  position: relative;
  display: block;
  flex: 0 0 4.6rem;
  width: 4.6rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .65rem;
  background: rgba(15, 104, 211, 0.1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--choice-face-accent) 38%, transparent), 0 0.55rem 1.25rem color-mix(in srgb, var(--choice-face-accent) 18%, transparent);
}

/* line 890, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* line 899, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--choice-face-accent) 0%, transparent) 38%, color-mix(in srgb, var(--choice-face-accent) 65%, transparent) 50%, color-mix(in srgb, var(--choice-face-accent) 0%, transparent) 62%, transparent 100%);
  background-size: 100% 220%;
  background-repeat: no-repeat;
  background-position: 0 -120%;
  mix-blend-mode: screen;
}

/* line 922, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice input:checked + .ai-wizard__choice-body .ai-wizard__choice-face::after {
  opacity: 1;
  animation: ai-choice-scan 2.2s ease-in-out infinite;
}

@keyframes ai-choice-scan {
  0% {
    background-position: 0 -120%;
  }
  100% {
    background-position: 0 120%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 938, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice input:checked + .ai-wizard__choice-body .ai-wizard__choice-face::after {
    animation: none;
    opacity: .4;
    background-position: 0 0;
  }
}

/* line 945, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-title {
  display: block;
  color: #161616;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

/* line 953, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-text {
  display: block;
  min-width: 0;
}

/* line 958, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__choice-desc {
  display: block;
  color: rgba(22, 22, 22, 0.55);
  font-size: .82rem;
  line-height: 1.4;
}

/* line 965, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .65rem;
  background: rgba(22, 22, 22, 0.04);
}

/* line 973, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 980, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb--chibi {
  background: linear-gradient(150deg, rgba(255, 143, 171, 0.26), rgba(255, 181, 107, 0.16));
}

/* line 981, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb--semi-realism {
  background: linear-gradient(150deg, rgba(106, 141, 255, 0.24), rgba(177, 139, 255, 0.16));
}

/* line 982, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb--anime {
  background: linear-gradient(150deg, rgba(123, 223, 242, 0.24), rgba(242, 181, 212, 0.18));
}

/* line 983, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb--3d-avatar {
  background: linear-gradient(150deg, rgba(248, 113, 113, 0.22), rgba(34, 211, 238, 0.18));
}

/* line 984, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__style-thumb--keep {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9) 0 12%, transparent 13%), linear-gradient(145deg, rgba(22, 160, 133, 0.22), rgba(255, 209, 102, 0.2) 48%, rgba(226, 59, 78, 0.16));
  color: #161616;
}

/* line 994, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art {
  position: relative;
  display: block;
  width: 64%;
  aspect-ratio: 1;
}

/* line 1001, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-card {
  position: absolute;
  inset: 10% 14% 16% 8%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: .85rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.72)), linear-gradient(145deg, rgba(22, 160, 133, 0.12), rgba(255, 209, 102, 0.16));
  box-shadow: 0 0.7rem 1.4rem rgba(22, 22, 22, 0.16), inset 0 0 0 1px rgba(22, 22, 22, 0.06);
  transform: rotate(-5deg);
}

/* line 1016, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-face {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 54%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: .6rem;
  background-color: rgba(255, 255, 255, 0.62);
  background-position: center;
  background-size: cover;
  box-shadow: 0 0.35rem 0.9rem rgba(22, 22, 22, 0.18), inset 0 0 0 1px rgba(22, 22, 22, 0.06);
  transform: translateX(-50%);
}

/* line 1034, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 1.5rem rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

/* line 1043, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-loop {
  position: absolute;
  right: 2%;
  bottom: 4%;
  display: grid;
  place-items: center;
  width: 38%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: #0f68d3;
  box-shadow: 0 0.5rem 1.1rem rgba(22, 22, 22, 0.16);
}

/* line 1057, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-loop svg {
  width: 58%;
  height: 58%;
}

/* line 1063, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-spark {
  position: absolute;
  width: .48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.22rem rgba(255, 255, 255, 0.34), 0 0.25rem 0.7rem rgba(22, 22, 22, 0.12);
}

/* line 1072, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-spark--one {
  right: 12%;
  top: 6%;
}

/* line 1077, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__keep-art-spark--two {
  left: 3%;
  bottom: 24%;
  width: .36rem;
}

/* line 1083, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tips {
  display: flex;
  flex-flow: column;
  gap: .9rem;
  margin: -.3rem 0 0;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .85rem;
  background: rgba(22, 22, 22, 0.025);
}

/* line 1093, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tips[hidden] {
  display: none;
}

/* line 1096, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tips-eyebrow {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: #0f68d3;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* line 1107, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tips-eyebrow svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

/* line 1114, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tips-intro {
  margin: -.45rem 0 0;
  color: rgba(22, 22, 22, 0.6);
  font-size: .85rem;
  line-height: 1.45;
}

/* line 1121, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tips-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

/* line 1127, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col {
  display: flex;
  flex-flow: column;
  gap: .6rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .7rem;
  background: #fff;
}

/* line 1137, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* line 1147, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col-title svg {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: .18rem;
  border-radius: 50%;
  flex: none;
  color: #fff;
}

/* line 1160, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col--good .ai-wizard__tip-col-title {
  color: #15803d;
}

/* line 1161, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col--good .ai-wizard__tip-col-title svg {
  background: #16a34a;
}

/* line 1165, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col--avoid .ai-wizard__tip-col-title {
  color: #b91c1c;
}

/* line 1166, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col--avoid .ai-wizard__tip-col-title svg {
  background: #dc2626;
}

/* line 1169, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-list {
  display: flex;
  flex-flow: column;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 1177, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-list li {
  position: relative;
  padding-left: 1.3rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: .83rem;
  line-height: 1.4;
}

/* line 1184, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}

/* line 1193, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col--good .ai-wizard__tip-list li::before {
  content: '\2713';
  color: #16a34a;
}

/* line 1198, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__tip-col--avoid .ai-wizard__tip-list li::before {
  content: '\2715';
  color: #dc2626;
}

/* line 1203, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

/* line 1208, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone.has-error .ai-wizard__drop-label {
  border-color: var(--form-error-color);
  background: var(--form-error-soft);
}

/* line 1213, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone.is-dragover .ai-wizard__drop-label, .ai-wizard__dropzone.is-dragover .ai-wizard__slot-add {
  border-color: rgba(15, 104, 211, 0.62);
  background: rgba(15, 104, 211, 0.08);
}

/* line 1219, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone.is-full .ai-wizard__drop-label {
  opacity: .45;
  pointer-events: none;
}

/* line 1225, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone--tile-grid {
  display: flex;
  flex-flow: column;
}

/* line 1230, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

/* line 1236, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot {
  overflow: hidden;
  min-height: 9.5rem;
  border-radius: .75rem;
}

/* line 1243, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone--tile-grid.is-reviewing .ai-wizard__preview {
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.35), 0 0.55rem 1.25rem rgba(15, 104, 211, 0.12);
}

/* line 1248, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone--tile-grid.is-reviewing .ai-wizard__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(15, 104, 211, 0) 36%, rgba(15, 104, 211, 0.48) 50%, rgba(15, 104, 211, 0) 64%, transparent 100%);
  background-size: 100% 220%;
  background-repeat: no-repeat;
  background-position: 0 -120%;
  mix-blend-mode: screen;
  animation: ai-choice-scan 1.7s ease-in-out infinite;
}

/* line 1270, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__dropzone--tile-grid.is-reviewing .ai-wizard__preview-remove {
  opacity: .45;
  pointer-events: none;
}

/* line 1276, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add {
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 2.35rem .8rem 1rem;
  border: 2px dashed rgba(22, 22, 22, 0.2);
  background: rgba(15, 104, 211, 0.03);
  color: #161616;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

/* line 1291, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add:hover, .ai-wizard__slot-add:focus-visible {
  border-color: rgba(15, 104, 211, 0.54);
  background: rgba(15, 104, 211, 0.07);
  outline: none;
  transform: translateY(-1px);
}

/* line 1300, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-status {
  position: absolute;
  top: .55rem;
  left: .55rem;
  padding: .22rem .45rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: rgba(22, 22, 22, 0.58);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* line 1314, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add:first-child .ai-wizard__slot-status {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1319, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add-icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .7rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1328, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* line 1334, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add-title {
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.2;
}

/* line 1340, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__slot-add-copy {
  max-width: 8.5rem;
  color: rgba(22, 22, 22, 0.5);
  font-size: .72rem;
  line-height: 1.3;
}

@media only screen and (max-width: 48rem) {
  /* line 1348, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 24rem) {
  /* line 1354, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__slot {
    min-height: 8.75rem;
  }
  /* line 1358, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__slot-add-title {
    font-size: .86rem;
  }
  /* line 1362, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__slot-add-copy {
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 1368, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__dropzone--tile-grid.is-reviewing .ai-wizard__preview::after {
    animation: none;
    background-position: 0 0;
  }
}

/* line 1374, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* line 1382, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-label {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: .55rem;
  padding: 2.25rem 1.5rem;
  border: 2px dashed rgba(22, 22, 22, 0.22);
  border-radius: .85rem;
  background: rgba(15, 104, 211, 0.03);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

/* line 1395, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-label:hover {
  border-color: rgba(15, 104, 211, 0.5);
  background: rgba(15, 104, 211, 0.06);
}

/* line 1401, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .7rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 1410, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* line 1416, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-title {
  color: #161616;
  font-size: 1rem;
  font-weight: 700;
}

/* line 1421, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-title span {
  color: #0f68d3;
}

/* line 1424, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-hint {
  max-width: 24rem;
  color: rgba(22, 22, 22, 0.58);
  font-size: .85rem;
  line-height: 1.45;
}

/* line 1431, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__drop-formats {
  color: rgba(22, 22, 22, 0.42);
  font-size: .76rem;
}

/* line 1436, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: .65rem;
}

/* line 1441, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__preview-grid:empty {
  display: none;
}

/* line 1444, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__preview {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .55rem;
  background-color: rgba(22, 22, 22, 0.04);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* line 1455, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__preview-remove {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.82);
  color: #fff;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}

/* line 1469, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__preview-remove svg {
  width: .8rem;
  height: .8rem;
}

/* line 1474, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__preview-remove:hover, .ai-wizard__preview-remove:focus-visible {
  background: #dc2626;
  transform: scale(1.08);
  outline: none;
}

/* line 1482, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__upload-count {
  margin: 0;
  color: rgba(22, 22, 22, 0.58);
  font-size: .82rem;
  font-weight: 600;
}

/* line 1489, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__review-status {
  margin: -.25rem 0 0;
  padding: .7rem .85rem;
  border-radius: .65rem;
  background: rgba(22, 22, 22, 0.05);
  color: rgba(22, 22, 22, 0.68);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 1499, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__review-status[data-state='pending'] {
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 1504, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__review-status[data-state='success'] {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

/* line 1509, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__review-status[data-state='error'] {
  background: var(--form-error-soft);
  color: var(--form-error-color);
}

/* line 1515, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent {
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

/* line 1520, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent.has-error .ai-wizard__consent-label {
  border-color: var(--form-error-color);
  background: var(--form-error-soft);
}

/* line 1526, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard .ai-wizard__consent-label,
.ai-builder .ai-wizard__consent-label {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 1px 1px;
  padding: .9rem 1rem;
  border: 1.5px solid rgba(22, 22, 22, 0.14);
  border-radius: .7rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

/* line 1539, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard .ai-wizard__consent-label:hover,
.ai-builder .ai-wizard__consent-label:hover {
  border-color: rgba(15, 104, 211, 0.4);
}

/* line 1542, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* line 1550, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-box {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 1.5px solid rgba(22, 22, 22, 0.3);
  border-radius: .4rem;
  background: #fff;
  color: #fff;
  transition: border-color 140ms ease, background 140ms ease;
}

/* line 1562, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-box svg {
  width: .85rem;
  height: .85rem;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 140ms ease, transform 140ms ease;
}

/* line 1571, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-input:checked + .ai-wizard__consent-box {
  border-color: #0f68d3;
  background: #0f68d3;
}

/* line 1575, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-input:checked + .ai-wizard__consent-box svg {
  opacity: 1;
  transform: scale(1);
}

/* line 1581, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-input:focus-visible + .ai-wizard__consent-box {
  border-color: #0f68d3;
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.22);
}

/* line 1586, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-text {
  color: rgba(22, 22, 22, 0.8);
  font-size: .85rem;
  line-height: 1.5;
}

/* line 1591, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-wizard__consent-text a {
  color: #0f68d3;
  font-weight: 700;
  text-decoration: underline;
}

/* line 1600, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-detail {
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}

/* line 1606, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-detail__back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .35rem;
  margin-bottom: -.25rem;
  padding: .4rem .75rem .4rem .55rem;
  border-radius: 0.5rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}

/* line 1620, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-detail__back svg {
  width: 1rem;
  height: 1rem;
}

/* line 1625, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-detail__back:hover, .ai-detail__back:focus {
  color: #0f68d3;
  background: rgba(15, 104, 211, 0.08);
  text-decoration: none;
}

/* line 1635, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tabs-shell {
  display: flex;
  flex-flow: column;
  gap: .9rem;
  width: 100%;
}

/* line 1642, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

/* line 1651, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .9rem;
  min-width: 0;
}

/* line 1659, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  width: 22rem;
  max-width: 100%;
}

/* line 1668, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage {
  display: grid;
  gap: .42rem;
  width: 100%;
  padding-left: 1rem;
  border-left: 1px solid rgba(22, 22, 22, 0.12);
}

/* line 1676, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__topline,
.ai-brand-usage__numbers {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

/* line 1684, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__label {
  color: rgba(22, 22, 22, 0.55);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* line 1692, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__link {
  color: rgba(15, 104, 211, 0.9);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

/* line 1700, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__link:hover, .ai-brand-usage__link:focus-visible {
  color: #0f68d3;
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* line 1710, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__primary {
  color: #161616;
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* line 1718, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__secondary {
  color: rgba(22, 22, 22, 0.54);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

/* line 1726, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__window {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.54);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1736, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__meter {
  position: relative;
  display: block;
  width: 100%;
  height: .32rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.08);
}

/* line 1746, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__meter-fill {
  display: block;
  width: var(--usage-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f68d3, #3b8af0);
}

/* line 1754, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__reset {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  width: 100%;
  min-height: 2rem;
  padding: .42rem .55rem;
  border: 0;
  border-radius: .5rem;
  background: #0f68d3;
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1.1;
  text-align: left;
  box-shadow: 0 10px 22px -14px rgba(15, 104, 211, 0.75);
}

/* line 1772, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__reset span {
  font-size: .72rem;
  font-weight: 700;
  opacity: .82;
}

/* line 1778, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__reset strong {
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

/* line 1784, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-usage__reset:hover, .ai-brand-usage__reset:focus-visible {
  background: #0d5ab6;
  outline: none;
}

/* line 1791, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.06), 0 14px 34px rgba(15, 104, 211, 0.18);
}

/* line 1803, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__mark svg {
  width: 2.55rem;
  height: 2.55rem;
  filter: drop-shadow(0 2px 2px rgba(15, 104, 211, 0.25));
}

/* line 1810, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__text {
  display: inline-flex;
  flex-flow: column;
  align-items: flex-start;
  gap: .3rem;
  min-width: 0;
}

/* line 1818, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__title-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  min-width: 0;
}

/* line 1826, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__title {
  color: #161616;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  background: linear-gradient(135deg, #161616 0%, #0f68d3 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 1838, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__badge {
  display: inline-grid;
  place-items: center;
  padding: .23rem .52rem;
  border-radius: .45rem;
  background: linear-gradient(135deg, #3b8af0, #0f68d3);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(15, 104, 211, 0.34);
}

/* line 1851, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__badge--compact {
  padding: .12rem .34rem;
  border-radius: .32rem;
  font-size: .58rem;
  box-shadow: 0 2px 5px rgba(15, 104, 211, 0.28);
}

/* line 1859, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__title--compact {
  display: inline-block;
  font-size: inherit;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  background: linear-gradient(135deg, #161616 0%, #0f68d3 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line 1871, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__inline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* line 1877, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-brand-logo__byline {
  color: rgba(22, 22, 22, 0.52);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}

/* line 1884, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  width: 100%;
  padding: .35rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 1rem;
  background: rgba(22, 22, 22, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* line 1897, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tabs__nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: .45rem;
  min-width: 0;
}

/* line 1905, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.75rem;
  min-width: 0;
  padding: .6rem .85rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

/* line 1926, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
}

/* line 1932, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab:hover, .ai-tab:focus {
  background: rgba(255, 255, 255, 0.72);
  color: #0f68d3;
  text-decoration: none;
}

/* line 1940, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab--active {
  border-color: rgba(15, 104, 211, 0.18);
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 8px 20px rgba(22, 22, 22, 0.06);
  color: #161616;
}

/* line 1949, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab--accent {
  color: #0f68d3;
}

/* line 1953, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab--accent.ai-tab--active {
  color: #0f68d3;
}

/* line 1957, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 1966, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-bar {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

/* line 1971, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-bar[hidden] {
  display: none;
}

/* line 1976, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-trigger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem .55rem .65rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 0.5rem;
  background: #fff;
  color: rgba(22, 22, 22, 0.72);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 8px 18px rgba(22, 22, 22, 0.05);
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

/* line 1998, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-trigger:hover, .ai-help-trigger:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(15, 104, 211, 0.35);
  color: #0f68d3;
  box-shadow: 0 2px 4px rgba(22, 22, 22, 0.05), 0 14px 26px rgba(15, 104, 211, 0.14);
  outline: none;
}

/* line 2010, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-trigger__icon {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 2019, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-trigger__icon svg {
  width: 1rem;
  height: 1rem;
}

/* line 2025, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-trigger__label {
  letter-spacing: .01em;
}

/* line 2029, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-trigger__hint {
  padding-left: .55rem;
  border-left: 1px solid rgba(22, 22, 22, 0.12);
  color: rgba(22, 22, 22, 0.5);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* line 2039, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(11, 18, 32, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition: background 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease, opacity 220ms ease;
}

/* line 2057, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal[hidden] {
  display: none;
}

/* line 2059, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal--open {
  opacity: 1;
  pointer-events: auto;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 2066, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__dialog {
  width: 100%;
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: 2rem 2rem 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  background-size: 3.25rem 3.25rem, 3.25rem 3.25rem, auto, auto;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.2, 0.9, 0.25, 1.05), opacity 220ms ease;
}

/* line 2077, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal--open .ai-help-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* line 2083, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-help-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-help-modal__close:hover, .ai-help-modal__close:focus-visible, .ai-help-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-help-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 2089, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 2091, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__close:hover, .ai-help-modal__close:focus-visible {
  color: #161616;
}

/* line 2097, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__head {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  margin-bottom: 1.6rem;
  padding: 0 1.5rem;
}

/* line 2107, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .14em;
}

/* line 2118, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__title {
  margin: 0;
  color: #161616;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  line-height: 1.18;
}

/* line 2123, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  gap: 1.4rem;
  position: relative;
}

/* line 2133, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: center;
  gap: 1.1rem;
  padding: .85rem 0;
  background: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 220ms ease, opacity 220ms ease;
}

/* line 2147, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal--open .ai-help-step {
  animation: ai-help-step-in 480ms cubic-bezier(0.2, 0.85, 0.3, 1.05) forwards;
  animation-delay: var(--ai-help-delay, 0ms);
}

/* line 2152, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(50% + 2rem);
  height: calc(.85rem + 1.4rem + .85rem);
  left: 2rem;
  width: 2px;
  background-image: linear-gradient(to bottom, rgba(15, 104, 211, 0.55) 0, rgba(15, 104, 211, 0.55) 5px, transparent 5px, transparent 10px);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  transform: translateX(-50%);
  pointer-events: none;
}

@keyframes ai-help-step-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* line 2178, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step__media {
  position: relative;
  width: 4rem;
  height: 4rem;
}

/* line 2184, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 1.1rem;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.35), transparent 55%), linear-gradient(135deg, #0f68d3, #398cf1);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 104, 211, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* line 2198, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step__icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

/* line 2204, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step__num {
  position: absolute;
  top: -.45rem;
  right: -.45rem;
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: #fff;
  color: #0f68d3;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(22, 22, 22, 0.1);
}

/* line 2224, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step__body {
  min-width: 0;
}

/* line 2228, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-step__title {
  margin: 0 0 .5rem;
  color: #161616;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.005em;
}

/* line 2237, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-legend {
  margin: 1rem 0 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .45rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: .78rem;
  line-height: 1.2;
}

/* line 2247, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-legend strong {
  color: #161616;
  font-weight: 700;
}

/* line 2253, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-legend__heading {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #0f68d3;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  margin-right: .15rem;
}

/* line 2265, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-legend__icon {
  width: .9rem;
  height: .9rem;
}

/* line 2270, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-legend__sep {
  color: rgba(22, 22, 22, 0.35);
}

/* line 2274, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-substeps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .4rem;
}

/* line 2283, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-substep {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem .3rem .45rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.08);
  color: rgba(22, 22, 22, 0.82);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* line 2297, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-substep__check {
  flex: 0 0 auto;
  width: .8rem;
  height: .8rem;
  color: #0f68d3;
}

/* line 2304, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__foot {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

/* line 2310, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  gap: .5rem;
  padding: 0 1.5rem;
  font-size: .92rem;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-help-modal__cta:hover, .ai-help-modal__cta:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 2316, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 180ms ease;
}

/* line 2324, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-help-modal__cta:hover svg, .ai-help-modal__cta:focus-visible svg {
  transform: translateX(3px);
}

@media only screen and (max-width: 32rem) {
  /* line 2329, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-bar {
    justify-content: stretch;
  }
  /* line 2333, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-trigger {
    width: 100%;
    justify-content: center;
  }
  /* line 2338, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-trigger__hint {
    display: none;
  }
  /* line 2342, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-modal {
    padding: 0;
    align-items: flex-end;
  }
  /* line 2347, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.6rem 1.1rem 1.1rem;
    transform: translateY(40px);
  }
  /* line 2354, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-modal--open .ai-help-modal__dialog {
    transform: translateY(0);
  }
  /* line 2359, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-modal__head {
    padding: 0 .5rem;
  }
  /* line 2363, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-modal__title {
    font-size: 1.3rem;
  }
  /* line 2367, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-step {
    grid-template-columns: 3.2rem 1fr;
    gap: .85rem;
    padding: .65rem 0;
  }
  /* line 2372, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-step:not(:last-child)::after {
    top: calc(50% + 1.6rem);
    height: calc(.65rem + 1.4rem + .65rem);
    left: 1.6rem;
  }
  /* line 2379, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-step__media {
    width: 3.2rem;
    height: 3.2rem;
  }
  /* line 2384, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-step__icon {
    border-radius: .9rem;
  }
  /* line 2387, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-step__icon svg {
    width: 1.4rem;
    height: 1.4rem;
  }
  /* line 2390, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-help-step__title {
    font-size: .98rem;
  }
}

/* line 2395, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-credit-cost {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .55rem;
  padding: .15rem .5rem .15rem .4rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

/* line 2411, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-credit-cost__icon {
  width: .85rem;
  height: .85rem;
  flex-shrink: 0;
}

/* line 2417, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__button .ai-credit-cost,
.button--primary .ai-credit-cost,
.button--dark .ai-credit-cost {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}

/* line 2424, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-credit-cost[hidden] {
  display: none;
}

/* line 2428, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-credit-cost--quota-trigger {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* line 2436, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-gallery {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
}

/* line 2442, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes {
  display: grid;
  grid-template-columns: minmax(15rem, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.09), rgba(255, 255, 255, 0.98) 52%), #fff;
}

/* line 2455, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__preview {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: .35rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* line 2463, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__track {
  display: flex;
  gap: .75rem;
  width: max-content;
  animation: ai-sample-emotes-slide 60s linear infinite;
}

/* line 2470, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__item {
  display: grid;
  place-items: center;
  flex: 0 0 5.4rem;
  width: 5.4rem;
  height: 5.4rem;
  padding: .38rem;
  border: 1px solid rgba(15, 104, 211, 0.1);
  border-radius: .95rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.5)), rgba(15, 104, 211, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* line 2485, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.45rem 0.8rem rgba(22, 22, 22, 0.14));
}

/* line 2493, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__body {
  min-width: 0;
}

/* line 2497, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__eyebrow {
  margin: 0 0 .28rem;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 2507, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__title {
  margin: 0;
  color: #161616;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.18;
}

/* line 2515, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__text {
  max-width: 29rem;
  margin: .35rem 0 0;
  color: rgba(22, 22, 22, 0.62);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
}

/* line 2524, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__action {
  display: flex;
  justify-content: flex-end;
}

/* line 2529, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__cta {
  min-height: 2.8rem;
  padding: .85rem 1.15rem;
  font-weight: 900;
  white-space: nowrap;
}

/* line 2535, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-sample-emotes__cta svg {
  width: 1rem;
  height: 1rem;
}

@keyframes ai-sample-emotes-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - .375rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 2547, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__track {
    animation-duration: 140s;
  }
}

/* line 2552, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.05rem 1.4rem;
  align-items: center;
  padding: 1.15rem 1.25rem 1.2rem;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.08), rgba(255, 255, 255, 0.96) 54%), #fff;
}

/* line 2564, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__main {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

/* line 2571, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(15, 104, 211, 0.12);
  border-radius: .85rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(15, 104, 211, 0.12)), rgba(15, 104, 211, 0.08);
  color: #0f68d3;
  overflow: hidden;
}

/* line 2586, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__icon--failed {
  border-color: rgba(220, 38, 38, 0.16);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(220, 38, 38, 0.12)), rgba(220, 38, 38, 0.08);
  color: #dc2626;
}

/* line 2593, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__icon--failed svg {
  width: 1.65rem;
  height: 1.65rem;
}

/* line 2598, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__icon--failed path,
.ai-emote-generation-status__icon--failed circle {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* line 2607, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__sparkle {
  width: 1.65rem;
  height: 1.65rem;
  filter: drop-shadow(0 0.22rem 0.42rem rgba(15, 104, 211, 0.18));
}

/* line 2612, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__sparkle path {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

/* line 2618, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__sparkle path:first-child {
  animation: ai-status-sparkle-main 2.4s ease-in-out infinite;
}

/* line 2622, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__sparkle path:nth-child(2),
.ai-emote-generation-status__sparkle path:nth-child(3) {
  opacity: .82;
  animation: ai-status-sparkle-twinkle 1.9s ease-in-out infinite;
}

/* line 2628, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__sparkle path:nth-child(3) {
  animation-delay: .45s;
}

@keyframes ai-status-sparkle-main {
  0%, 100% {
    transform: scale(0.95) rotate(0deg);
    opacity: .82;
  }
  50% {
    transform: scale(1.08) rotate(6deg);
    opacity: 1;
  }
}

@keyframes ai-status-sparkle-twinkle {
  0%, 100% {
    transform: scale(0.72);
    opacity: .45;
  }
  50% {
    transform: scale(1.05);
    opacity: .9;
  }
}

/* line 2643, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__copy {
  min-width: 0;
}

/* line 2647, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__title {
  margin: 0;
  color: #161616;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

/* line 2655, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__text {
  margin: .18rem 0 0;
  color: rgba(22, 22, 22, 0.62);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
}

/* line 2663, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__reason {
  margin: .38rem 0 0;
  color: rgba(220, 38, 38, 0.82);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 2671, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  min-width: 9rem;
}

/* line 2677, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__actions form {
  margin: 0;
}

/* line 2682, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  white-space: nowrap;
}

/* line 2689, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__action svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
}

/* line 2697, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__action--danger {
  border: 1px solid rgba(220, 38, 38, 0.18);
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

/* line 2702, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__action--danger:hover {
  background: rgba(220, 38, 38, 0.16);
  color: #991b1b;
}

/* line 2708, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__steps {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  justify-self: end;
}

/* line 2715, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__step {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .6rem;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(22, 22, 22, 0.52);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* line 2730, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__step-dot {
  width: .46rem;
  height: .46rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.22);
}

/* line 2737, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__step.is-active {
  border-color: rgba(15, 104, 211, 0.24);
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

/* line 2742, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__step.is-active .ai-emote-generation-status__step-dot {
  background: #0f68d3;
  animation: ai-emote-tile-pulse 1.1s ease-in-out infinite;
}

/* line 2748, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__step.is-done {
  color: rgba(22, 22, 22, 0.72);
}

/* line 2751, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__step.is-done .ai-emote-generation-status__step-dot {
  background: #16a34a;
}

/* line 2756, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__progress {
  grid-column: 1 / -1;
  display: grid;
  gap: .6rem;
  padding-top: .1rem;
}

/* line 2762, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__progress .ai-card__progress-row {
  justify-content: flex-start;
  gap: .8rem;
}

/* line 2767, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-generation-status__progress .ai-progress {
  height: .5rem;
  background: rgba(15, 104, 211, 0.11);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.04);
}

/* line 2774, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: calc(100vw - 2rem);
  max-width: 23rem;
  pointer-events: none;
}

/* line 2787, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini[hidden] {
  display: none;
}

/* line 2791, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
  width: 100%;
  padding: .85rem;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: .9rem;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.1), rgba(255, 255, 255, 0.98) 58%), #fff;
  box-shadow: 0 0.25rem 0.85rem rgba(22, 22, 22, 0.08), 0 1.1rem 2.4rem rgba(15, 104, 211, 0.16);
  color: #161616;
  text-decoration: none;
  pointer-events: auto;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* line 2811, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card:hover, .ai-generation-mini-card:focus-visible {
  border-color: rgba(15, 104, 211, 0.36);
  box-shadow: 0 0.3rem 1rem rgba(22, 22, 22, 0.09), 0 1.25rem 2.8rem rgba(15, 104, 211, 0.2);
  text-decoration: none;
  transform: translateY(-2px);
}

/* line 2821, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card:focus-visible {
  outline: 3px solid rgba(15, 104, 211, 0.24);
  outline-offset: 3px;
}

/* line 2826, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card .ai-progress {
  height: .42rem;
  background: rgba(15, 104, 211, 0.12);
}

/* line 2832, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--with-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* line 2836, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* line 2845, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__link:hover, .ai-generation-mini-card__link:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* line 2851, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__link:focus-visible {
  outline: 3px solid rgba(15, 104, 211, 0.24);
  outline-offset: 3px;
}

/* line 2857, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__notify {
  align-self: center;
  min-height: 2.35rem;
  padding: 0 .85rem;
  border: 1px solid rgba(15, 104, 211, 0.2);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.86);
  color: #0f68d3;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0.4rem 1rem rgba(15, 104, 211, 0.12);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

/* line 2873, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__notify:hover, .ai-generation-mini-card__notify:focus-visible {
  border-color: rgba(15, 104, 211, 0.42);
  background: #fff;
  transform: translateY(-1px);
}

/* line 2880, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__notify:focus-visible {
  outline: 3px solid rgba(15, 104, 211, 0.24);
  outline-offset: 3px;
}

/* line 2886, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete {
  border-color: rgba(21, 164, 106, 0.34);
  background: linear-gradient(135deg, rgba(21, 164, 106, 0.14), rgba(255, 255, 255, 0.98) 54%), radial-gradient(circle at 93% 12%, rgba(15, 104, 211, 0.13), transparent 34%), #fff;
  box-shadow: 0 0.25rem 0.9rem rgba(22, 22, 22, 0.08), 0 1.15rem 2.55rem rgba(21, 164, 106, 0.2);
}

/* line 2896, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete:hover, .ai-generation-mini-card--complete:focus-visible {
  border-color: rgba(21, 164, 106, 0.52);
  box-shadow: 0 0.32rem 1.05rem rgba(22, 22, 22, 0.09), 0 1.3rem 2.9rem rgba(21, 164, 106, 0.24);
}

/* line 2904, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete .ai-generation-mini-card__icon {
  background: linear-gradient(135deg, rgba(21, 164, 106, 0.98), rgba(32, 197, 126, 0.9)), #15a46a;
  color: #fff;
}

/* line 2910, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete .ai-generation-mini-card__icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
  animation: none;
}

/* line 2920, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete .ai-generation-mini-card__title {
  color: #126445;
}

/* line 2924, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete .ai-generation-mini-card__count {
  background: rgba(21, 164, 106, 0.12);
  color: #147a52;
}

/* line 2929, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete .ai-progress {
  background: rgba(21, 164, 106, 0.12);
}

/* line 2933, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card--complete .ai-progress__fill {
  background: linear-gradient(90deg, #15a46a, #20c57e);
}

/* line 2938, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  overflow: hidden;
}

/* line 2948, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__icon svg {
  width: 1.55rem;
  height: 1.55rem;
  filter: drop-shadow(0 0.18rem 0.35rem rgba(15, 104, 211, 0.18));
}

/* line 2954, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__icon path {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

/* line 2960, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__icon path:first-child {
  animation: ai-status-sparkle-main 2.4s ease-in-out infinite;
}

/* line 2964, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__icon path:nth-child(2) {
  opacity: .82;
  animation: ai-status-sparkle-twinkle 1.9s ease-in-out infinite;
}

/* line 2970, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__body {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

/* line 2976, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__top,
.ai-generation-mini-card__metrics,
.ai-generation-mini-card__numbers {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* line 2984, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__top {
  justify-content: space-between;
  gap: .75rem;
}

/* line 2989, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__title {
  overflow: hidden;
  color: #161616;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 2999, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__count {
  flex: 0 0 auto;
  padding: .25rem .45rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: rgba(22, 22, 22, 0.62);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}

/* line 3010, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__progress {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

/* line 3016, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__metrics {
  justify-content: space-between;
  gap: .65rem;
  color: rgba(22, 22, 22, 0.58);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.2;
}

/* line 3024, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__metrics > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 3032, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__numbers {
  flex: 0 0 auto;
  gap: .45rem;
  color: rgba(22, 22, 22, 0.62);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* line 3040, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__ready-label {
  flex: 0 0 auto;
  padding: .22rem .42rem;
  border-radius: 999px;
  background: rgba(21, 164, 106, 0.11);
  color: #147a52;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

/* line 3052, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__remaining {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(22, 22, 22, 0.48);
  font-size: .7rem;
  font-weight: 750;
}

/* line 3060, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-generation-mini-card__remaining::before {
  content: '';
  width: .22rem;
  height: .22rem;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.26);
}

/* line 3069, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem;
}

/* line 3075, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-gallery__sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* line 3081, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-gallery__loading {
  display: flex;
  justify-content: center;
  padding: 1rem;
  color: rgba(22, 22, 22, 0.62);
  font-size: .85rem;
  font-weight: 700;
}

/* line 3090, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  margin: 0;
  background: #fff;
}

/* line 3099, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile--actions-open {
  overflow: visible;
}

/* line 3103, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  color: #161616;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* line 3112, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile:hover, .ai-emote-create-tile:focus {
  transform: translateY(-3px);
  border-color: rgba(15, 104, 211, 0.34);
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.05), 0 20px 40px rgba(15, 104, 211, 0.14);
  color: #161616;
  text-decoration: none;
}

/* line 3124, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgba(15, 104, 211, 0.2), transparent 36%), linear-gradient(150deg, rgba(15, 104, 211, 0.13), rgba(22, 22, 22, 0.025));
}

/* line 3135, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__spark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.7rem;
  height: 4.7rem;
  border-radius: 1.2rem;
  background: #fff;
  color: #0f68d3;
  box-shadow: 0 12px 30px rgba(15, 104, 211, 0.18), inset 0 0 0 1px rgba(15, 104, 211, 0.12);
}

/* line 3149, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__spark svg {
  width: 2rem;
  height: 2rem;
}

/* line 3155, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__frames {
  position: absolute;
  inset: 1.05rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  opacity: .62;
}

/* line 3163, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__frames span {
  border-radius: .8rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.38)), rgba(15, 104, 211, 0.12);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.1);
}

/* line 3170, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__frames span:nth-child(1) {
  transform: rotate(-5deg);
}

/* line 3171, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__frames span:nth-child(2) {
  transform: rotate(4deg);
}

/* line 3172, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__frames span:nth-child(3) {
  transform: rotate(3deg);
}

/* line 3173, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__frames span:nth-child(4) {
  transform: rotate(-4deg);
}

/* line 3177, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__body {
  display: flex;
  flex-flow: column;
  gap: .3rem;
  padding: .95rem;
}

/* line 3184, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__title {
  color: #0f68d3;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 3191, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-create-tile__text {
  color: rgba(22, 22, 22, 0.58);
  font-size: .84rem;
  line-height: 1.35;
}

/* line 3197, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile--failed {
  border-color: rgba(220, 38, 38, 0.2);
}

/* line 3201, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(45deg, rgba(22, 22, 22, 0.035) 25%, transparent 25%, transparent 75%, rgba(22, 22, 22, 0.035) 75%), linear-gradient(45deg, rgba(22, 22, 22, 0.035) 25%, transparent 25%, transparent 75%, rgba(22, 22, 22, 0.035) 75%), #fbfbfc;
  background-size: 1.4rem 1.4rem;
  background-position: 0 0, .7rem .7rem;
}

/* line 3214, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 3220, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0), rgba(22, 22, 22, 0.38));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* line 3232, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile:hover .ai-emote-tile__media::after,
.ai-emote-tile:focus-within .ai-emote-tile__media::after {
  opacity: 1;
}

/* line 3237, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__mobile-trigger {
  display: none;
}

/* line 3241, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__loading,
.ai-emote-tile__error,
.ai-emote-tile__placeholder {
  display: grid;
  place-items: center;
  gap: .7rem;
  color: rgba(22, 22, 22, 0.55);
  font-weight: 700;
  text-align: center;
}

/* line 3252, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__loading-text {
  color: #0f68d3;
  font-size: .86rem;
}

/* line 3257, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__generation-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  gap: .75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.72);
  color: #161616;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  backdrop-filter: blur(7px);
}

/* line 3276, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__error {
  color: #dc2626;
}

/* line 3279, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__error svg {
  width: 2rem;
  height: 2rem;
}

/* line 3285, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__placeholder {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  background: rgba(22, 22, 22, 0.08);
}

/* line 3292, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__body {
  display: flex;
  flex-flow: column;
  gap: .55rem;
  padding: .95rem;
}

/* line 3299, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

/* line 3306, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #161616;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 3317, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__name {
  display: flex;
  flex-flow: column;
  min-width: 0;
}

/* line 3323, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__error-text {
  margin: -.25rem 0 0;
  color: #991b1b;
  font-size: .82rem;
  line-height: 1.4;
}

/* line 3330, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__status-badge {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: calc(100% - 1.1rem);
  padding: .25rem .55rem .25rem .45rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.08), 0 8px 18px rgba(22, 22, 22, 0.18);
  backdrop-filter: blur(14px);
  color: rgba(22, 22, 22, 0.82);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 3356, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__status-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #0f68d3;
  animation: ai-emote-tile-pulse 1.1s ease-in-out infinite;
}

@keyframes ai-emote-tile-pulse {
  0%, 100% {
    opacity: .35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* line 3369, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__actions {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .25rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.06), 0 10px 24px rgba(22, 22, 22, 0.18);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(0.4rem) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 160ms ease, transform 160ms ease;
}

/* line 3391, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile:hover .ai-emote-tile__actions,
.ai-emote-tile:focus-within .ai-emote-tile__actions {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* line 3397, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn-form {
  display: inline-flex;
  margin: 0;
}

/* line 3402, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(22, 22, 22, 0.68);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

/* line 3419, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 3424, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* line 3437, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn:hover, .ai-emote-tile__btn:focus {
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  text-decoration: none;
}

/* line 3444, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn:active {
  transform: scale(0.94);
}

/* line 3449, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn-cost {
  position: absolute !important;
  top: -.25rem;
  right: -.25rem;
  display: inline-flex !important;
  align-items: center;
  gap: .15rem;
  width: auto !important;
  height: auto !important;
  padding: .1rem .32rem .1rem .25rem !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #0f68d3 !important;
  color: #fff !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

/* line 3471, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn-cost svg {
  width: .65rem;
  height: .65rem;
  flex-shrink: 0;
}

/* line 3478, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn--primary {
  background: #0f68d3;
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 104, 211, 0.25), 0 6px 14px rgba(15, 104, 211, 0.32);
}

/* line 3485, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn--primary:hover, .ai-emote-tile__btn--primary:focus {
  background: #0d5ab6;
  color: #fff;
}

/* line 3492, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn--ghost:hover,
.ai-emote-tile__btn--ghost:focus {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

/* line 3498, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__btn--loading {
  cursor: progress;
  pointer-events: none;
}

/* line 3503, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__spinner {
  width: 1.05rem;
  height: 1.05rem;
  animation: ai-emote-tile-spin 900ms linear infinite;
}

@keyframes ai-emote-tile-spin {
  to {
    transform: rotate(360deg);
  }
}

/* line 3513, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__versions {
  display: flex;
  gap: .5rem;
  min-width: 0;
  padding: .65rem .8rem .75rem;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* line 3523, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__versions::-webkit-scrollbar {
  display: none;
}

/* line 3528, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version-form {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* line 3536, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: .7rem;
  background: #f6f6f8;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.05);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* line 3556, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .2rem;
  box-sizing: border-box;
}

/* line 3565, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version:hover, .ai-emote-tile__version:focus {
  border-color: rgba(15, 104, 211, 0.45);
  box-shadow: 0 6px 14px rgba(15, 104, 211, 0.14);
  transform: translateY(-1px);
  outline: none;
}

/* line 3573, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version.is-active {
  border-color: #0f68d3;
  box-shadow: 0 0 0 2px rgba(15, 104, 211, 0.18);
  cursor: default;
  transform: none;
}

/* line 3581, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version-index {
  position: absolute;
  top: .15rem;
  left: .15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: .95rem;
  height: .95rem;
  padding: 0 .25rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.82);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* line 3602, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-tile__version.is-active .ai-emote-tile__version-index {
  background: #0f68d3;
}

/* line 3606, app/assets/stylesheets/partials/_ai_characters.scss */
body.ai-emote-crop-open {
  overflow: hidden;
}

/* line 3610, app/assets/stylesheets/partials/_ai_characters.scss */
body.ai-emote-actions-open {
  overflow: hidden;
}

/* line 3614, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* line 3625, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* line 3631, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 3637, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 1rem);
  padding: 1rem;
  border-radius: 1rem 1rem 0 0;
  background: #fff;
  box-shadow: 0 -18px 48px rgba(22, 22, 22, 0.2);
  transform: translateY(100%);
  transition: transform 180ms ease;
}

/* line 3651, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal.is-open .ai-emote-actions-modal__dialog {
  transform: translateY(0);
}

/* line 3655, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .1rem .1rem 1rem;
}

/* line 3663, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

/* line 3668, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__title {
  margin: 0;
  color: #161616;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 3675, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__close {
  flex: 0 0 auto;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-actions-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-actions-modal__close:hover, .ai-emote-actions-modal__close:focus-visible, .ai-emote-actions-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-actions-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 3681, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal__actions {
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

/* line 3686, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  padding: 0 0 .25rem;
  padding-bottom: calc(.25rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  backdrop-filter: none;
}

/* line 3702, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__btn-form {
  display: block;
  width: 100%;
}

/* line 3707, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__btn {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .55rem;
  width: 100%;
  height: 3.25rem;
  padding: .75rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .7rem;
  background: rgba(22, 22, 22, 0.035);
  color: #161616;
  text-align: left;
}

/* line 3720, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__btn::after {
  content: attr(title);
  min-width: 0;
  overflow: hidden;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 3731, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* line 3737, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__btn--primary {
  border-color: #0f68d3;
  background: #0f68d3;
  color: #fff;
}

/* line 3743, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-actions-modal .ai-emote-tile__btn--ghost {
  border-color: rgba(220, 38, 38, 0.14);
  color: #dc2626;
}

/* line 3748, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* line 3759, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* line 3765, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 3771, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 40rem;
  padding: 0;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  width: fit-content;
  transform: translateY(0.6rem) scale(0.98);
  transition: transform 180ms ease;
}

/* line 3782, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop.is-open .ai-emote-crop__dialog {
  transform: translateY(0) scale(1);
}

/* line 3786, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem .8rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.08);
}

/* line 3795, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__title-block {
  min-width: 0;
}

/* line 3799, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

/* line 3804, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__title {
  margin: 0;
  color: #161616;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 3811, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__close,
.ai-emote-crop__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-crop__close svg,
.ai-emote-crop__tool svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-crop__close:hover, .ai-emote-crop__close:focus-visible, .ai-emote-crop__close:active,
.ai-emote-crop__tool:hover,
.ai-emote-crop__tool:focus-visible,
.ai-emote-crop__tool:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-crop__close:focus-visible,
.ai-emote-crop__tool:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 3823, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__close:hover, .ai-emote-crop__close:focus,
.ai-emote-crop__tool:hover,
.ai-emote-crop__tool:focus {
  color: #0f68d3;
}

/* line 3828, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__close:active,
.ai-emote-crop__tool:active {
  transform: scale(0.94);
}

/* line 3833, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__close {
  line-height: 1;
}

/* line 3837, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__tool svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 3842, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
}

/* line 3850, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__stage {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 1rem;
  background: #fff;
}

/* line 3858, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__workspace {
  display: grid;
  grid-template-columns: minmax(0, max-content) 9rem;
  align-items: start;
  justify-content: center;
  gap: 1rem;
  min-height: 0;
  max-width: 100%;
}

/* line 3868, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__editor {
  display: grid;
  place-items: center;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 0;
  background: transparent;
}

/* line 3882, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__image {
  display: block;
  max-width: 100%;
  max-height: 58vh;
}

/* line 3888, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__side {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  padding: .85rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 10px 24px rgba(22, 22, 22, 0.06);
}

/* line 3903, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__preview-card {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: .45rem;
}

/* line 3910, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__preview-shell {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px !important;
  min-width: 48px;
  max-width: 48px;
  height: 48px !important;
  min-height: 48px;
  max-height: 48px;
  border-radius: 0;
  box-shadow: none;
}

/* line 3924, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__preview {
  flex: 0 0 48px;
  width: 48px !important;
  min-width: 48px;
  max-width: 48px;
  height: 48px !important;
  min-height: 48px;
  max-height: 48px;
  overflow: hidden;
  background: linear-gradient(45deg, rgba(22, 22, 22, 0.08) 25%, transparent 25%, transparent 75%, rgba(22, 22, 22, 0.08) 75%), linear-gradient(45deg, rgba(22, 22, 22, 0.08) 25%, transparent 25%, transparent 75%, rgba(22, 22, 22, 0.08) 75%), #f7f7f9;
  background-size: .7rem .7rem;
  background-position: 0 0, .35rem .35rem;
}

/* line 3941, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__preview-size {
  color: rgba(22, 22, 22, 0.54);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}

/* line 3948, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-container {
  max-width: 100%;
  background: transparent;
}

/* line 3953, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-container,
.ai-emote-crop .cropper-canvas,
.ai-emote-crop .cropper-wrap-box,
.ai-emote-crop .cropper-drag-box,
.ai-emote-crop .cropper-crop-box,
.ai-emote-crop .cropper-view-box,
.ai-emote-crop .cropper-face,
.ai-emote-crop .cropper-modal,
.ai-emote-crop .cropper-canvas img,
.ai-emote-crop .cropper-view-box img,
.ai-emote-crop__editor,
.ai-emote-crop__preview-shell,
.ai-emote-crop__preview,
.ai-emote-crop__preview img {
  border-radius: 0 !important;
}

/* line 3970, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-canvas {
  background: linear-gradient(45deg, rgba(22, 22, 22, 0.06) 25%, transparent 25%, transparent 75%, rgba(22, 22, 22, 0.06) 75%), linear-gradient(45deg, rgba(22, 22, 22, 0.06) 25%, transparent 25%, transparent 75%, rgba(22, 22, 22, 0.06) 75%), #fbfbfc;
  background-size: 1.1rem 1.1rem;
  background-position: 0 0, .55rem .55rem;
}

/* line 3979, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-modal {
  opacity: 0;
}

/* line 3983, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-face {
  background: transparent;
  opacity: 0;
}

/* line 3988, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-view-box {
  outline-color: #0f68d3;
}

/* line 3992, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line,
.ai-emote-crop .cropper-point {
  background-color: #0f68d3;
}

/* line 3997, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line.line-e,
.ai-emote-crop .cropper-line.line-w {
  width: .55rem;
}

/* line 4002, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line.line-n,
.ai-emote-crop .cropper-line.line-s {
  height: .55rem;
}

/* line 4007, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line.line-e {
  right: -.28rem;
}

/* line 4008, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line.line-w {
  left: -.28rem;
}

/* line 4009, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line.line-n {
  top: -.28rem;
}

/* line 4010, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-line.line-s {
  bottom: -.28rem;
}

/* line 4012, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point {
  width: .85rem;
  height: .85rem;
  opacity: .95;
}

/* line 4018, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-e,
.ai-emote-crop .cropper-point.point-w {
  margin-top: -.42rem;
}

/* line 4023, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-n,
.ai-emote-crop .cropper-point.point-s {
  margin-left: -.42rem;
}

/* line 4028, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-e {
  right: -.42rem;
}

/* line 4029, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-w {
  left: -.42rem;
}

/* line 4030, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-n {
  top: -.42rem;
}

/* line 4031, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-s {
  bottom: -.42rem;
}

/* line 4032, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-ne {
  right: -.42rem;
  top: -.42rem;
}

/* line 4033, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-nw {
  left: -.42rem;
  top: -.42rem;
}

/* line 4034, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-se {
  right: -.42rem;
  bottom: -.42rem;
}

/* line 4035, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop .cropper-point.point-sw {
  left: -.42rem;
  bottom: -.42rem;
}

/* line 4037, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: .4rem;
  width: 100%;
}

/* line 4045, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  padding: .9rem 1rem 1rem;
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  background: #fff;
}

/* line 4054, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__cancel,
.ai-emote-crop__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  min-height: 2.65rem;
  padding: .75rem 1.15rem;
  font-size: .9rem;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-crop__cancel:hover, .ai-emote-crop__cancel:focus-visible,
.ai-emote-crop__save:hover,
.ai-emote-crop__save:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 4062, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
  color: rgba(22, 22, 22, 0.78);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.14);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  min-height: 2.65rem;
  padding: .75rem 1.15rem;
  font-size: .9rem;
}

/* line 154, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-crop__cancel:hover, .ai-emote-crop__cancel:focus-visible {
  background: #f8fbff;
  color: #161616;
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.24), 0 0.8rem 1.4rem rgba(15, 23, 42, 0.08);
}

/* line 4068, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__cancel:hover, .ai-emote-crop__cancel:focus {
  color: #161616;
}

/* line 4075, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__save:disabled {
  cursor: progress;
  opacity: .68;
  transform: none;
}

/* line 4082, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-crop__cancel:active,
.ai-emote-crop__save:active {
  transform: scale(0.98);
}

@media only screen and (max-width: 32rem) {
  /* line 4088, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop {
    align-items: stretch;
    padding: .55rem;
  }
  /* line 4093, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__dialog {
    width: 100%;
    max-height: calc(100vh - 1.1rem);
    border-radius: .85rem;
  }
  /* line 4099, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__head {
    padding: .85rem .85rem .7rem;
  }
  /* line 4103, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__title {
    font-size: 1rem;
  }
  /* line 4107, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__stage {
    padding: .65rem;
  }
  /* line 4111, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: .7rem;
  }
  /* line 4116, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__image {
    max-height: 48vh;
  }
  /* line 4120, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__side {
    flex-flow: row;
    justify-content: space-between;
    padding: .65rem;
  }
  /* line 4126, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__preview-card {
    flex-flow: row;
  }
  /* line 4130, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__preview-shell {
    width: 48px !important;
    height: 48px !important;
  }
  /* line 4135, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__toolbar {
    width: auto;
  }
  /* line 4139, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__actions {
    align-items: stretch;
    flex-flow: column-reverse;
    padding: .85rem;
  }
  /* line 4144, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-crop__actions .ai-emote-crop__cancel,
.ai-emote-crop__actions .ai-emote-crop__save {
    width: 100%;
  }
}

/* line 4153, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder {
  display: block;
  width: 100%;
  min-width: 0;
}

/* line 4158, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder .form-error-summary {
  margin-bottom: 1.2rem;
}

/* line 4163, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__title {
  margin: 0;
  color: #161616;
}

/* line 4168, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder__flow {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  min-width: 0;
}

/* line 4175, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: .65rem 1rem;
  min-width: 0;
  scroll-margin-top: calc(5.75rem + 1.25rem);
  animation: ai-builder-step-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: opacity 180ms ease;
}

/* line 4186, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[hidden] {
  display: none;
}

/* line 4191, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[data-step-index="0"] {
  animation-delay: 0ms;
}

/* line 4192, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[data-step-index="1"] {
  animation-delay: 70ms;
}

/* line 4193, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[data-step-index="2"] {
  animation-delay: 140ms;
}

/* line 4194, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[data-step-index="3"] {
  animation-delay: 210ms;
}

/* line 4195, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[data-step-index="4"] {
  animation-delay: 280ms;
}

/* line 4196, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step[data-step-index="5"] {
  animation-delay: 350ms;
}

/* line 4198, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__rail {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding-top: .05rem;
}

/* line 4207, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__rail::after {
  content: '';
  position: absolute;
  top: 3rem;
  bottom: -1.25rem;
  width: 2px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.1);
}

/* line 4218, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step--last .ai-builder-step__rail::after {
  content: none;
}

/* line 4222, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .8rem;
  background: #0f68d3;
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 104, 211, 0.2);
  font-size: .95rem;
  font-weight: 900;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* line 4238, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding: .05rem 0 .1rem;
}

/* line 4249, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__copy {
  display: flex;
  flex-flow: column;
  gap: .28rem;
  min-width: 0;
}

/* line 4256, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__body {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: 1fr;
  min-width: 0;
  overflow: hidden;
  padding: 1.2rem;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.035), 0 10px 26px rgba(22, 22, 22, 0.045);
  transform-origin: top;
  transition: grid-template-rows 360ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 260ms ease, opacity 220ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease, box-shadow 220ms ease;
}

/* line 4280, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__panel {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  min-height: 0;
  min-width: 0;
}

/* line 4288, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
}

/* line 4295, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__skip-button:hover, .ai-builder-step__skip-button:focus-visible {
  text-decoration: none;
}

/* line 4301, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__title {
  font-size: 1.28rem;
  line-height: 1.2;
}

/* line 4306, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__text {
  margin: 0;
  color: rgba(22, 22, 22, 0.58);
  font-size: .9rem;
  line-height: 1.45;
}

/* line 4313, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__selection {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .65rem;
  max-width: 15rem;
  padding: .35rem .75rem .35rem .35rem;
  border: 1px solid rgba(15, 104, 211, 0.16);
  border-radius: .8rem;
  background: rgba(15, 104, 211, 0.055);
}

/* line 4325, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__selection-image {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  border-radius: .6rem;
  object-fit: cover;
}

/* line 4333, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__selection-copy {
  display: flex;
  min-width: 0;
  flex-flow: column;
  gap: .12rem;
}

/* line 4340, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__selection-label {
  color: rgba(15, 104, 211, 0.78);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* line 4349, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__selection-name {
  overflow: hidden;
  color: #161616;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 4359, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step__summary {
  margin: .08rem 0 0;
  color: #0f68d3;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* line 4368, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-active .ai-builder-step__num {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 14px 26px rgba(15, 104, 211, 0.24);
}

/* line 4373, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-collapsed .ai-builder-step__body {
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.35rem) scale(0.992);
}

/* line 4384, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-clickable {
  cursor: pointer;
}

/* line 4387, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-clickable:hover .ai-builder-step__num, .ai-builder-step.is-clickable:focus .ai-builder-step__num {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 14px 26px rgba(15, 104, 211, 0.24);
}

/* line 4394, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-upcoming,
.ai-builder-step.is-locked {
  opacity: .44;
}

/* line 4400, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-locked .ai-builder-step__num {
  background: rgba(22, 22, 22, 0.1);
  color: rgba(22, 22, 22, 0.44);
  box-shadow: none;
}

/* line 4406, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-step.is-locked .ai-builder-step__title,
.ai-builder-step.is-locked .ai-builder-step__text {
  color: rgba(22, 22, 22, 0.42);
}

@keyframes ai-builder-step-rise {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 4425, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step {
    animation: none;
  }
  /* line 4429, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__body,
.ai-builder-step__num {
    transition: none;
  }
  /* line 4434, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step.is-active .ai-builder-step__num {
    transform: none;
  }
}

/* line 4444, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder--flat .ai-builder__flow {
  gap: 1.85rem;
}

/* line 4448, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder--flat .ai-builder-step {
  row-gap: .85rem;
}

/* line 4452, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder--flat .ai-builder-step__rail::after {
  bottom: -1.85rem;
}

/* line 4458, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder--flat .ai-builder-step__body {
  padding: .7rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* line 4467, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .85rem;
}

/* line 4473, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add {
  display: flex;
  min-height: 9.5rem;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.2rem;
  border: 2px dashed rgba(22, 22, 22, 0.2);
  border-radius: 0.5rem;
  background: rgba(15, 104, 211, 0.035);
  color: #161616;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

/* line 4489, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add:hover, .ai-emote-builder-add:focus-visible {
  border-color: rgba(15, 104, 211, 0.55);
  background: rgba(15, 104, 211, 0.075);
  outline: none;
  transform: translateY(-1px);
}

/* line 4497, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add:disabled {
  border-color: rgba(22, 22, 22, 0.12);
  background: rgba(22, 22, 22, 0.035);
  color: rgba(22, 22, 22, 0.55);
  cursor: not-allowed;
  transform: none;
}

/* line 4506, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .8rem;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
}

/* line 4515, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add__icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

/* line 4521, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add__title {
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 4527, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-add__text {
  max-width: 13rem;
  color: rgba(22, 22, 22, 0.56);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 4535, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected {
  position: relative;
  display: flex;
  min-height: 9.5rem;
  flex-flow: column;
  gap: .45rem;
  padding: .5rem;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: .85rem;
  background: #fff;
  box-shadow: 0 0.75rem 1.45rem rgba(15, 23, 42, 0.07);
}

/* line 4547, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: .62rem;
  object-fit: cover;
}

/* line 4555, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected--prompt {
  justify-content: space-between;
}

/* line 4558, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected--prompt .ai-emote-builder-selected__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* line 4566, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__prompt-icon {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: .62rem;
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 4575, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__prompt-icon svg {
  width: 2rem;
  height: 2rem;
}

/* line 4581, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__title {
  color: rgba(22, 22, 22, 0.76);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.15;
}

/* line 4588, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__meta {
  color: rgba(15, 104, 211, 0.72);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.15;
}

/* line 4595, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__remove {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

/* line 4612, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__remove svg {
  width: .9rem;
  height: .9rem;
}

/* line 4617, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-builder-selected__remove:hover, .ai-emote-builder-selected__remove:focus-visible {
  background: rgba(15, 23, 42, 0.86);
  outline: none;
  transform: scale(1.04);
}

/* line 4625, app/assets/stylesheets/partials/_ai_characters.scss */
body.ai-emote-setup-open {
  overflow: hidden;
}

/* line 4629, app/assets/stylesheets/partials/_ai_characters.scss */
body.ai-quota-limit-open {
  overflow: hidden;
}

/* line 4633, app/assets/stylesheets/partials/_ai_characters.scss */
body.ai-batch-completion-open {
  overflow: hidden;
}

/* line 4637, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 4647, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal[hidden] {
  display: none;
}

/* line 4652, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__backdrop {
  position: absolute;
  inset: 0;
}

/* line 4657, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 42rem;
  padding: 1.4rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  z-index: 1;
  display: flex;
  max-height: min(42rem, calc(100vh - 2.5rem));
  flex-flow: column;
  gap: 1.1rem;
  overflow: auto;
  opacity: 0;
  transform: translateY(0.5rem) scale(0.985);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.9, 0.25, 1.05);
}

/* line 4669, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal.is-open .ai-batch-completion-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* line 4675, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  align-items: start;
}

/* line 4682, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-batch-completion-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-batch-completion-modal__close:hover, .ai-batch-completion-modal__close:focus-visible, .ai-batch-completion-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-batch-completion-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 4688, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  grid-column: 1;
}

/* line 4693, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__title {
  margin: 0;
  color: #161616;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  grid-column: 1;
}

/* line 4698, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__body {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

/* line 4704, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__message {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  max-width: 38rem;
}

/* line 4709, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo {
  padding: .45rem 0 .15rem;
}

/* line 4713, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__card {
  position: relative;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  min-height: 7rem;
  padding: .85rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .85rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.7rem 1.5rem rgba(15, 23, 42, 0.07);
}

/* line 4727, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__media {
  position: relative;
  width: 5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: .7rem;
  background: rgba(15, 104, 211, 0.08);
}

/* line 4736, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__placeholder,
.ai-batch-completion-demo__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* line 4744, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__placeholder {
  display: grid;
  place-items: center;
}

/* line 4748, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__placeholder svg {
  width: 78%;
  height: 78%;
}

/* line 4752, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__placeholder svg path:first-child {
  fill: rgba(15, 104, 211, 0.18);
  stroke: #0f68d3;
  stroke-width: 2;
}

/* line 4758, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__placeholder svg circle,
.ai-batch-completion-demo__placeholder svg path:last-child {
  fill: none;
  stroke: #161616;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* line 4768, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__card.has-image .ai-batch-completion-demo__placeholder {
  display: none;
}

/* line 4772, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__image {
  object-fit: contain;
}

/* line 4776, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__copy {
  display: flex;
  flex-flow: column;
  gap: .3rem;
  min-width: 0;
}

/* line 4783, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__title {
  color: #161616;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1.16;
}

/* line 4790, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__text {
  color: rgba(22, 22, 22, 0.56);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 4797, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__action {
  position: relative;
  padding: .8rem .65rem .8rem 0;
}

/* line 4802, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__regenerate {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.4rem;
  padding: 0 .7rem;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(15, 104, 211, 0.24);
  animation: ai-batch-regenerate-pulse 2.8s ease-in-out infinite;
}

/* line 4816, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__regenerate > svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* line 4822, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__cost {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  padding-left: .45rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

/* line 4829, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__cost svg {
  width: .95rem;
  height: .95rem;
}

/* line 4835, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__pointer {
  position: absolute;
  right: -.2rem;
  bottom: -.15rem;
  width: 1.6rem;
  height: 1.6rem;
  color: #161616;
  filter: drop-shadow(0 2px 2px rgba(255, 255, 255, 0.9));
  animation: ai-batch-pointer-tap 2.8s ease-in-out infinite;
}

/* line 4845, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-demo__pointer svg {
  width: 100%;
  height: 100%;
}

/* line 4851, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  flex: 0 0 auto;
  padding-inline: 1.75rem;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-batch-completion-modal__cta:hover, .ai-batch-completion-modal__cta:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 4857, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 -1.4rem -1.4rem;
  padding: .9rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(15, 104, 211, 0.12);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* line 4870, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__actions-hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: rgba(22, 22, 22, 0.55);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
}

/* line 4880, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-batch-completion-modal__actions-hint svg {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  padding: .2rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

@keyframes ai-batch-regenerate-pulse {
  0%, 32%, 62%, 100% {
    transform: scale(1);
    box-shadow: 0 6px 16px rgba(15, 104, 211, 0.24);
  }
  43% {
    transform: scale(0.96);
    box-shadow: 0 2px 8px rgba(15, 104, 211, 0.2), 0 0 0 5px rgba(15, 104, 211, 0.14);
  }
  52% {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(15, 104, 211, 0.32);
  }
}

@keyframes ai-batch-pointer-tap {
  0%, 20% {
    opacity: 0;
    transform: translate(1rem, 0.8rem);
  }
  32% {
    opacity: 1;
    transform: translate(0, 0);
  }
  43% {
    opacity: 1;
    transform: translate(-0.15rem, -0.2rem) scale(0.88);
  }
  57% {
    opacity: 1;
    transform: translate(0, 0);
  }
  68%, 100% {
    opacity: 0;
    transform: translate(0.35rem, 0.35rem);
  }
}

@media only screen and (max-width: 32rem) {
  /* line 4906, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-modal {
    padding: 0;
    align-items: flex-end;
  }
  /* line 4911, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-modal__dialog {
    max-width: none;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.25rem 1rem 1rem;
    transform: translateY(2rem);
  }
  /* line 4918, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-demo__card {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: .7rem;
    padding: .7rem;
  }
  /* line 4924, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-demo__media {
    width: 4.25rem;
  }
  /* line 4928, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-demo__action {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0 0 .2rem;
  }
  /* line 4934, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-modal__actions {
    margin: 0 -1rem -1rem;
    padding: .85rem 1rem 1rem;
  }
  /* line 4939, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-modal__actions-hint {
    font-size: .74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 4945, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-batch-completion-modal,
.ai-batch-completion-modal__dialog,
.ai-batch-completion-demo__regenerate,
.ai-batch-completion-demo__pointer {
    transition: none;
    animation: none;
  }
}

/* line 4954, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* line 4967, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal[hidden] {
  display: none;
}

/* line 4971, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* line 4977, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__backdrop {
  position: absolute;
  inset: 0;
}

/* line 4982, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  position: relative;
  width: 100%;
  max-width: 34rem;
  padding: 2rem 2rem 1.6rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  text-align: center;
  transform: translateY(0.35rem) scale(0.985);
  transition: transform 180ms ease;
}

/* line 4993, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal.is-open .ai-quota-limit-modal__dialog {
  transform: translateY(0) scale(1);
}

/* line 4997, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-quota-limit-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-quota-limit-modal__close:hover, .ai-quota-limit-modal__close:focus-visible, .ai-quota-limit-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-quota-limit-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 5004, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 5008, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__title {
  margin: 0;
  color: #161616;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  margin: .45rem 2rem .75rem;
}

/* line 5013, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__message,
.ai-quota-limit-modal__reset,
.ai-quota-limit-modal__hint {
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.58;
  margin: 0 auto;
  max-width: 29rem;
}

/* line 5021, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__reset {
  margin-top: .65rem;
  font-weight: 700;
}

/* line 5025, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__reset time {
  color: #0f68d3;
}

/* line 5030, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__hint {
  margin-top: .8rem;
  font-size: .84rem;
}

/* line 5035, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-top: 1.45rem;
}

/* line 5042, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__reset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  justify-content: center;
  gap: .65rem;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-quota-limit-modal__reset-button:hover, .ai-quota-limit-modal__reset-button:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 5047, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__reset-button strong {
  font-variant-numeric: tabular-nums;
}

/* line 5052, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-quota-limit-modal__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
  color: rgba(22, 22, 22, 0.78);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.14);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  justify-content: center;
}

/* line 154, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-quota-limit-modal__cancel:hover, .ai-quota-limit-modal__cancel:focus-visible {
  background: #f8fbff;
  color: #161616;
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.24), 0 0.8rem 1.4rem rgba(15, 23, 42, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  /* line 5058, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-quota-limit-modal,
.ai-quota-limit-modal__dialog {
    transition: none;
  }
}

/* line 5064, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: radial-gradient(circle at 76% 18%, rgba(15, 104, 211, 0.18), transparent 22rem), radial-gradient(circle at 24% 88%, rgba(19, 185, 129, 0.14), transparent 20rem), rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* line 5074, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal[hidden] {
  display: none;
}

/* line 5079, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 42rem;
  padding: 1.4rem;
  border: 1px solid rgba(15, 104, 211, 0.24);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  color: #161616;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.96)), #fff;
  position: relative;
  display: flex;
  max-height: min(42rem, calc(100vh - 2.5rem));
  flex-flow: column;
  gap: 1.1rem;
  overflow: auto;
}

/* line 5089, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem 1rem;
  align-items: start;
}

/* line 5096, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  grid-column: 1;
}

/* line 5101, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__title {
  margin: 0;
  color: #161616;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  grid-column: 1;
  margin: 0;
}

/* line 5107, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__close {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(22, 22, 22, 0.62);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* line 55, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-setup-modal__close svg {
  width: 1rem;
  height: 1rem;
}

/* line 60, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-setup-modal__close:hover, .ai-emote-setup-modal__close:focus-visible, .ai-emote-setup-modal__close:active {
  background: rgba(15, 104, 211, 0.09);
  color: #161616;
  outline: none;
  transform: translateY(-1px);
}

/* line 69, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-setup-modal__close:focus-visible {
  box-shadow: 0 0 0 3px rgba(15, 104, 211, 0.14);
}

/* line 5113, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__body {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

/* line 5119, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .85rem;
}

/* line 5125, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 11.25rem;
  align-items: start;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 0.5rem;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* line 5139, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice:hover, .ai-emote-setup-choice:focus-visible {
  border-color: rgba(15, 104, 211, 0.4);
  box-shadow: 0 0.8rem 1.8rem rgba(15, 104, 211, 0.12);
  outline: none;
  transform: translateY(-1px);
}

/* line 5148, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice__thumb,
.ai-emote-setup-choice__glyph {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 4.4rem;
  height: 4.4rem;
  overflow: hidden;
  border-radius: .75rem;
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 5160, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice__thumb img,
.ai-emote-setup-choice__glyph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 5166, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice__thumb svg,
.ai-emote-setup-choice__glyph svg {
  width: 2rem;
  height: 2rem;
}

/* line 5172, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice__copy,
.ai-emote-preset-card__body {
  display: flex;
  flex-flow: column;
  gap: .3rem;
  min-width: 0;
}

/* line 5180, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice__title {
  color: #161616;
  font-size: .94rem;
  font-weight: 900;
  line-height: 1.16;
}

/* line 5187, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-choice__text {
  color: rgba(22, 22, 22, 0.56);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
}

/* line 5194, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  min-height: 2.15rem;
  padding: .35rem .7rem .35rem .45rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(22, 22, 22, 0.74);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.45rem 1rem rgba(15, 23, 42, 0.05);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}

/* line 5217, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__back svg {
  width: 1.35rem;
  height: 1.35rem;
  padding: .18rem;
  border-radius: 999px;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
  flex: 0 0 auto;
}

/* line 5227, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__back:hover, .ai-emote-setup-modal__back:focus-visible {
  border-color: rgba(15, 104, 211, 0.24);
  background: #fff;
  color: #161616;
  outline: none;
  box-shadow: 0 0.7rem 1.35rem rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

/* line 5238, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-panel {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}

/* line 5243, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-panel[hidden] {
  display: none;
}

/* line 5248, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-sections {
  display: flex;
  flex-flow: column;
  gap: 1.1rem;
}

/* line 5254, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-section {
  display: flex;
  flex-flow: column;
  gap: .5rem;
}

/* line 5260, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-section__head {
  display: flex;
  flex-flow: column;
  gap: .15rem;
}

/* line 5266, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-section__title {
  margin: 0;
  color: #161616;
  font-size: .85rem;
  font-weight: 900;
  line-height: 1.2;
}

/* line 5274, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: .6rem;
}

/* line 5280, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card {
  display: flex;
  flex-flow: column;
  cursor: pointer;
}

/* line 5288, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* line 5301, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__body {
  position: relative;
  gap: .4rem;
  padding: .35rem .35rem .15rem;
  border: 2px solid rgba(22, 22, 22, 0.08);
  border-radius: .7rem;
  background: #fff;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* line 5310, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__body img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: .5rem;
  object-fit: cover;
  transition: transform 200ms ease;
}

/* line 5319, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__body::after {
  content: "✓";
  position: absolute;
  top: .45rem;
  right: .45rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(22, 22, 22, 0.28);
  color: transparent;
  font-size: .8rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  box-shadow: 0 0.2rem 0.55rem rgba(15, 23, 42, 0.25);
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease, color 150ms ease;
}

/* line 5342, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__title {
  padding: 0 .1rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

/* line 5351, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card:hover .ai-emote-preset-card__body,
.ai-emote-preset-card > input:focus-visible + .ai-emote-preset-card__body {
  border-color: rgba(15, 104, 211, 0.42);
  box-shadow: 0 0.55rem 1.25rem rgba(15, 104, 211, 0.14);
  transform: translateY(-2px);
}

/* line 5358, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card:hover .ai-emote-preset-card__body img {
  transform: scale(1.04);
}

/* line 5362, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card:hover .ai-emote-preset-card__body::after,
.ai-emote-preset-card > input:focus-visible + .ai-emote-preset-card__body::after {
  opacity: 1;
  transform: scale(1);
}

/* line 5368, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card > input:checked + .ai-emote-preset-card__body {
  border-color: #0f68d3;
  box-shadow: 0 0.5rem 1.1rem rgba(15, 104, 211, 0.18);
}

/* line 5373, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card > input:checked + .ai-emote-preset-card__body::after {
  opacity: 1;
  transform: scale(1);
  border-color: #fff;
  background: #0f68d3;
  color: #fff;
}

/* line 5381, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__text-sign {
  display: grid;
  gap: .25rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed rgba(15, 104, 211, 0.3);
}

/* line 5389, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__text-sign[hidden] {
  display: none;
}

/* line 5396, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-emote-preset-card__text-input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: .55rem .4rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: .72rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: #161616;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

/* line 5415, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-emote-preset-card__text-input[type="text"]::placeholder {
  color: rgba(22, 22, 22, 0.38);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* line 5422, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-emote-preset-card__text-input[type="text"]:hover {
  border-color: rgba(22, 22, 22, 0.24);
  background: #fff;
}

/* line 5427, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-emote-preset-card__text-input[type="text"]:focus {
  outline: none;
  border-color: rgba(15, 104, 211, 0.62);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.24), 0 0 0 0.2rem rgba(15, 104, 211, 0.12);
}

/* line 5437, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-preset-card__text-hint {
  color: rgba(22, 22, 22, 0.46);
  font-size: .58rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* line 5445, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__actions {
  position: sticky;
  bottom: -1.4rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 -1.4rem -1.4rem;
  padding: .9rem 1.4rem 1.4rem;
  border-top: 1px solid rgba(15, 104, 211, 0.12);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* line 5463, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__actions-hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: rgba(22, 22, 22, 0.55);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
}

/* line 5473, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__actions-hint::before {
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.22);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

/* line 5483, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__actions-hint[data-state="ready"] {
  color: #0f68d3;
}

/* line 5487, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__actions-hint[data-state="ready"]::before {
  background: #0f68d3;
  box-shadow: 0 0 0 0.25rem rgba(15, 104, 211, 0.14);
}

/* line 5493, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .85rem 1.1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #0f68d3;
  color: #fff;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.9rem 1.8rem rgba(15, 104, 211, 0.22);
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
  flex: 0 0 auto;
  padding-inline: 1.75rem;
  white-space: nowrap;
}

/* line 124, app/assets/stylesheets/partials/_modal_surface.scss */
.ai-emote-setup-modal__confirm:hover, .ai-emote-setup-modal__confirm:focus-visible {
  background: #0d5ab6;
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

/* line 5499, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-setup-modal__confirm:disabled {
  background: rgba(22, 22, 22, 0.14);
  box-shadow: none;
  color: rgba(22, 22, 22, 0.42);
  cursor: not-allowed;
  transform: none;
}

/* line 5508, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-drop {
  margin-top: .25rem;
}

/* line 5512, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt {
  display: flex;
  flex-flow: column;
  gap: .45rem;
}

/* line 5518, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt__label {
  color: #161616;
  font-size: .86rem;
  font-weight: 800;
}

/* line 5524, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt__textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  padding: .9rem 1rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: .75rem;
  background: #fff;
  color: #161616;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: inset 0 0.1rem 0.35rem rgba(15, 23, 42, 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* line 5540, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt__textarea::placeholder {
  color: rgba(22, 22, 22, 0.42);
}

/* line 5544, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt__textarea:focus {
  border-color: rgba(15, 104, 211, 0.5);
  outline: none;
  box-shadow: inset 0 0.1rem 0.35rem rgba(15, 23, 42, 0.04), 0 0 0 0.2rem rgba(15, 104, 211, 0.12);
}

/* line 5553, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt__text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

@media (max-width: 34rem) {
  /* line 5560, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-custom-prompt__text-grid {
    grid-template-columns: 1fr;
  }
}

/* line 5565, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-custom-prompt__background {
  gap: .35rem;
  margin-top: .35rem;
}

/* line 5570, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: .7rem;
}

/* line 5575, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-previews:empty {
  display: none;
}

/* line 5580, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-preview {
  position: relative;
  display: flex;
  min-width: 0;
  flex-flow: column;
  gap: .4rem;
  padding: .4rem;
  border: 1px solid rgba(15, 104, 211, 0.18);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 0.55rem 1.15rem rgba(15, 23, 42, 0.06);
}

/* line 5592, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-preview img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: .55rem;
  background: rgba(22, 22, 22, 0.04);
  object-fit: contain;
}

/* line 5601, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-preview__name {
  overflow: hidden;
  padding-inline: .1rem;
  color: rgba(22, 22, 22, 0.7);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 5612, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-preview__remove {
  position: absolute;
  top: .65rem;
  right: .65rem;
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.68);
  color: #fff;
  cursor: pointer;
}

/* line 5626, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-preview__remove svg {
  width: .85rem;
  height: .85rem;
}

/* line 5631, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-emote-reference-preview__remove:hover, .ai-emote-reference-preview__remove:focus-visible {
  background: rgba(15, 23, 42, 0.9);
  outline: none;
}

@media only screen and (max-width: 32rem) {
  /* line 5639, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-setup-modal {
    align-items: end;
    padding: .75rem;
  }
  /* line 5644, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-setup-modal__dialog {
    width: 100%;
    max-height: calc(100vh - 1.5rem);
  }
  /* line 5649, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-setup-modal__choice-grid {
    grid-template-columns: 1fr;
  }
}

/* line 5654, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-field {
  display: flex;
  flex-flow: column;
  gap: .45rem;
  min-width: 0;
}

/* line 5661, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder [hidden] {
  display: none !important;
}

/* line 5665, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-field__label {
  color: #161616;
  font-size: .86rem;
  font-weight: 800;
}

/* line 5671, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-field__hint {
  margin: 0;
  color: rgba(22, 22, 22, 0.46);
  font-size: .78rem;
  line-height: 1.35;
}

/* line 5678, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-field__input {
  width: 100%;
  min-width: 0;
  color: #161616;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
}

/* line 5688, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-builder-field__input[type="text"],
form.ai-builder textarea.ai-builder-field__input {
  box-sizing: border-box;
  min-height: 3.35rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(22, 22, 22, 0.14);
  border-radius: .82rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

/* line 5700, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-builder-field__input[type="text"]::placeholder,
form.ai-builder textarea.ai-builder-field__input::placeholder {
  color: rgba(22, 22, 22, 0.38);
}

/* line 5704, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-builder-field__input[type="text"]:hover,
form.ai-builder textarea.ai-builder-field__input:hover {
  border-color: rgba(22, 22, 22, 0.24);
  background: #fff;
}

/* line 5709, app/assets/stylesheets/partials/_ai_characters.scss */
form.ai-builder input.ai-builder-field__input[type="text"]:focus,
form.ai-builder textarea.ai-builder-field__input:focus {
  outline: none;
  border-color: rgba(15, 104, 211, 0.62);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 104, 211, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* line 5719, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .65rem;
  padding-top: .45rem;
  scroll-margin-bottom: 1.25rem;
}

/* line 5728, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit .button--tertiary:hover,
.ai-builder-submit .button--tertiary:focus,
.ai-builder-submit .button--tertiary:active {
  text-decoration: none;
}

/* line 5735, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit--premium {
  justify-content: space-between;
  gap: .8rem;
}

/* line 5741, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__button:disabled {
  cursor: not-allowed;
  background: rgba(22, 22, 22, 0.18);
  color: rgba(22, 22, 22, 0.44);
  box-shadow: none;
  opacity: 1;
}

/* line 5749, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__button svg {
  width: 1rem;
  height: 1rem;
}

/* line 5754, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__button:disabled svg {
  stroke: currentColor;
}

/* line 5759, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__quota-link {
  padding: .2rem .1rem;
  border: 0;
  background: transparent;
  color: #0f68d3;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* line 5771, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-premium-cta {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-start;
  gap: .7rem;
  min-width: 0;
  max-width: 100%;
  padding: .62rem .7rem .62rem .62rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.085), rgba(255, 255, 255, 0.94) 58%), #fff;
  box-shadow: 0 16px 36px -28px rgba(22, 22, 22, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  text-decoration: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* line 5791, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-premium-cta:hover, .ai-builder-premium-cta:focus-visible {
  border-color: rgba(15, 104, 211, 0.26);
  box-shadow: 0 18px 38px -27px rgba(15, 104, 211, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  outline: none;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* line 5802, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-premium-cta:hover .ai-builder-premium-cta__text, .ai-builder-premium-cta:focus-visible .ai-builder-premium-cta__text {
  background-size: 100% 1px;
}

/* line 5808, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-premium-cta__copy {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  flex-flow: column;
  gap: .12rem;
  line-height: 1.25;
}

/* line 5817, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-premium-cta__label {
  color: rgba(22, 22, 22, 0.48);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* line 5824, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-premium-cta__text {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  color: rgba(22, 22, 22, 0.82);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-size 150ms ease;
}

/* line 5836, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__button--locked {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .48rem 1rem .48rem .62rem;
  border: 1px solid rgba(15, 104, 211, 0.16);
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.13), rgba(255, 255, 255, 0.86)), #fff;
  color: rgba(22, 22, 22, 0.68);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px -22px rgba(15, 104, 211, 0.5);
}

/* line 5853, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__lock-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: .5rem;
  background: rgba(15, 104, 211, 0.14);
  color: #0f68d3;
}

/* line 5863, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__lock-icon svg {
  width: .9rem;
  height: .9rem;
}

/* line 5868, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-builder-submit__button--locked .ai-builder-submit__lock-icon svg {
  stroke: currentColor;
}

@media only screen and (max-width: 64rem) {
  /* line 5876, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 5880, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tabs__nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* line 5884, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tabs__nav::-webkit-scrollbar {
    display: none;
  }
}

@media only screen and (max-width: 58rem) {
  /* line 5892, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-use-case-grid,
.ai-emote-source-grid {
    grid-template-columns: 1fr;
  }
  /* line 5896, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-use-case-grid .ai-wizard__choice-body--inline,
.ai-emote-source-grid .ai-wizard__choice-body--inline {
    min-height: 0;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 5904, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 5908, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid.ai-emote-use-case-grid,
.ai-wizard__choice-grid.ai-emote-source-grid {
    grid-template-columns: 1fr;
  }
  /* line 5912, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid.ai-emote-use-case-grid .ai-wizard__choice-body--inline,
.ai-wizard__choice-grid.ai-emote-source-grid .ai-wizard__choice-body--inline {
    padding: 1rem;
  }
  /* line 5916, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid.ai-emote-use-case-grid .ai-wizard__choice-face,
.ai-wizard__choice-grid.ai-emote-use-case-grid .ai-wizard__choice-glyph,
.ai-wizard__choice-grid.ai-emote-source-grid .ai-wizard__choice-face,
.ai-wizard__choice-grid.ai-emote-source-grid .ai-wizard__choice-glyph {
    flex-basis: 4.5rem;
    width: 4.5rem;
    height: 4.5rem;
  }
  /* line 5924, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid.ai-emote-avatar-picker {
    scrollbar-width: none;
  }
  /* line 5927, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid.ai-emote-avatar-picker .ai-wizard__choice {
    flex-basis: calc(100% - 1.5rem);
    width: calc(100% - 1.5rem);
    max-width: 16rem;
  }
  /* line 5933, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__choice-grid.ai-emote-avatar-picker::-webkit-scrollbar {
    display: none;
  }
  /* line 5938, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-wizard__tips-cols {
    grid-template-columns: 1fr;
  }
  /* line 5942, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-header {
    gap: .65rem;
    flex-wrap: wrap;
  }
  /* line 5947, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-actions {
    width: 100%;
    margin-left: 0;
    min-width: 0;
  }
  /* line 5953, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage {
    gap: .38rem;
    width: 100%;
    padding: .75rem 0 0;
    border-top: 1px solid rgba(22, 22, 22, 0.1);
    border-left: 0;
  }
  /* line 5961, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__label {
    font-size: .64rem;
    letter-spacing: .06em;
  }
  /* line 5966, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__primary {
    font-size: .96rem;
  }
  /* line 5970, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__secondary,
.ai-brand-usage__link {
    font-size: .72rem;
  }
  /* line 5975, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__window {
    font-size: .7rem;
  }
  /* line 5979, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__meter {
    height: .3rem;
  }
  /* line 5983, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__reset {
    min-height: 1.9rem;
    padding: .38rem .5rem;
  }
  /* line 5987, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__reset span {
    font-size: .68rem;
  }
  /* line 5991, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-usage__reset strong {
    font-size: .72rem;
  }
  /* line 5996, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .55rem;
    padding: .55rem;
    border-radius: .95rem;
  }
  /* line 6005, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tabs__nav {
    display: contents;
    overflow-x: visible;
  }
  /* line 6010, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-logo {
    gap: .65rem;
  }
  /* line 6014, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-logo__mark {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: .85rem;
  }
  /* line 6019, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-logo__mark svg {
    width: 1.95rem;
    height: 1.95rem;
  }
  /* line 6025, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-logo__title {
    font-size: 1.45rem;
  }
  /* line 6029, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-logo__badge {
    padding: .18rem .42rem;
    font-size: .62rem;
  }
  /* line 6034, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-brand-logo__byline {
    font-size: .74rem;
  }
  /* line 6038, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tab {
    position: relative;
    flex: initial;
    flex-flow: column;
    min-height: 5.2rem;
    padding: .7rem .65rem;
    border-color: rgba(22, 22, 22, 0.06);
    background: rgba(255, 255, 255, 0.55);
    font-size: .84rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }
  /* line 6049, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tab svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  /* line 6055, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tabs__nav > .ai-tab:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
  /* line 6059, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-tab--active {
    border-color: rgba(15, 104, 211, 0.18);
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04), 0 8px 20px rgba(22, 22, 22, 0.06);
  }
  /* line 6067, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .5rem .65rem;
    scroll-margin-top: calc(4.25rem + 1rem);
  }
  /* line 6073, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__rail {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-content: center;
    padding-top: 0;
  }
  /* line 6080, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__rail::after {
    content: none;
  }
  /* line 6085, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__head {
    grid-column: 2;
    grid-row: 1;
    gap: .65rem;
    padding-top: 0;
  }
  /* line 6092, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__body {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: .9rem;
    border-radius: .85rem;
  }
  /* line 6099, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__panel {
    gap: .85rem;
  }
  /* line 6103, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__num {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .7rem;
    font-size: .84rem;
  }
  /* line 6110, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__title {
    font-size: 1.12rem;
  }
  /* line 6114, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__text {
    font-size: .84rem;
  }
  /* line 6118, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__selection {
    max-width: 10rem;
    gap: .5rem;
    padding: .28rem .55rem .28rem .28rem;
  }
  /* line 6124, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__selection-image {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
  }
  /* line 6130, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__selection-label {
    font-size: .58rem;
  }
  /* line 6134, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__selection-name {
    font-size: .74rem;
  }
  /* line 6138, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-step__summary {
    font-size: .78rem;
  }
  /* line 6142, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-submit {
    align-items: stretch;
    flex-flow: column-reverse;
  }
  /* line 6146, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-submit .button {
    width: 100%;
  }
  /* line 6151, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-premium-cta {
    display: flex;
    flex: 0 1 auto;
    align-items: stretch;
    flex-flow: column;
    width: 100%;
  }
  /* line 6159, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-builder-submit__button--locked {
    width: 100%;
  }
}

@media (hover: none) {
  /* line 6165, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-tile__media::after,
.ai-emote-tile__actions {
    opacity: 1;
  }
  /* line 6170, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-tile__actions {
    transform: translateY(0) scale(1);
  }
}

/* line 6175, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-gallery {
  display: grid;
  gap: 1.35rem;
}

/* line 6180, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-empty {
  display: grid;
  justify-items: center;
  gap: .8rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* line 6189, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-empty__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1.2rem;
  background: rgba(15, 104, 211, 0.1);
  color: #0f68d3;
}

/* line 6198, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-empty__icon svg {
  width: 2rem;
  height: 2rem;
}

/* line 6204, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-empty__title {
  margin: .2rem 0 0;
  color: #161616;
  font-size: 1.45rem;
}

/* line 6210, app/assets/stylesheets/partials/_ai_characters.scss */
.ai-maker-empty__text {
  max-width: 30rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.68);
  line-height: 1.55;
}

@media (max-width: 640px) {
  /* line 6218, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-generation-status {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    padding: .9rem;
  }
  /* line 6224, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-generation-status__steps {
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* line 6230, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-generation-status__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    min-width: 0;
  }
  /* line 6237, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-generation-status__actions form,
.ai-emote-generation-status__action {
    width: 100%;
  }
  /* line 6242, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-generation-status__step {
    justify-content: center;
  }
  /* line 6246, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-generation-mini {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: auto;
  }
  /* line 6253, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-generation-mini-card {
    grid-template-columns: auto minmax(0, 1fr);
    padding: .75rem;
  }
  /* line 6258, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-generation-mini-card--with-action {
    grid-template-columns: minmax(0, 1fr);
  }
  /* line 6262, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-generation-mini-card__notify {
    justify-self: stretch;
  }
  /* line 6266, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-generation-mini-card__icon {
    width: 2.45rem;
    height: 2.45rem;
  }
  /* line 6271, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-generation-mini-card__title {
    font-size: .86rem;
  }
  /* line 6275, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes {
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    padding: .85rem;
  }
  /* line 6281, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__preview {
    order: 2;
    margin-inline: -.85rem;
  }
  /* line 6286, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__track {
    gap: .6rem;
    animation-duration: 54s;
  }
  /* line 6291, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__item {
    flex-basis: 4.9rem;
    width: 4.9rem;
    height: 4.9rem;
    padding: .32rem;
  }
  /* line 6298, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__title {
    font-size: 1.02rem;
  }
  /* line 6302, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__text {
    font-size: .8rem;
  }
  /* line 6306, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-sample-emotes__action,
.ai-sample-emotes__cta {
    width: 100%;
  }
  /* line 6311, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  /* line 6316, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-create-tile__body,
.ai-emote-tile__body {
    padding: .7rem;
  }
  /* line 6321, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-create-tile__spark {
    width: 3.6rem;
    height: 3.6rem;
  }
  /* line 6325, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-create-tile__spark svg {
    width: 1.55rem;
    height: 1.55rem;
  }
  /* line 6331, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-create-tile__frames {
    inset: .75rem;
    gap: .45rem;
  }
  /* line 6336, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-create-tile__title,
.ai-emote-tile__title {
    font-size: .9rem;
  }
  /* line 6341, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-create-tile__text {
    font-size: .74rem;
  }
  /* line 6345, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-tile__media::after {
    display: none;
  }
  /* line 6349, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-tile__mobile-trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  /* line 6361, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-tile__mobile-trigger::after {
    content: '•••';
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.88);
    color: #161616;
    font-size: .72rem;
    letter-spacing: 0;
    box-shadow: 0 4px 14px rgba(22, 22, 22, 0.18);
    backdrop-filter: blur(10px);
  }
  /* line 6381, app/assets/stylesheets/partials/_ai_characters.scss */
  .ai-emote-tile__media > .ai-emote-tile__actions {
    display: none;
  }
}

/* line 13, app/assets/stylesheets/partials/_credits.scss */
.credits-page {
  background: #fff;
}

/* line 17, app/assets/stylesheets/partials/_credits.scss */
.credits {
  display: flex;
  flex-flow: column;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

/* line 27, app/assets/stylesheets/partials/_credits.scss */
.credits__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* line 35, app/assets/stylesheets/partials/_credits.scss */
.credits__title-block {
  display: flex;
  flex-flow: column;
  gap: .55rem;
  min-width: 0;
}

/* line 42, app/assets/stylesheets/partials/_credits.scss */
.credits__eyebrow {
  margin: 0;
  color: #0f68d3;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 52, app/assets/stylesheets/partials/_credits.scss */
.credits__title {
  margin: 0;
  color: #161616;
  font-size: 2.75rem;
  line-height: 1.05;
}

/* line 59, app/assets/stylesheets/partials/_credits.scss */
.credits__sub {
  max-width: 34rem;
  margin: 0;
  color: rgba(22, 22, 22, 0.6);
  font-size: 1rem;
  line-height: 1.55;
}

/* line 69, app/assets/stylesheets/partials/_credits.scss */
.credits__commerce {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 0.88fr);
  align-items: start;
  gap: 2rem;
}

/* line 76, app/assets/stylesheets/partials/_credits.scss */
.credits__wallet-stack {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  min-width: 0;
}

/* line 85, app/assets/stylesheets/partials/_credits.scss */
.wallet {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  gap: .85rem;
}

/* line 92, app/assets/stylesheets/partials/_credits.scss */
.wallet-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 1.62 / 1;
  min-height: 18rem;
  padding: 2rem 2.2rem;
  border-radius: 1.15rem;
  background: linear-gradient(155deg, #262626 0%, #0f68d3 60%);
  color: #fff;
  box-shadow: 0 22px 48px rgba(22, 22, 22, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* line 108, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 114, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__brand {
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
}

/* line 121, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__chip {
  position: relative;
  width: 2.65rem;
  height: 2.05rem;
  border-radius: .32rem;
  background: linear-gradient(150deg, #e8e8e8, #aeaeae);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* line 129, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__chip::before, .wallet-card__chip::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
}

/* line 136, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__chip::before {
  top: 50%;
  right: 20%;
  left: 20%;
  height: 1px;
}

/* line 143, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__chip::after {
  top: 20%;
  bottom: 20%;
  left: 50%;
  width: 1px;
}

/* line 151, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__body {
  display: flex;
  flex-flow: column;
  gap: .2rem;
}

/* line 157, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__balance {
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3.2rem, 8vw, 5.4rem);
  font-weight: 800;
  line-height: 1;
}

/* line 164, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__balance-label {
  color: rgba(255, 255, 255, 0.52);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* line 172, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

/* line 179, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__field {
  display: flex;
  flex-flow: column;
  gap: .25rem;
  min-width: 0;
}

/* line 185, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__field--right {
  text-align: right;
}

/* line 190, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__field-label {
  color: rgba(255, 255, 255, 0.42);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* line 198, app/assets/stylesheets/partials/_credits.scss */
.wallet-card__field-value {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* line 211, app/assets/stylesheets/partials/_credits.scss */
.credits-section {
  display: flex;
  flex-flow: column;
  gap: 1.15rem;
}

/* line 217, app/assets/stylesheets/partials/_credits.scss */
.credits-section--topup {
  min-width: 0;
}

/* line 221, app/assets/stylesheets/partials/_credits.scss */
.credits-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.1);
}

/* line 230, app/assets/stylesheets/partials/_credits.scss */
.credits-section__title {
  margin: 0;
  color: #161616;
  font-size: 1.15rem;
  line-height: 1.2;
}

/* line 237, app/assets/stylesheets/partials/_credits.scss */
.credits-section__note {
  flex: none;
  color: rgba(22, 22, 22, 0.4);
  font-size: .8rem;
  font-weight: 700;
}

/* line 246, app/assets/stylesheets/partials/_credits.scss */
.credit-preview {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.1rem;
  border: 1px solid rgba(15, 104, 211, 0.35);
  border-radius: .7rem;
  background: linear-gradient(135deg, rgba(15, 104, 211, 0.12), rgba(15, 104, 211, 0.04));
  color: #161616;
  transition: border-color .14s ease, background .14s ease, opacity .14s ease;
}

/* line 258, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: .55rem;
  background: rgba(15, 104, 211, 0.18);
  color: #0f68d3;
}

/* line 268, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__icon svg {
  width: 1.55rem;
  height: 1.55rem;
}

/* line 274, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__copy {
  display: flex;
  flex-flow: column;
  gap: .1rem;
  min-width: 0;
}

/* line 281, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__label {
  color: rgba(22, 22, 22, 0.52);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* line 289, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__value {
  color: #161616;
  font-size: 1.05rem;
  font-weight: 700;
}

/* line 294, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__value strong {
  color: #0f68d3;
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  margin-right: .3rem;
}

/* line 303, app/assets/stylesheets/partials/_credits.scss */
.credit-preview__hint {
  color: rgba(22, 22, 22, 0.52);
  font-size: .78rem;
}

/* line 308, app/assets/stylesheets/partials/_credits.scss */
.credit-custom__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 3.3rem;
}

/* line 316, app/assets/stylesheets/partials/_credits.scss */
.credit-custom__submit svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform .15s ease;
}

/* line 322, app/assets/stylesheets/partials/_credits.scss */
.credit-custom__submit:hover svg, .credit-custom__submit:focus-visible svg {
  transform: translateX(3px);
}

/* line 330, app/assets/stylesheets/partials/_credits.scss */
.credit-activity {
  display: flex;
  flex-flow: column;
  gap: .6rem;
}

/* line 336, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__item {
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .7rem;
  background: #fff;
}

/* line 342, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__item--pending {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(180, 83, 9, 0.045);
}

/* line 347, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem .9rem;
}

/* line 354, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  flex: none;
  border-radius: .6rem;
}

/* line 362, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 367, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__icon--in {
  background: rgba(21, 128, 61, 0.1);
  color: #15803d;
}

/* line 372, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__icon--out {
  background: rgba(22, 22, 22, 0.06);
  color: rgba(22, 22, 22, 0.52);
}

/* line 377, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__icon--pending {
  background: rgba(180, 83, 9, 0.14);
  color: #b45309;
}

/* line 383, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__info {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  gap: .18rem;
  min-width: 0;
}

/* line 391, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__title {
  color: #161616;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
}

/* line 398, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__sub {
  color: rgba(22, 22, 22, 0.4);
  font-size: .78rem;
  line-height: 1.35;
}

/* line 404, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__figures {
  display: flex;
  flex: none;
  flex-flow: column;
  align-items: flex-end;
  gap: .25rem;
}

/* line 412, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__amount {
  font-family: Montserrat, "Avenir Next", "Segoe UI", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

/* line 419, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__amount--positive {
  color: #15803d;
}

/* line 420, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__amount--negative {
  color: #b42318;
}

/* line 423, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__balance {
  color: rgba(22, 22, 22, 0.4);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* line 430, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__badge {
  display: inline-flex;
  align-items: center;
  gap: .26rem;
  padding: .24rem .55rem;
  border-radius: 999px;
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* line 443, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__badge svg {
  width: .72rem;
  height: .72rem;
}

/* line 448, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__badge--pending {
  background: rgba(180, 83, 9, 0.14);
  color: #b45309;
}

/* line 454, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .35rem;
  padding-top: .8rem;
  border-top: 1px dashed rgba(22, 22, 22, 0.18);
}

/* line 463, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__receipt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .55rem .75rem;
  border-radius: .45rem;
  background: #161616;
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* line 477, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__receipt-link:hover, .credit-activity__receipt-link:focus {
  background: #0f68d3;
  color: #fff;
}

/* line 483, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__receipt-link--muted {
  border: 1px solid rgba(22, 22, 22, 0.18);
  background: #fff;
  color: #161616;
}

/* line 488, app/assets/stylesheets/partials/_credits.scss */
.credit-activity__receipt-link--muted:hover, .credit-activity__receipt-link--muted:focus {
  border-color: rgba(15, 104, 211, 0.55);
  background: rgba(15, 104, 211, 0.06);
  color: #0f68d3;
}

/* line 497, app/assets/stylesheets/partials/_credits.scss */
.credits-empty {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: .35rem;
  padding: 2.25rem 1rem;
  text-align: center;
}

/* line 506, app/assets/stylesheets/partials/_credits.scss */
.credits-empty__title {
  color: #161616;
  font-size: .94rem;
  font-weight: 700;
}

/* line 512, app/assets/stylesheets/partials/_credits.scss */
.credits-empty__text {
  max-width: 22rem;
  color: rgba(22, 22, 22, 0.52);
  font-size: .85rem;
  line-height: 1.5;
}

@media screen and (max-width: 64rem) {
  /* line 522, app/assets/stylesheets/partials/_credits.scss */
  .credits {
    max-width: 42rem;
  }
  /* line 526, app/assets/stylesheets/partials/_credits.scss */
  .credits__commerce {
    grid-template-columns: 1fr;
  }
  /* line 530, app/assets/stylesheets/partials/_credits.scss */
  .wallet-card {
    min-height: 0;
  }
}

@media screen and (max-width: 32rem) {
  /* line 536, app/assets/stylesheets/partials/_credits.scss */
  .credits {
    gap: 2rem;
  }
  /* line 540, app/assets/stylesheets/partials/_credits.scss */
  .credits__title {
    font-size: 2.15rem;
  }
  /* line 544, app/assets/stylesheets/partials/_credits.scss */
  .credits__head {
    align-items: stretch;
  }
  /* line 546, app/assets/stylesheets/partials/_credits.scss */
  .wallet-card {
    aspect-ratio: auto;
    min-height: 13rem;
    padding: 1.35rem 1.4rem;
    border-radius: 1rem;
  }
  /* line 553, app/assets/stylesheets/partials/_credits.scss */
  .wallet-card__balance {
    font-size: 3rem;
  }
  /* line 557, app/assets/stylesheets/partials/_credits.scss */
  .credit-activity__row {
    gap: .7rem;
    padding: .75rem .8rem;
  }
  /* line 562, app/assets/stylesheets/partials/_credits.scss */
  .credit-activity__icon {
    width: 2.3rem;
    height: 2.3rem;
  }
}

/* line 1, app/assets/stylesheets/partials/_premium.scss */
.premium-page {
  background: #fff;
}

/* line 5, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing {
  padding-top: clamp(4rem, 7vw, 6rem);
  background: radial-gradient(circle at 82% 12%, rgba(15, 104, 211, 0.16), transparent 28rem), radial-gradient(circle at 15% 88%, rgba(59, 138, 240, 0.12), transparent 24rem), linear-gradient(180deg, #fff 0%, #f5f9ff 50%, #fff 100%);
}

/* line 12, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing::before {
  background-image: linear-gradient(rgba(15, 104, 211, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 104, 211, 0.055) 1px, transparent 1px);
}

/* line 18, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing::after {
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.1), rgba(59, 138, 240, 0.1), transparent);
}

/* line 23, app/assets/stylesheets/partials/_premium.scss */
.premium-pricing__content {
  display: grid;
  gap: 1.2rem;
  max-width: 62rem;
  margin: 0 auto;
}

/* line 30, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle {
  display: flex;
  justify-self: center;
  gap: .3rem;
  margin-bottom: 1rem;
  padding: .35rem;
  border: 1px solid rgba(22, 22, 22, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0.45rem 1.2rem rgba(22, 22, 22, 0.06);
}

/* line 42, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-width: 8rem;
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  color: rgba(22, 22, 22, 0.62);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* line 57, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle__option small {
  color: #0b8f64;
  font-size: .7rem;
  font-weight: 800;
}

/* line 63, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle__option:hover, .premium-billing-toggle__option:focus-visible {
  color: #161616;
  text-decoration: none;
}

/* line 70, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle__option--active {
  background: #0f68d3;
  color: #fff;
  box-shadow: 0 0.3rem 0.8rem rgba(15, 104, 211, 0.28);
}

/* line 75, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle__option--active small {
  color: rgba(255, 255, 255, 0.82);
}

/* line 79, app/assets/stylesheets/partials/_premium.scss */
.premium-billing-toggle__option--active:hover, .premium-billing-toggle__option--active:focus-visible {
  color: #fff;
}

/* line 85, app/assets/stylesheets/partials/_premium.scss */
.premium-pricing__packs {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

/* line 92, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: .9rem;
  padding: 1.4rem 1.45rem 1.3rem;
  border: 1px solid rgba(15, 104, 211, 0.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82));
  box-shadow: 0 1.4rem 2.6rem rgba(22, 22, 22, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* line 106, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack:hover, .premium-page .emote-creator-pricing__pack:focus-within {
  transform: translateY(-0.35rem);
  border-color: rgba(15, 104, 211, 0.35);
  box-shadow: 0 1.8rem 3.2rem rgba(15, 104, 211, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 116, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-flag {
  position: absolute;
  top: -.7rem;
  left: 1.45rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #13b981, #0fa472);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0.4rem 0.9rem rgba(19, 185, 129, 0.35);
}

/* line 131, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-head {
  display: flex;
  flex-flow: column;
  gap: .25rem;
}

/* line 137, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-label {
  color: #161616;
  font-size: 1.2rem;
  font-weight: 700;
}

/* line 143, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-note {
  margin: 0;
  color: rgba(22, 22, 22, 0.6);
  font-size: .88rem;
  line-height: 1.45;
}

/* line 150, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: .55rem;
  margin-top: auto;
  padding-top: .8rem;
  border-top: 1px solid rgba(15, 104, 211, 0.1);
}

/* line 160, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-total {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  color: rgba(22, 22, 22, 0.72);
  font-size: 1.05rem;
  font-weight: 700;
}

/* line 168, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__pack-total small {
  color: rgba(22, 22, 22, 0.45);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* line 177, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem 1.1rem;
  margin-top: 1.6rem;
}

/* line 186, app/assets/stylesheets/partials/_premium.scss */
.premium-page .emote-creator-pricing__cta-note {
  color: rgba(22, 22, 22, 0.55);
  font-size: .85rem;
}

/* line 191, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card {
  border-color: rgba(22, 22, 22, 0.13);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #f8fafc);
  box-shadow: 0 1.2rem 2.4rem rgba(22, 22, 22, 0.06), 0 0.25rem 0.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 200, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card:hover, .premium-plan-card:focus-within {
  border-color: rgba(22, 22, 22, 0.2);
  box-shadow: 0 1.35rem 2.5rem rgba(22, 22, 22, 0.08), 0 0.3rem 0.85rem rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 210, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card.emote-creator-pricing__pack--featured {
  border-color: rgba(15, 104, 211, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, #0f68d3 8%, #ffffff));
  box-shadow: 0 1.8rem 3.2rem rgba(15, 104, 211, 0.18), 0 0.4rem 1rem rgba(15, 104, 211, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 219, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card.emote-creator-pricing__pack--featured:hover, .premium-plan-card.emote-creator-pricing__pack--featured:focus-within {
  border-color: rgba(15, 104, 211, 0.72);
  box-shadow: 0 2.1rem 3.6rem rgba(15, 104, 211, 0.22), 0 0.4rem 1rem rgba(15, 104, 211, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 229, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card .emote-creator-pricing__pack-flag {
  background: linear-gradient(135deg, #0f68d3, #0e5cbb);
  box-shadow: 0 0.4rem 0.9rem rgba(15, 104, 211, 0.32);
}

/* line 234, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card.emote-creator-pricing__pack--featured .emote-creator-pricing__pack-flag {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0.4rem 0.9rem rgba(239, 68, 68, 0.32);
}

/* line 239, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card .emote-creator-pricing__pack-foot {
  display: grid;
  gap: .45rem;
  margin-top: .1rem;
  padding: 1rem 0 1.05rem;
  border-top-color: rgba(15, 104, 211, 0.12);
  border-bottom: 1px solid rgba(15, 104, 211, 0.1);
}

/* line 248, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card .emote-creator-pricing__pack-total {
  color: rgba(22, 22, 22, 0.84);
  font-size: 3.25rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .95;
}

/* line 255, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card .emote-creator-pricing__pack-total small {
  color: rgba(22, 22, 22, 0.55);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .05em;
}

/* line 263, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card.emote-creator-pricing__pack--featured .emote-creator-pricing__pack-total {
  color: rgba(22, 22, 22, 0.84);
}

/* line 267, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__price-note {
  display: block;
  max-width: 26rem;
  color: rgba(22, 22, 22, 0.64);
  font-size: .84rem;
  line-height: 1.4;
}

/* line 275, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card.emote-creator-pricing__pack--featured .emote-creator-pricing__pack-count {
  color: #161616;
}

/* line 279, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits {
  display: grid;
  gap: .78rem;
  margin: 0;
  padding: .15rem 0 0;
  list-style: none;
}

/* line 287, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-groups {
  display: grid;
  gap: 1rem;
}

/* line 292, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-group {
  display: grid;
  gap: .7rem;
}

/* line 297, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-group--included {
  padding: 0 0 .88rem;
  border-bottom: 1px dashed rgba(22, 22, 22, 0.12);
}

/* line 302, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-group-label {
  color: rgba(15, 104, 211, 0.82);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

/* line 310, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit {
  display: grid;
  grid-template-columns: 2.05rem minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  padding: 0;
}

/* line 318, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included {
  gap: .6rem;
  padding-top: 0;
}

/* line 322, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__benefit {
  grid-template-columns: 1.72rem minmax(0, 1fr);
  gap: .42rem;
}

/* line 327, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__benefit-icon {
  width: 1.72rem;
  height: 1.72rem;
}

/* line 331, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__benefit-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

/* line 337, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__discord-action-icon {
  width: 1.52rem;
  height: 1.52rem;
}

/* line 342, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__discord-action-mark {
  width: 1.42rem;
  height: 1.42rem;
}

/* line 347, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__discord-action-badge {
  right: -.2rem;
  bottom: -.12rem;
  width: .86rem;
  height: .86rem;
}

/* line 353, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__discord-action-badge svg {
  width: .55rem;
  height: .55rem;
}

/* line 359, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__benefit-label {
  font-size: .86rem;
}

/* line 363, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefits--included .premium-plan-card__benefit-text {
  font-size: .78rem;
}

/* line 368, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  background: transparent;
  color: #0f68d3;
}

/* line 377, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-icon svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* line 383, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit--emote_maker .premium-plan-card__benefit-icon {
  width: 2.05rem;
  height: 2.05rem;
  background: transparent;
  box-shadow: none;
}

/* line 389, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit--emote_maker .premium-plan-card__benefit-icon svg {
  width: 2rem;
  height: 2rem;
  filter: drop-shadow(0 1px 1px rgba(15, 104, 211, 0.2));
}

/* line 396, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__discord-action-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.82rem;
  height: 1.82rem;
  color: #5865F2;
}

/* line 406, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__discord-action-mark {
  width: 1.72rem;
  height: 1.72rem;
}

/* line 411, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__discord-action-badge {
  position: absolute;
  right: -.24rem;
  bottom: -.14rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  color: #0f68d3;
  box-shadow: 0 1px 4px rgba(22, 22, 22, 0.16), 0 0 0 1px rgba(15, 104, 211, 0.12);
}

/* line 427, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__discord-action-badge svg {
  width: .66rem;
  height: .66rem;
}

/* line 433, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-copy {
  display: flex;
  flex-flow: column;
  gap: .12rem;
  min-width: 0;
}

/* line 440, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-label {
  color: #161616;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.3;
}

/* line 447, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit--emote_maker .premium-plan-card__benefit-label {
  color: #161616;
}

/* line 451, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__benefit-text {
  color: rgba(22, 22, 22, 0.62);
  font-size: .82rem;
  line-height: 1.4;
}

/* line 457, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__actions {
  display: grid;
  gap: .7rem;
  margin-top: .15rem;
}

/* line 462, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__actions form {
  width: 100%;
  margin: 0;
}

/* line 468, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__action-note {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: .25rem .45rem;
  color: rgba(22, 22, 22, 0.58);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* line 479, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__action-note time {
  color: rgba(22, 22, 22, 0.78);
}

/* line 484, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__button {
  width: 100%;
  min-height: 3.8rem;
  padding-inline: 1.35rem;
}

/* line 489, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__button span {
  flex: 0 1 auto;
  text-align: center;
}

/* line 494, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__button svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  transition: transform .2s ease;
}

/* line 501, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__button:hover svg, .premium-plan-card__button:focus-visible svg {
  transform: translateX(0.16rem);
}

/* line 507, app/assets/stylesheets/partials/_premium.scss */
.premium-plan-card__button--secondary {
  min-height: 3.25rem;
  padding-inline: 1.1rem;
  font-size: .95rem;
}

/* line 513, app/assets/stylesheets/partials/_premium.scss */
.premium-pricing__trust {
  justify-self: center;
  width: 100%;
  max-width: 62rem;
  flex-flow: row wrap;
  align-items: flex-start;
  margin-top: -.1rem;
  gap: .42rem .9rem;
  text-align: center;
}

/* line 524, app/assets/stylesheets/partials/_premium.scss */
.premium-pricing__trust .emote-creator-pricing__cta-note {
  line-height: 1.45;
}

/* line 528, app/assets/stylesheets/partials/_premium.scss */
.premium-pricing__trust .emote-creator-pricing__cta-note:not(:last-child) {
  white-space: nowrap;
}

/* line 532, app/assets/stylesheets/partials/_premium.scss */
.premium-pricing__trust .emote-creator-pricing__cta-note:last-child {
  flex: 1 1 24rem;
  min-width: 18rem;
  max-width: 100%;
}

/* line 538, app/assets/stylesheets/partials/_premium.scss */
.premium-payment-methods {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: .8rem;
  justify-self: center;
  width: 100%;
  max-width: 31rem;
  margin-top: .05rem;
}

/* line 549, app/assets/stylesheets/partials/_premium.scss */
.premium-payment-methods__label {
  color: rgba(22, 22, 22, 0.52);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* line 557, app/assets/stylesheets/partials/_premium.scss */
.premium-payment-methods__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line 567, app/assets/stylesheets/partials/_premium.scss */
.premium-payment-methods__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.15rem;
  padding: 0 .65rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* line 579, app/assets/stylesheets/partials/_premium.scss */
.premium-payment-methods__logo {
  display: block;
  width: auto;
  height: 1.05rem;
}

/* line 585, app/assets/stylesheets/partials/_premium.scss */
.premium-faq {
  padding-top: clamp(3.5rem, 6vw, 5rem);
  background: radial-gradient(circle at 18% 14%, rgba(15, 104, 211, 0.14), transparent 26rem), radial-gradient(circle at 86% 84%, rgba(59, 138, 240, 0.12), transparent 24rem), linear-gradient(180deg, #fff 0%, #f7fbff 55%, #fff 100%);
}

/* line 593, app/assets/stylesheets/partials/_premium.scss */
.premium-faq .emote-creator-faq__art {
  background: linear-gradient(90deg, transparent, rgba(15, 104, 211, 0.09), rgba(59, 138, 240, 0.09), transparent);
}

/* line 597, app/assets/stylesheets/partials/_premium.scss */
.premium-faq .emote-creator-faq__foot {
  background: linear-gradient(135deg, color-mix(in srgb, #0f68d3 6%, #ffffff) 0%, #ffffff 45%, color-mix(in srgb, #3b8af0 6%, #ffffff) 100%);
}

/* line 605, app/assets/stylesheets/partials/_premium.scss */
.premium-faq .emote-creator-faq__foot-glow {
  background: radial-gradient(circle, rgba(15, 104, 211, 0.22), transparent 65%);
}

@media screen and (max-width: 64rem) {
  /* line 610, app/assets/stylesheets/partials/_premium.scss */
  .premium-pricing__content {
    max-width: 44rem;
  }
  /* line 614, app/assets/stylesheets/partials/_premium.scss */
  .premium-pricing__packs {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 32rem) {
  /* line 620, app/assets/stylesheets/partials/_premium.scss */
  .premium-pricing__content {
    max-width: none;
  }
  /* line 624, app/assets/stylesheets/partials/_premium.scss */
  .premium-plan-card__button {
    min-height: 3.15rem;
  }
}

/* line 1, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide {
  --guide-accent: #5865F2;
  background: #fff;
  color: #161616;
  /* ----- Hero ----- */
  /* ----- Decorative background (hero + CTA) ----- */
  /* ----- Sections ----- */
  /* ----- Intro ----- */
  /* ----- Steps ----- */
  /* ----- Callout ----- */
  /* ----- Requirements ----- */
  /* ----- Emoji picker preview ----- */
  /* ----- Nitro preview ----- */
  /* ----- CTA ----- */
}

/* line 7, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem;
  background: radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(135deg, #5865F2 0%, #101fca 100%);
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 32rem) {
  /* line 7, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__hero {
    padding: 3.5rem 1rem;
  }
}

/* line 22, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
}

/* line 30, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* line 38, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__glyph {
  position: absolute;
  display: block;
  color: #fff;
  will-change: transform;
}

/* line 45, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__glyph--hero {
  --glyph-tilt: -12deg;
  width: 33rem;
  top: -3.5rem;
  right: -5.5rem;
  opacity: 0.14;
  transform: rotate(var(--glyph-tilt));
  animation: emoji-guide-float 9s ease-in-out infinite;
}

@media only screen and (max-width: 64rem) {
  /* line 45, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__glyph--hero {
    width: 26rem;
    top: -2.5rem;
    right: -7rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 45, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__glyph--hero {
    width: 20rem;
    top: -1.5rem;
    right: -6rem;
  }
}

/* line 67, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__glyph--cta {
  --glyph-tilt: 13deg;
  width: 24rem;
  bottom: -8.5rem;
  left: -6rem;
  opacity: 0.12;
  transform: rotate(var(--glyph-tilt));
  animation: emoji-guide-float 8s ease-in-out infinite;
}

/* line 77, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform;
}

/* line 84, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__orb--a {
  width: 19rem;
  height: 19rem;
  top: -7rem;
  left: -5rem;
  background: rgba(255, 255, 255, 0.22);
  animation: emoji-guide-drift 15s ease-in-out infinite;
}

/* line 93, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__orb--b {
  width: 15rem;
  height: 15rem;
  right: 6%;
  bottom: -7rem;
  background: rgba(173, 180, 249, 0.5);
  animation: emoji-guide-drift 19s ease-in-out infinite reverse;
}

/* line 102, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.25rem;
}

/* line 116, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__title {
  font-size: 3.5rem;
  line-height: 1.07;
  margin-bottom: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 116, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__title {
    font-size: 2.75rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 116, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__title {
    font-size: 2.1rem;
  }
}

/* line 130, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 40rem;
}

/* line 138, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* line 148, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero-meta-item {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* line 154, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero-meta-item + .emoji-guide__hero-meta-item::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}

/* line 167, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.85rem;
}

/* line 174, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__hero-actions .button {
  margin: 0;
}

/* line 180, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__section--requirements, .emoji-guide__section--faq {
  background: rgba(88, 101, 242, 0.045);
}

/* line 185, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__section--nitro {
  background: #313338;
  color: #f2f3f5;
}

/* line 190, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__head {
  max-width: 42rem;
  margin-bottom: 2.25rem;
}

/* line 194, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* line 201, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__head-title {
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

@media only screen and (max-width: 32rem) {
  /* line 201, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__head-title {
    font-size: 1.7rem;
  }
}

/* line 211, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__head-text {
  color: rgba(22, 22, 22, 0.62);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* line 218, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__intro {
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(22, 22, 22, 0.78);
}

/* line 224, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__intro p + p {
  margin-top: 1.1rem;
}

/* line 229, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__note {
  background: rgba(88, 101, 242, 0.07);
  border-left: 3px solid var(--guide-accent);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.15rem;
  font-size: 1rem;
}

/* line 236, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__note strong {
  color: var(--guide-accent);
}

/* line 242, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: guide-step;
}

/* line 249, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

/* line 256, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: 0;
  width: 2px;
  background: rgba(88, 101, 242, 0.22);
  transform: translateX(-50%);
}

/* line 267, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step:last-child {
  padding-bottom: 0;
}

/* line 272, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--guide-accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 0.5rem 1.2rem rgba(88, 101, 242, 0.35);
}

/* line 286, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step-body {
  padding-top: 0.25rem;
}

/* line 290, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

/* line 296, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__step-text {
  color: rgba(22, 22, 22, 0.7);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* line 304, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__callout {
  margin-top: 2rem;
  background: #161616;
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}

/* line 311, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__callout p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}

/* line 317, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__callout strong {
  color: #fff;
}

/* line 322, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__callout-title {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* line 328, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__req-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 328, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__req-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 328, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__req-grid {
    grid-template-columns: 1fr;
  }
}

/* line 342, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__req-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-top: 3px solid var(--guide-accent);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
}

/* line 353, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__req-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* line 361, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__req-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
}

/* line 369, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__req-value {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #161616;
}

/* line 377, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__use {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 377, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__use {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 391, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__use-copy .emoji-guide__head-title, .emoji-guide__nitro-copy .emoji-guide__head-title {
  margin-bottom: 0.85rem;
}

/* line 395, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__use-copy p, .emoji-guide__nitro-copy p {
  color: rgba(22, 22, 22, 0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* line 403, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__use-copy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(88, 101, 242, 0.1);
  color: #1f31ee;
  padding: 0.12em 0.4em;
  border-radius: 5px;
}

/* line 412, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__use-preview {
  min-width: 0;
}

/* line 416, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker {
  position: relative;
  min-height: 21rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 14px;
  background: #313338;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.14);
  padding: 1rem;
}

/* line 426, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #2b2d31;
}

/* line 433, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* line 442, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-title {
  color: #f2f3f5;
  font-size: 0.95rem;
  font-weight: 800;
}

/* line 448, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-tab {
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.2);
  color: #f2f3f5;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
}

/* line 459, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-section {
  display: block;
  padding: 0.8rem 1rem 0.25rem;
  color: rgba(242, 243, 245, 0.56);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* line 469, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.25rem 0.75rem 0.8rem;
}

@media only screen and (max-width: 32rem) {
  /* line 469, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* line 480, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-emote {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  border-radius: 6px;
  padding: 0.25rem;
}

/* line 488, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-emote:hover, .emoji-guide__picker-emote:first-child {
  background: #383a40;
}

/* line 494, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__picker-emote-image {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

/* line 500, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__autocomplete {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.75rem 1rem 1rem;
}

/* line 505, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__autocomplete-item {
  display: none;
}

/* line 508, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__autocomplete-item--active {
  display: block;
}

/* line 513, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__autocomplete-query {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(242, 243, 245, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
}

/* line 522, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__autocomplete-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 7px;
  background: rgba(88, 101, 242, 0.18);
  color: #f2f3f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.45rem 0.55rem;
}

/* line 535, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__autocomplete-image {
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
}

/* line 541, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.2rem;
  border-radius: 10px;
  background: #383a40;
  padding: 0.55rem 0.6rem;
}

/* line 555, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-plus, .emoji-guide__composer-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
}

/* line 566, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-plus {
  color: #b5bac1;
  background: #4e5058;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

/* line 574, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-input {
  flex: 1 1 auto;
  min-width: 0;
  color: #949ba4;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 584, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-icon {
  position: relative;
  color: #b5bac1;
}

/* line 589, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-icon--emoji {
  color: #5865F2;
  background: rgba(88, 101, 242, 0.14);
  box-shadow: 0 0 0 0.35rem rgba(88, 101, 242, 0.22);
  animation: emoji-guide-picker-pulse 2.4s ease-in-out infinite;
}

/* line 596, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  white-space: nowrap;
  color: #fff;
  background: #111214;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.35rem 0.55rem;
  transform: translateX(-50%);
}

/* line 609, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__composer-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #111214;
  transform: translateX(-50%);
}

/* line 620, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide .discord-chat-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* line 626, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide .discord-chat-icon--gif {
  --discord-icon-cutout: #383a40;
}

/* line 630, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide .discord-chat-icon__cutout {
  fill: var(--discord-icon-cutout);
}

/* line 635, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: 3rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 635, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__nitro {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* line 647, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-copy p {
  color: rgba(242, 243, 245, 0.72);
}

/* line 651, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-visual {
  min-width: 0;
}

/* line 655, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-panel {
  display: grid;
  grid-template-columns: minmax(8rem, 0.75fr) minmax(0, 1.25fr);
  gap: 1rem;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #2b2d31;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
  padding: 1rem;
}

@media only screen and (max-width: 32rem) {
  /* line 655, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__nitro-panel {
    grid-template-columns: 1fr;
  }
}

/* line 671, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-emote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 58%), linear-gradient(140deg, rgba(88, 101, 242, 0.3), rgba(235, 69, 158, 0.28));
}

/* line 683, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-emote-image {
  width: 6.5rem;
  height: 6.5rem;
  object-fit: contain;
  animation: emoji-guide-pop 3.8s ease-in-out infinite;
}

/* line 690, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-badge {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  border-radius: 999px;
  background: rgba(17, 18, 20, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
}

/* line 704, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-rules {
  display: grid;
  gap: 0.75rem;
}

/* line 709, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-rule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #383a40;
  padding: 1rem;
}

/* line 720, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-rule--free {
  box-shadow: inset 3px 0 0 #23a55a;
}

/* line 724, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-rule--locked {
  box-shadow: inset 3px 0 0 #eb459e;
}

/* line 728, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-rule-label {
  color: rgba(242, 243, 245, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* line 736, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__nitro-rule-value {
  color: #f2f3f5;
  font-size: 1rem;
  font-weight: 800;
}

/* line 743, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.14), transparent 50%), linear-gradient(135deg, #5865F2 0%, #101fca 100%);
  color: #fff;
  border-radius: 16px;
  padding: 3rem 2rem;
}

@media only screen and (max-width: 32rem) {
  /* line 743, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__cta {
    padding: 2.25rem 1.25rem;
  }
}

/* line 759, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__cta-inner {
  position: relative;
  z-index: 1;
}

/* line 764, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__cta-title {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

@media only screen and (max-width: 32rem) {
  /* line 764, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__cta-title {
    font-size: 1.6rem;
  }
}

/* line 773, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__cta-text {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* line 781, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* line 788, app/assets/stylesheets/partials/_emoji-guide.scss */
.emoji-guide__cta-actions .button {
  margin: 0;
}

@keyframes emoji-guide-float {
  0%,
100% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(-1.6rem);
  }
}

@keyframes emoji-guide-drift {
  0%,
100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.25rem, 1.6rem, 0) scale(1.14);
  }
}

@keyframes emoji-guide-picker-pulse {
  0%,
100% {
    box-shadow: 0 0 0 0.25rem rgba(88, 101, 242, 0.18);
  }
  50% {
    box-shadow: 0 0 0 0.45rem rgba(88, 101, 242, 0.28);
  }
}

@keyframes emoji-guide-pop {
  0%,
100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-0.35rem) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 839, app/assets/stylesheets/partials/_emoji-guide.scss */
  .emoji-guide__glyph,
.emoji-guide__orb,
.emoji-guide__composer-icon--emoji,
.emoji-guide__nitro-emote-image {
    animation: none;
  }
}

/* line 1, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide {
  --tw-accent: #6441a5;
  --tw-accent-bright: #a970ff;
  background: #fff;
  color: #161616;
  /* ----- Hero ----- */
  /* ----- Decorative layers ----- */
  /* ----- Badge ----- */
  /* ----- Sections ----- */
  /* ----- Intro ----- */
  /* ----- Steps ----- */
  /* ----- Callout ----- */
  /* ----- Requirements ----- */
  /* ----- Viewer chat ----- */
  /* ----- Chat composer preview ----- */
  /* ----- Animated and Bits preview ----- */
  /* ----- CTA ----- */
}

/* line 9, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem;
  background: radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(135deg, #6441a5 0%, #332155 100%);
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 32rem) {
  /* line 9, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__hero {
    padding: 3.5rem 1rem;
  }
}

/* line 24, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 47rem;
  margin: 0 auto;
}

/* line 32, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__scanlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
}

/* line 45, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* line 53, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

/* line 60, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__glow--a {
  width: 20rem;
  height: 20rem;
  top: -8rem;
  left: -5rem;
  background: rgba(255, 255, 255, 0.22);
  animation: twitch-guide-drift 17s ease-in-out infinite;
}

/* line 69, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__glow--b {
  width: 15rem;
  height: 15rem;
  right: 6%;
  bottom: -7rem;
  background: rgba(166, 142, 210, 0.55);
  animation: twitch-guide-drift 21s ease-in-out infinite reverse;
}

/* line 78, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__glyph {
  position: absolute;
  display: block;
  color: #fff;
  will-change: transform;
}

/* line 85, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__glyph--hero {
  --glyph-tilt: -10deg;
  width: 20rem;
  top: -2.5rem;
  right: -3rem;
  opacity: 0.14;
  transform: rotate(var(--glyph-tilt));
  animation: twitch-guide-float 9s ease-in-out infinite;
}

@media only screen and (max-width: 64rem) {
  /* line 85, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__glyph--hero {
    width: 15rem;
    right: -4rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 85, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__glyph--hero {
    width: 12rem;
    top: -1.5rem;
  }
}

/* line 105, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__glyph--cta {
  --glyph-tilt: 12deg;
  width: 15rem;
  bottom: -5rem;
  left: -3.5rem;
  opacity: 0.14;
  transform: rotate(var(--glyph-tilt));
  animation: twitch-guide-float 8s ease-in-out infinite;
}

/* line 116, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.25rem;
}

/* line 130, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__title {
  font-size: 3.5rem;
  line-height: 1.06;
  margin-bottom: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 130, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__title {
    font-size: 2.75rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 130, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__title {
    font-size: 2.05rem;
  }
}

/* line 144, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 41rem;
}

/* line 152, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* line 162, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero-meta-item {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* line 168, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero-meta-item + .twitch-guide__hero-meta-item::before {
  content: '';
  position: absolute;
  left: -0.8rem;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}

/* line 181, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

/* line 188, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__hero-actions .button {
  margin: 0;
}

/* line 194, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__section--requirements, .twitch-guide__section--faq {
  background: rgba(100, 65, 165, 0.05);
}

/* line 199, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__section--bits {
  background: #161616;
  color: #fff;
}

/* line 204, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__head {
  max-width: 42rem;
  margin-bottom: 2.35rem;
}

/* line 208, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* line 215, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__head-title {
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

@media only screen and (max-width: 32rem) {
  /* line 215, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__head-title {
    font-size: 1.7rem;
  }
}

/* line 225, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__head-text {
  color: rgba(22, 22, 22, 0.62);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* line 232, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__intro {
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(22, 22, 22, 0.78);
}

/* line 238, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__intro p + p {
  margin-top: 1.15rem;
}

/* line 243, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__note {
  background: rgba(100, 65, 165, 0.08);
  border-left: 3px solid var(--tw-accent-bright);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  font-size: 1rem;
}

/* line 250, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__note strong {
  color: #57388f;
  font-weight: 700;
}

/* line 257, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 263, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

/* line 270, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: 0;
  width: 2px;
  background: rgba(100, 65, 165, 0.22);
  transform: translateX(-50%);
}

/* line 281, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step:last-child {
  padding-bottom: 0;
}

/* line 286, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--tw-accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 0.5rem 1.2rem rgba(100, 65, 165, 0.35);
}

/* line 300, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step-body {
  padding-top: 0.25rem;
}

/* line 304, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

@media only screen and (max-width: 32rem) {
  /* line 304, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__step-title {
    font-size: 1.15rem;
  }
}

/* line 314, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__step-text {
  color: rgba(22, 22, 22, 0.7);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* line 322, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__callout {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 2rem;
  background: #161616;
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}

@media only screen and (max-width: 32rem) {
  /* line 322, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__callout {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* line 338, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__callout-tag {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #161616;
  background: var(--tw-accent-bright);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  margin-top: 0.15rem;
}

/* line 351, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__callout-title {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* line 356, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__callout-body p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}

/* line 361, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__callout-body p strong {
  color: #fff;
}

/* line 367, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__req-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 367, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__req-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 367, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__req-grid {
    grid-template-columns: 1fr;
  }
}

/* line 381, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__req-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-top: 3px solid var(--tw-accent);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
}

/* line 393, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__req-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* line 401, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__req-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
}

/* line 409, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__req-value {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #161616;
}

/* line 417, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__viewers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 417, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__viewers {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 431, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__viewers-copy .twitch-guide__head-title, .twitch-guide__bits-copy .twitch-guide__head-title {
  margin-bottom: 0.85rem;
}

/* line 435, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__viewers-copy p, .twitch-guide__bits-copy p {
  color: rgba(22, 22, 22, 0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* line 443, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__viewers-preview {
  min-width: 0;
}

/* line 448, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-composer {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 27rem;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 1.25rem 1.25rem;
  background: #18181b;
  box-shadow: 0 1.2rem 2.6rem rgba(22, 22, 22, 0.2), 0.45rem 0.45rem 0 rgba(24, 24, 27, 0.18), 0.7rem 0.7rem 0 rgba(24, 24, 27, 0.1);
  padding: 0.6rem 0.55rem 0.7rem;
}

@media only screen and (max-width: 64rem) {
  /* line 448, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-composer {
    margin-left: 0;
  }
}

/* line 468, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.85rem;
  border: 2px solid #d3d3dc;
  border-radius: 6px;
  background: #18181b;
  padding: 0 0.75rem;
}

@media only screen and (max-width: 32rem) {
  /* line 468, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-input {
    gap: 0.55rem;
    min-height: 3.5rem;
    padding: 0 0.65rem;
  }
}

/* line 486, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-crown, .twitch-guide__chat-action, .twitch-guide__chat-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* line 495, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-crown {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: #00a3e8;
  color: #fff;
}

/* line 503, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-placeholder {
  min-width: 0;
  overflow: hidden;
  color: #c9c9d1;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 32rem) {
  /* line 503, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-placeholder {
    font-size: 1.15rem;
  }
}

/* line 518, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-action {
  color: #f4f4f5;
}

/* line 522, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-action--emotes {
  position: relative;
}

/* line 526, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-icon {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

@media only screen and (max-width: 32rem) {
  /* line 526, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-icon {
    width: 1.45rem;
    height: 1.45rem;
  }
}

/* line 542, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-crown .twitch-guide__chat-icon, .twitch-guide__chat-reward-bag .twitch-guide__chat-icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* line 548, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
}

@media only screen and (max-width: 32rem) {
  /* line 548, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-tools {
    gap: 0.65rem;
  }
}

/* line 559, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-reward-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.85rem;
  height: 3.1rem;
  border-radius: 999px;
  background: #00f593;
  color: #0e0e10;
}

@media only screen and (max-width: 32rem) {
  /* line 559, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-reward-picker {
    width: 4.75rem;
    height: 3.2rem;
  }
}

/* line 576, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-reward-bag {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 582, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 15.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #18181b;
  box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.36);
  padding: 0.65rem;
  transform: translateX(-50%);
}

/* line 598, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-popover-title {
  color: #adadb8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* line 607, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

/* line 613, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-suggestion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 2.35rem;
  border-radius: 4px;
  background: #232327;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  font-size: 0;
}

/* line 624, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-suggestion:nth-child(2), .twitch-guide__chat-emote-suggestion:nth-child(7), .twitch-guide__chat-emote-suggestion:nth-child(12) {
  background: #2b2b31;
}

/* line 631, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-popover-anchor {
  position: absolute;
  left: 50%;
  bottom: -0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  background: #18181b;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transform: translateX(-50%) rotate(45deg);
}

/* line 643, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-emote-image {
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
}

/* line 649, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-settings {
  color: #f4f4f5;
}

/* line 653, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-settings .twitch-guide__chat-icon {
  width: 1.7rem;
  height: 1.7rem;
  stroke-width: 2.4;
}

/* line 659, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__chat-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 5.7rem;
  min-height: 3.1rem;
  border-radius: 999px;
  background: #9147ff;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

@media only screen and (max-width: 32rem) {
  /* line 659, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__chat-submit {
    min-width: 5.25rem;
    min-height: 3.2rem;
    font-size: 1.1rem;
  }
}

/* line 679, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: 3rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 679, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__bits {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* line 692, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-copy p {
  color: rgba(255, 255, 255, 0.76);
}

/* line 697, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-visual {
  min-width: 0;
}

/* line 701, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-stage {
  position: relative;
  overflow: hidden;
  min-height: 16rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 70% 18%, rgba(100, 65, 165, 0.5), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}

/* line 718, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-reel {
  position: absolute;
  inset: 1.5rem;
}

/* line 723, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-frame {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 6.25rem;
  padding: 0.7rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.28);
  animation: twitch-guide-pop 4.5s ease-in-out infinite;
}

/* line 738, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-frame--1 {
  left: 6%;
  top: 18%;
  transform: rotate(-8deg);
}

/* line 744, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-frame--2 {
  left: 50%;
  top: 7%;
  transform: translateX(-50%) rotate(5deg);
  animation-delay: 0.45s;
}

/* line 751, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-frame--3 {
  right: 7%;
  bottom: 16%;
  transform: rotate(9deg);
  animation-delay: 0.9s;
}

/* line 758, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-emote {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 764, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-spark {
  position: absolute;
  width: 0.65rem;
  height: 0.65rem;
  background: var(--tw-accent-bright);
  transform: rotate(45deg);
  animation: twitch-guide-spark 2.4s ease-in-out infinite;
}

/* line 773, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-spark--a {
  left: 22%;
  top: 12%;
}

/* line 778, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-spark--b {
  right: 24%;
  top: 34%;
  animation-delay: 0.5s;
}

/* line 784, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-spark--c {
  left: 41%;
  bottom: 18%;
  animation-delay: 1s;
}

/* line 790, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-panel {
  margin-top: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}

/* line 798, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* line 805, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* line 813, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-pill, .twitch-guide__bits-count {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}

/* line 820, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-pill {
  border-radius: 999px;
  background: rgba(169, 112, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  padding: 0.28rem 0.65rem;
}

/* line 827, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-meter {
  overflow: hidden;
  height: 0.55rem;
  margin: 0.85rem 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

/* line 835, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__bits-fill {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tw-accent-bright), #fff);
}

/* line 844, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.14), transparent 50%), linear-gradient(135deg, #6441a5 0%, #332155 100%);
  color: #fff;
  border-radius: 16px;
  padding: 3rem 2rem;
}

@media only screen and (max-width: 32rem) {
  /* line 844, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__cta {
    padding: 2.25rem 1.25rem;
  }
}

/* line 860, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__cta-inner {
  position: relative;
  z-index: 2;
}

/* line 865, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__cta-title {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

@media only screen and (max-width: 32rem) {
  /* line 865, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__cta-title {
    font-size: 1.6rem;
  }
}

/* line 874, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__cta-text {
  max-width: 35rem;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* line 882, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

/* line 889, app/assets/stylesheets/partials/_twitch-guide.scss */
.twitch-guide__cta-actions .button {
  margin: 0;
}

@keyframes twitch-guide-float {
  0%,
100% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(-1.5rem);
  }
}

@keyframes twitch-guide-drift {
  0%,
100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2rem, 1.5rem, 0) scale(1.16);
  }
}

@keyframes twitch-guide-pop {
  0%,
100% {
    margin-top: 0;
  }
  50% {
    margin-top: -0.55rem;
  }
}

@keyframes twitch-guide-spark {
  0%,
100% {
    opacity: 0.35;
    transform: rotate(45deg) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 942, app/assets/stylesheets/partials/_twitch-guide.scss */
  .twitch-guide__glyph,
.twitch-guide__glow,
.twitch-guide__bits-frame,
.twitch-guide__bits-spark {
    animation: none;
  }
}

/* line 1, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide {
  --sl-accent: #4A154B;
  --sl-accent-bright: #36c5f0;
  background: #fff;
  color: #161616;
  /* ----- Hero ----- */
  /* ----- Decorative layers ----- */
  /* ----- Badge ----- */
  /* ----- Sections ----- */
  /* ----- Intro ----- */
  /* ----- Steps ----- */
  /* ----- Callout ----- */
  /* ----- Requirements ----- */
  /* ----- Workspace preview ----- */
  /* ----- Alias and reaction preview ----- */
  /* ----- CTA ----- */
}

/* line 9, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem;
  background: radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(135deg, #6a1f6e 0%, #4A154B 100%);
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 32rem) {
  /* line 9, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__hero {
    padding: 3.5rem 1rem;
  }
}

/* line 24, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero-inner {
  position: relative;
  z-index: 2;
  max-width: 47rem;
  margin: 0 auto;
}

/* line 32, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* line 40, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}

/* line 47, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__glow--a {
  width: 20rem;
  height: 20rem;
  top: -8rem;
  left: -5rem;
  background: rgba(255, 255, 255, 0.18);
  animation: slack-guide-drift 17s ease-in-out infinite;
}

/* line 56, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__glow--b {
  width: 15rem;
  height: 15rem;
  right: 6%;
  bottom: -7rem;
  background: rgba(54, 197, 240, 0.4);
  animation: slack-guide-drift 21s ease-in-out infinite reverse;
}

/* line 65, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__glyph {
  position: absolute;
  display: block;
  color: #fff;
  will-change: transform;
}

/* line 72, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__glyph--hero {
  --glyph-tilt: -10deg;
  width: 18rem;
  top: -2rem;
  right: -2.5rem;
  opacity: 0.13;
  transform: rotate(var(--glyph-tilt));
  animation: slack-guide-float 9s ease-in-out infinite;
}

@media only screen and (max-width: 64rem) {
  /* line 72, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__glyph--hero {
    width: 13rem;
    right: -3rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 72, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__glyph--hero {
    width: 10rem;
    top: -1.5rem;
  }
}

/* line 92, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__glyph--cta {
  --glyph-tilt: 12deg;
  width: 13rem;
  bottom: -4rem;
  left: -3rem;
  opacity: 0.13;
  transform: rotate(var(--glyph-tilt));
  animation: slack-guide-float 8s ease-in-out infinite;
}

/* line 103, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.25rem;
}

/* line 117, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__title {
  font-size: 3.5rem;
  line-height: 1.06;
  margin-bottom: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 117, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__title {
    font-size: 2.75rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 117, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__title {
    font-size: 2.05rem;
  }
}

/* line 131, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 41rem;
}

/* line 139, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* line 149, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero-meta-item {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* line 155, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero-meta-item + .slack-guide__hero-meta-item::before {
  content: '';
  position: absolute;
  left: -0.8rem;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}

/* line 168, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

/* line 175, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__hero-actions .button {
  margin: 0;
}

/* line 181, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__section--requirements, .slack-guide__section--faq {
  background: rgba(74, 21, 75, 0.05);
}

/* line 186, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__section--aliases {
  background: #1d1c1d;
  color: #fff;
}

/* line 191, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__head {
  max-width: 42rem;
  margin-bottom: 2.35rem;
}

/* line 195, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* line 202, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__head-title {
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

@media only screen and (max-width: 32rem) {
  /* line 202, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__head-title {
    font-size: 1.7rem;
  }
}

/* line 212, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__head-text {
  color: rgba(22, 22, 22, 0.62);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* line 219, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__intro {
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(22, 22, 22, 0.78);
}

/* line 225, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__intro p + p {
  margin-top: 1.15rem;
}

/* line 230, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__note {
  background: rgba(74, 21, 75, 0.07);
  border-left: 3px solid var(--sl-accent-bright);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  font-size: 1rem;
}

/* line 237, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__note strong {
  color: #4A154B;
  font-weight: 700;
}

/* line 244, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 250, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

/* line 257, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: 0;
  width: 2px;
  background: rgba(74, 21, 75, 0.22);
  transform: translateX(-50%);
}

/* line 268, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step:last-child {
  padding-bottom: 0;
}

/* line 273, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--sl-accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 0.5rem 1.2rem rgba(74, 21, 75, 0.35);
}

/* line 287, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step-body {
  padding-top: 0.25rem;
}

/* line 291, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

@media only screen and (max-width: 32rem) {
  /* line 291, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__step-title {
    font-size: 1.15rem;
  }
}

/* line 301, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__step-text {
  color: rgba(22, 22, 22, 0.7);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* line 309, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__callout {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 2rem;
  background: #161616;
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}

@media only screen and (max-width: 32rem) {
  /* line 309, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__callout {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* line 325, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__callout-tag {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #161616;
  background: var(--sl-accent-bright);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  margin-top: 0.15rem;
}

/* line 338, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__callout-title {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* line 343, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__callout-body p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}

/* line 348, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__callout-body p strong {
  color: #fff;
}

/* line 354, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__req-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 354, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__req-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 354, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__req-grid {
    grid-template-columns: 1fr;
  }
}

/* line 368, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__req-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-top: 3px solid var(--sl-accent);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
}

/* line 380, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__req-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* line 388, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__req-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
}

/* line 396, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__req-value {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #161616;
}

/* line 404, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 404, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__workspace {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 418, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__workspace-copy .slack-guide__head-title, .slack-guide__aliases-copy .slack-guide__head-title {
  margin-bottom: 0.85rem;
}

/* line 422, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__workspace-copy p, .slack-guide__aliases-copy p {
  color: rgba(22, 22, 22, 0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* line 430, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__workspace-preview {
  min-width: 0;
}

/* line 434, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-panel {
  overflow: hidden;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.12);
}

/* line 443, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.09);
  color: #1d1c1d;
  font-size: 0.95rem;
  font-weight: 800;
}

/* line 454, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #2eb67d;
}

/* line 461, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
}

/* line 468, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-line, .slack-guide__reaction-message {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

/* line 475, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-avatar, .slack-guide__reaction-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: #4a154b;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

/* line 490, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-content, .slack-guide__reaction-content {
  min-width: 0;
}

/* line 495, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-name, .slack-guide__reaction-name {
  display: block;
  margin-bottom: 0.2rem;
  color: #1d1c1d;
  font-size: 0.9rem;
  font-weight: 800;
}

/* line 504, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-text, .slack-guide__reaction-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: #1d1c1d;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* line 515, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-emoji {
  display: inline-flex;
  align-items: center;
  width: 1.35rem;
  height: 1.35rem;
}

/* line 522, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__message-emoji-image, .slack-guide__emoji-cell-image, .slack-guide__emoji-autocomplete-image, .slack-guide__alias-emote-image, .slack-guide__reaction-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 532, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-menu {
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0.8rem 1.6rem rgba(22, 22, 22, 0.12);
  padding: 0.85rem;
}

/* line 540, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-menu-title {
  display: block;
  margin-bottom: 0.65rem;
  color: rgba(22, 22, 22, 0.55);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* line 550, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.25rem;
}

/* line 556, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  border-radius: 5px;
  padding: 0.22rem;
}

/* line 564, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-cell:first-child {
  background: rgba(18, 100, 163, 0.1);
}

/* line 569, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-cell-image {
  width: 1.45rem;
  height: 1.45rem;
}

/* line 574, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-autocomplete {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  border-radius: 6px;
  background: #1264a3;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.38rem 0.5rem;
}

/* line 588, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__emoji-autocomplete-image {
  width: 1.2rem;
  height: 1.2rem;
}

/* line 593, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid rgba(22, 22, 22, 0.09);
  padding: 0.85rem 1rem 0.7rem;
}

/* line 601, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-text {
  width: 100%;
  color: #1d1c1d;
  font-size: 1.05rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 611, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-mention {
  border-radius: 4px;
  background: rgba(54, 197, 240, 0.2);
  color: #1264a3;
  padding: 0 0.12rem;
}

/* line 618, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

/* line 625, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 5px;
  color: rgba(22, 22, 22, 0.66);
  background: transparent;
  font-size: 1.05rem;
  font-weight: 800;
}

/* line 639, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* line 650, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-button--plus {
  background: rgba(22, 22, 22, 0.06);
  font-size: 1.55rem;
  font-weight: 400;
}

/* line 656, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-button--text {
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

/* line 661, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-button--emoji {
  color: #1d1c1d;
}

/* line 665, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-divider {
  width: 1px;
  height: 1.5rem;
  background: rgba(22, 22, 22, 0.12);
  margin: 0 0.2rem;
}

/* line 672, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__composer-button--disabled {
  color: rgba(22, 22, 22, 0.2);
}

/* line 677, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__aliases {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: 3rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 677, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__aliases {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* line 689, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__aliases-copy p {
  color: rgba(255, 255, 255, 0.72);
}

/* line 693, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__aliases-preview {
  min-width: 0;
}

/* line 697, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__alias-panel {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
  padding: 1rem;
}

/* line 705, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__alias-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: rgba(22, 22, 22, 0.04);
  padding: 0.75rem;
}

@media only screen and (max-width: 32rem) {
  /* line 705, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__alias-map {
    grid-template-columns: 1fr;
  }
}

/* line 720, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__alias-token {
  min-width: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.1);
  color: #1d1c1d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  overflow: hidden;
  padding: 0.45rem 0.55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 735, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__alias-arrow {
  color: #1264a3;
  font-weight: 800;
}

/* line 740, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__alias-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

/* line 748, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__reaction-message {
  border-top: 1px solid rgba(22, 22, 22, 0.08);
  padding-top: 1rem;
}

/* line 753, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

/* line 760, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__reaction-pill, .slack-guide__reaction-add {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
}

/* line 772, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__reaction-pill {
  background: rgba(18, 100, 163, 0.1);
  box-shadow: inset 0 0 0 1px rgba(18, 100, 163, 0.2);
  color: #1d1c1d;
}

/* line 778, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__reaction-add {
  background: rgba(22, 22, 22, 0.06);
  color: rgba(22, 22, 22, 0.6);
}

/* line 783, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__reaction-image {
  width: 1.1rem;
  height: 1.1rem;
}

/* line 789, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.13), transparent 50%), linear-gradient(135deg, #6a1f6e 0%, #4A154B 100%);
  color: #fff;
  border-radius: 16px;
  padding: 3rem 2rem;
}

@media only screen and (max-width: 32rem) {
  /* line 789, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__cta {
    padding: 2.25rem 1.25rem;
  }
}

/* line 805, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__cta-inner {
  position: relative;
  z-index: 2;
}

/* line 810, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__cta-title {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

@media only screen and (max-width: 32rem) {
  /* line 810, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__cta-title {
    font-size: 1.6rem;
  }
}

/* line 819, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__cta-text {
  max-width: 35rem;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* line 827, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

/* line 834, app/assets/stylesheets/partials/_slack-guide.scss */
.slack-guide__cta-actions .button {
  margin: 0;
}

@keyframes slack-guide-float {
  0%,
100% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(-1.5rem);
  }
}

@keyframes slack-guide-drift {
  0%,
100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2rem, 1.5rem, 0) scale(1.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 863, app/assets/stylesheets/partials/_slack-guide.scss */
  .slack-guide__glyph,
.slack-guide__glow {
    animation: none;
  }
}

/* line 1, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide {
  --guide-accent: #5865F2;
  background: #fff;
  color: #161616;
  /* ----- Hero ----- */
  /* ----- Decorative background (hero + CTA) ----- */
  /* ----- Sections ----- */
  /* ----- Intro ----- */
  /* ----- Steps ----- */
  /* ----- Callout ----- */
  /* ----- Requirements ----- */
  /* ----- Send preview ----- */
  /* ----- Sticker picker preview ----- */
  /* ----- Sticker vs emoji preview ----- */
  /* ----- CTA ----- */
}

/* line 7, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem;
  background: radial-gradient(circle at 80% -10%, rgba(255, 255, 255, 0.16), transparent 55%), linear-gradient(135deg, #5865F2 0%, #101fca 100%);
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 32rem) {
  /* line 7, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__hero {
    padding: 3.5rem 1rem;
  }
}

/* line 22, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin: 0 auto;
}

/* line 30, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* line 38, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__glyph {
  position: absolute;
  display: block;
  color: #fff;
  will-change: transform;
}

/* line 45, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__glyph--hero {
  --glyph-tilt: -12deg;
  width: 33rem;
  top: -3.5rem;
  right: -5.5rem;
  opacity: 0.14;
  transform: rotate(var(--glyph-tilt));
  animation: sticker-guide-float 9s ease-in-out infinite;
}

@media only screen and (max-width: 64rem) {
  /* line 45, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__glyph--hero {
    width: 26rem;
    top: -2.5rem;
    right: -7rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 45, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__glyph--hero {
    width: 20rem;
    top: -1.5rem;
    right: -6rem;
  }
}

/* line 67, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__glyph--cta {
  --glyph-tilt: 13deg;
  width: 24rem;
  bottom: -8.5rem;
  left: -6rem;
  opacity: 0.12;
  transform: rotate(var(--glyph-tilt));
  animation: sticker-guide-float 8s ease-in-out infinite;
}

/* line 77, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform;
}

/* line 84, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__orb--a {
  width: 19rem;
  height: 19rem;
  top: -7rem;
  left: -5rem;
  background: rgba(255, 255, 255, 0.22);
  animation: sticker-guide-drift 15s ease-in-out infinite;
}

/* line 93, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__orb--b {
  width: 15rem;
  height: 15rem;
  right: 6%;
  bottom: -7rem;
  background: rgba(173, 180, 249, 0.5);
  animation: sticker-guide-drift 19s ease-in-out infinite reverse;
}

/* line 102, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  margin-bottom: 1.25rem;
}

/* line 116, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__title {
  font-size: 3.5rem;
  line-height: 1.07;
  margin-bottom: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 116, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__title {
    font-size: 2.75rem;
  }
}

@media only screen and (max-width: 32rem) {
  /* line 116, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__title {
    font-size: 2.1rem;
  }
}

/* line 130, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__lead {
  font-size: 1.2rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto;
  max-width: 40rem;
}

/* line 138, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* line 148, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero-meta-item {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* line 154, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero-meta-item + .sticker-guide__hero-meta-item::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}

/* line 167, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.85rem;
}

/* line 174, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__hero-actions .button {
  margin: 0;
}

/* line 180, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__section--requirements, .sticker-guide__section--faq {
  background: rgba(88, 101, 242, 0.045);
}

/* line 185, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__section--compare {
  background: #313338;
  color: #f2f3f5;
}

/* line 190, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__head {
  max-width: 42rem;
  margin-bottom: 2.25rem;
}

/* line 194, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* line 201, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__head-title {
  font-size: 2.1rem;
  line-height: 1.15;
  margin-bottom: 0.65rem;
}

@media only screen and (max-width: 32rem) {
  /* line 201, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__head-title {
    font-size: 1.7rem;
  }
}

/* line 211, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__head-text {
  color: rgba(22, 22, 22, 0.62);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* line 218, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__intro {
  max-width: 44rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(22, 22, 22, 0.78);
}

/* line 224, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__intro p + p {
  margin-top: 1.1rem;
}

/* line 229, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__note {
  background: rgba(88, 101, 242, 0.07);
  border-left: 3px solid var(--guide-accent);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.15rem;
  font-size: 1rem;
}

/* line 236, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__note strong {
  color: var(--guide-accent);
}

/* line 242, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: guide-step;
}

/* line 249, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
}

/* line 256, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 3.25rem;
  bottom: 0;
  width: 2px;
  background: rgba(88, 101, 242, 0.22);
  transform: translateX(-50%);
}

/* line 267, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step:last-child {
  padding-bottom: 0;
}

/* line 272, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--guide-accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 0.5rem 1.2rem rgba(88, 101, 242, 0.35);
}

/* line 286, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step-body {
  padding-top: 0.25rem;
}

/* line 290, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step-title {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

/* line 296, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__step-text {
  color: rgba(22, 22, 22, 0.7);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0;
}

/* line 304, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__callout {
  margin-top: 2rem;
  background: #161616;
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}

/* line 311, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__callout p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin: 0;
}

/* line 317, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__callout strong {
  color: #fff;
}

/* line 322, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__callout-title {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

/* line 328, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__req-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media only screen and (max-width: 64rem) {
  /* line 328, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__req-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 32rem) {
  /* line 328, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__req-grid {
    grid-template-columns: 1fr;
  }
}

/* line 342, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__req-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 22, 22, 0.09);
  border-top: 3px solid var(--guide-accent);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.04);
}

/* line 353, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__req-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* line 361, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__req-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.5);
}

/* line 369, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__req-value {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: #161616;
}

/* line 377, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__send {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 377, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__send {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* line 391, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__send-copy .sticker-guide__head-title, .sticker-guide__compare-copy .sticker-guide__head-title {
  margin-bottom: 0.85rem;
}

/* line 395, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__send-copy p, .sticker-guide__compare-copy p {
  color: rgba(22, 22, 22, 0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* line 403, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__send-preview {
  min-width: 0;
}

/* line 408, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker {
  position: relative;
  min-height: 19rem;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 14px;
  background: #313338;
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.14);
  padding: 1rem;
}

/* line 418, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-window {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: #2b2d31;
}

/* line 425, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* line 434, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-title {
  color: #f2f3f5;
  font-size: 0.95rem;
  font-weight: 800;
}

/* line 440, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-tab {
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.2);
  color: #f2f3f5;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
}

/* line 451, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 1rem;
}

/* line 458, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #383a40;
  padding: 0.55rem;
}

/* line 468, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-sticker--empty {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #383a40;
}

/* line 474, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__picker-sticker-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 480, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.2rem;
  border-radius: 10px;
  background: #383a40;
  padding: 0.55rem 0.6rem;
}

/* line 494, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-plus, .sticker-guide__composer-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
}

/* line 505, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-plus {
  color: #b5bac1;
  background: #4e5058;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

/* line 513, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-input {
  flex: 1 1 auto;
  min-width: 0;
  color: #949ba4;
  font-size: 0.9rem;
}

/* line 520, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-icon {
  position: relative;
  color: #b5bac1;
}

/* line 525, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-icon--sticker {
  color: #5865F2;
  background: rgba(88, 101, 242, 0.14);
  box-shadow: 0 0 0 0.35rem rgba(88, 101, 242, 0.22);
  animation: sticker-guide-picker-pulse 2.4s ease-in-out infinite;
}

/* line 532, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.7rem);
  white-space: nowrap;
  color: #fff;
  background: #111214;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.35rem 0.55rem;
  transform: translateX(-50%);
}

/* line 545, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__composer-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #111214;
  transform: translateX(-50%);
}

/* line 556, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide .discord-chat-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* line 562, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide .discord-chat-icon--gif {
  --discord-icon-cutout: #383a40;
}

/* line 566, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide .discord-chat-icon__cutout {
  fill: var(--discord-icon-cutout);
}

/* line 571, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__compare {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: 3rem;
  align-items: center;
}

@media only screen and (max-width: 64rem) {
  /* line 571, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__compare {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* line 584, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__compare-copy p {
  color: rgba(242, 243, 245, 0.72);
}

/* line 589, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__compare-visual {
  min-width: 0;
}

/* line 593, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #2b2d31;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
}

/* line 601, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(242, 243, 245, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* line 614, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #23a55a;
}

/* line 621, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

@media only screen and (max-width: 32rem) {
  /* line 621, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__expression-grid {
    grid-template-columns: 1fr;
  }
}

/* line 632, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-card {
  min-height: 13rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #383a40;
  padding: 1rem;
}

/* line 640, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-card--sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* line 648, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-card--emoji {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

/* line 655, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-label {
  align-self: flex-start;
  color: rgba(242, 243, 245, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* line 664, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-sticker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.25rem;
  height: 7.25rem;
  margin: 0.6rem auto;
  padding: 0.7rem;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.75), transparent 56%), linear-gradient(140deg, rgba(88, 101, 242, 0.35), rgba(35, 165, 90, 0.28));
  animation: sticker-guide-pop 4s ease-in-out infinite;
}

/* line 679, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-sticker-image, .sticker-guide__expression-emoji-image, .sticker-guide__expression-reaction-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* line 687, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-note {
  color: rgba(242, 243, 245, 0.62);
  font-size: 0.86rem;
  font-weight: 600;
}

/* line 693, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-message {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: #f2f3f5;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* line 703, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-emoji {
  display: inline-flex;
  width: 1.45rem;
  height: 1.45rem;
}

/* line 709, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* line 715, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.22);
  box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.32);
  color: #f2f3f5;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
}

/* line 729, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__expression-reaction-image {
  width: 1.1rem;
  height: 1.1rem;
}

/* line 735, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.14), transparent 50%), linear-gradient(135deg, #5865F2 0%, #101fca 100%);
  color: #fff;
  border-radius: 16px;
  padding: 3rem 2rem;
}

@media only screen and (max-width: 32rem) {
  /* line 735, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__cta {
    padding: 2.25rem 1.25rem;
  }
}

/* line 751, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__cta-inner {
  position: relative;
  z-index: 1;
}

/* line 756, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__cta-title {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

@media only screen and (max-width: 32rem) {
  /* line 756, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__cta-title {
    font-size: 1.6rem;
  }
}

/* line 765, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__cta-text {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* line 773, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* line 780, app/assets/stylesheets/partials/_sticker-guide.scss */
.sticker-guide__cta-actions .button {
  margin: 0;
}

@keyframes sticker-guide-float {
  0%,
100% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(var(--glyph-tilt, 0deg)) translateY(-1.6rem);
  }
}

@keyframes sticker-guide-drift {
  0%,
100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.25rem, 1.6rem, 0) scale(1.14);
  }
}

@keyframes sticker-guide-pop {
  0%,
100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-0.45rem) rotate(2deg);
  }
}

@keyframes sticker-guide-picker-pulse {
  0%,
100% {
    box-shadow: 0 0 0 0.25rem rgba(88, 101, 242, 0.18);
  }
  50% {
    box-shadow: 0 0 0 0.45rem rgba(88, 101, 242, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 831, app/assets/stylesheets/partials/_sticker-guide.scss */
  .sticker-guide__glyph,
.sticker-guide__orb,
.sticker-guide__expression-sticker,
.sticker-guide__composer-icon--sticker {
    animation: none;
  }
}

/* line 5, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide,
.sticker-guide {
  --howto-accent: #5865F2;
  --howto-accent-rgb: 88, 101, 242;
  --howto-accent-dark: #1122dd;
}

/* line 12, app/assets/stylesheets/partials/_how_to_guides.scss */
.twitch-guide {
  --howto-accent: #6441a5;
  --howto-accent-rgb: 100, 65, 165;
  --howto-accent-dark: #3c2763;
}

/* line 18, app/assets/stylesheets/partials/_how_to_guides.scss */
.slack-guide {
  --howto-accent: #4A154B;
  --howto-accent-rgb: 74, 21, 75;
  --howto-accent-dark: #230a23;
}

/* line 24, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide,
.sticker-guide,
.twitch-guide,
.slack-guide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 46%, #ffffff 100%);
}

/* line 35, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero,
.sticker-guide__hero,
.twitch-guide__hero,
.slack-guide__hero {
  isolation: isolate;
  min-height: clamp(31rem, 55vw, 42rem);
  padding: clamp(4.5rem, 8vw, 7.25rem) 2rem clamp(4rem, 7vw, 6.4rem);
  background: radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.2), transparent 22rem), radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.18), transparent 24rem), linear-gradient(135deg, var(--howto-accent) 0%, var(--howto-accent-dark) 100%);
}

/* line 47, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero::before,
.sticker-guide__hero::before,
.twitch-guide__hero::before,
.slack-guide__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .48;
  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(120deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 22%, #000 82%, transparent 100%);
}

/* line 61, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero::after,
.sticker-guide__hero::after,
.twitch-guide__hero::after,
.slack-guide__hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7rem;
  z-index: -1;
  width: min(72rem, 92vw);
  height: 15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  filter: blur(34px);
  transform: translateX(-50%);
}

@media only screen and (max-width: 32rem) {
  /* line 35, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__hero,
.sticker-guide__hero,
.twitch-guide__hero,
.slack-guide__hero {
    min-height: auto;
    padding: 3.8rem 1rem 4rem;
  }
}

/* line 81, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-inner,
.sticker-guide__hero-inner,
.twitch-guide__hero-inner,
.slack-guide__hero-inner {
  display: flex;
  flex-flow: column;
  align-items: center;
  max-width: 54rem;
}

/* line 91, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__badge,
.sticker-guide__badge,
.twitch-guide__badge,
.slack-guide__badge {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0.85rem 1.8rem rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
}

/* line 103, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__title,
.sticker-guide__title,
.twitch-guide__title,
.slack-guide__title {
  max-width: 16ch;
  margin: .75rem auto 1rem;
  font-size: clamp(2.35rem, 5vw, 4.65rem);
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

/* line 115, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__lead,
.sticker-guide__lead,
.twitch-guide__lead,
.slack-guide__lead {
  max-width: 47rem;
  font-size: clamp(1.05rem, 1.45vw, 1.24rem);
  line-height: 1.68;
}

/* line 124, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-meta,
.sticker-guide__hero-meta,
.twitch-guide__hero-meta,
.slack-guide__hero-meta {
  gap: .65rem;
  margin-top: 1.65rem;
}

/* line 132, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-meta-item,
.sticker-guide__hero-meta-item,
.twitch-guide__hero-meta-item,
.slack-guide__hero-meta-item {
  padding: .42rem .72rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
}

/* line 143, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-meta-item + .emoji-guide__hero-meta-item::before, .emoji-guide__hero-meta-item + .sticker-guide__hero-meta-item::before, .emoji-guide__hero-meta-item + .twitch-guide__hero-meta-item::before, .emoji-guide__hero-meta-item + .slack-guide__hero-meta-item::before,
.sticker-guide__hero-meta-item + .emoji-guide__hero-meta-item::before,
.sticker-guide__hero-meta-item + .sticker-guide__hero-meta-item::before,
.sticker-guide__hero-meta-item + .twitch-guide__hero-meta-item::before,
.sticker-guide__hero-meta-item + .slack-guide__hero-meta-item::before,
.twitch-guide__hero-meta-item + .emoji-guide__hero-meta-item::before,
.twitch-guide__hero-meta-item + .sticker-guide__hero-meta-item::before,
.twitch-guide__hero-meta-item + .twitch-guide__hero-meta-item::before,
.twitch-guide__hero-meta-item + .slack-guide__hero-meta-item::before,
.slack-guide__hero-meta-item + .emoji-guide__hero-meta-item::before,
.slack-guide__hero-meta-item + .sticker-guide__hero-meta-item::before,
.slack-guide__hero-meta-item + .twitch-guide__hero-meta-item::before,
.slack-guide__hero-meta-item + .slack-guide__hero-meta-item::before {
  content: none;
}

/* line 148, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-actions,
.sticker-guide__hero-actions,
.twitch-guide__hero-actions,
.slack-guide__hero-actions {
  margin-top: 2rem;
}

/* line 154, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-actions .button,
.sticker-guide__hero-actions .button,
.twitch-guide__hero-actions .button,
.slack-guide__hero-actions .button {
  min-height: 3.2rem;
  padding: 1rem 1.45rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 1rem 2.1rem rgba(0, 0, 0, 0.14);
}

/* line 162, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-actions .button--on-dark-outline,
.sticker-guide__hero-actions .button--on-dark-outline,
.twitch-guide__hero-actions .button--on-dark-outline,
.slack-guide__hero-actions .button--on-dark-outline {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: border-color .18s ease, background-color .18s ease;
}

/* line 170, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero-actions .button--on-dark-outline:hover, .emoji-guide__hero-actions .button--on-dark-outline:focus-visible,
.sticker-guide__hero-actions .button--on-dark-outline:hover,
.sticker-guide__hero-actions .button--on-dark-outline:focus-visible,
.twitch-guide__hero-actions .button--on-dark-outline:hover,
.twitch-guide__hero-actions .button--on-dark-outline:focus-visible,
.slack-guide__hero-actions .button--on-dark-outline:hover,
.slack-guide__hero-actions .button--on-dark-outline:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* line 178, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section,
.sticker-guide__section,
.twitch-guide__section,
.slack-guide__section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 6.5vw, 6rem);
  padding-bottom: clamp(4rem, 6.5vw, 6rem);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

/* line 189, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section::before,
.sticker-guide__section::before,
.twitch-guide__section::before,
.slack-guide__section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .42;
  pointer-events: none;
  background-image: linear-gradient(rgba(var(--howto-accent-rgb), 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--howto-accent-rgb), 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* line 204, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section::after,
.sticker-guide__section::after,
.twitch-guide__section::after,
.slack-guide__section::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  right: -7rem;
  z-index: 0;
  width: clamp(14rem, 28vw, 26rem);
  height: clamp(14rem, 28vw, 26rem);
  border-radius: 50%;
  background: rgba(var(--howto-accent-rgb), 0.09);
  filter: blur(54px);
  pointer-events: none;
}

/* line 218, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section > .container,
.sticker-guide__section > .container,
.twitch-guide__section > .container,
.slack-guide__section > .container {
  z-index: 1;
}

/* line 223, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__hero + .emoji-guide__section,
.sticker-guide__hero + .sticker-guide__section,
.twitch-guide__hero + .twitch-guide__section,
.slack-guide__hero + .slack-guide__section {
  padding-top: clamp(3.4rem, 5.2vw, 4.7rem);
  padding-bottom: clamp(3.4rem, 5.2vw, 4.7rem);
  background: radial-gradient(circle at 7% 12%, rgba(var(--howto-accent-rgb), 0.1), transparent 22rem), radial-gradient(circle at 95% 80%, rgba(19, 185, 129, 0.07), transparent 21rem), linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

/* line 235, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--steps,
.sticker-guide__section--steps,
.twitch-guide__section--steps,
.slack-guide__section--steps {
  background: radial-gradient(circle at 80% 0%, rgba(var(--howto-accent-rgb), 0.13), transparent 25rem), radial-gradient(circle at 14% 100%, rgba(var(--howto-accent-rgb), 0.08), transparent 24rem), linear-gradient(180deg, #fff 0%, rgba(var(--howto-accent-rgb), 0.055) 100%);
}

/* line 245, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--requirements,
.sticker-guide__section--requirements,
.twitch-guide__section--requirements,
.slack-guide__section--requirements {
  background: radial-gradient(circle at 12% 0%, rgba(var(--howto-accent-rgb), 0.14), transparent 26rem), radial-gradient(circle at 92% 100%, rgba(var(--howto-accent-rgb), 0.075), transparent 24rem), linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

/* line 255, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--use,
.sticker-guide__section--send,
.twitch-guide__section--viewers,
.slack-guide__section--workspace {
  background: radial-gradient(circle at 86% 16%, rgba(var(--howto-accent-rgb), 0.16), transparent 26rem), radial-gradient(circle at 8% 82%, rgba(var(--howto-accent-rgb), 0.08), transparent 24rem), linear-gradient(135deg, #fff 0%, #f6faff 48%, rgba(var(--howto-accent-rgb), 0.045) 100%);
}

/* line 268, app/assets/stylesheets/partials/_how_to_guides.scss */
.twitch-guide__section--viewers {
  overflow: visible;
}

/* line 271, app/assets/stylesheets/partials/_how_to_guides.scss */
.twitch-guide__section--viewers::after {
  content: none;
}

@media only screen and (max-width: 64rem) {
  /* line 283, app/assets/stylesheets/partials/_how_to_guides.scss */
  .twitch-guide__viewers-preview {
    padding-top: 14rem;
  }
  /* line 287, app/assets/stylesheets/partials/_how_to_guides.scss */
  .twitch-guide__chat-emote-popover {
    left: auto;
    right: 0;
    transform: none;
  }
  /* line 293, app/assets/stylesheets/partials/_how_to_guides.scss */
  .twitch-guide__chat-emote-popover-anchor {
    left: auto;
    right: 0.3rem;
    transform: rotate(45deg);
  }
}

/* line 300, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro,
.sticker-guide__section--compare,
.twitch-guide__section--bits,
.slack-guide__section--aliases {
  background: radial-gradient(circle at 14% 10%, rgba(var(--howto-accent-rgb), 0.15), transparent 25rem), radial-gradient(circle at 88% 82%, rgba(var(--howto-accent-rgb), 0.1), transparent 24rem), linear-gradient(135deg, #ffffff 0%, #f6faff 46%, rgba(var(--howto-accent-rgb), 0.055) 100%);
  color: #161616;
}

/* line 310, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro::before,
.sticker-guide__section--compare::before,
.twitch-guide__section--bits::before,
.slack-guide__section--aliases::before {
  opacity: .58;
  background-image: linear-gradient(rgba(var(--howto-accent-rgb), 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--howto-accent-rgb), 0.055) 1px, transparent 1px);
}

/* line 317, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .emoji-guide__head-title,
.emoji-guide__section--nitro .sticker-guide__head-title,
.emoji-guide__section--nitro .twitch-guide__head-title,
.emoji-guide__section--nitro .slack-guide__head-title,
.sticker-guide__section--compare .emoji-guide__head-title,
.sticker-guide__section--compare .sticker-guide__head-title,
.sticker-guide__section--compare .twitch-guide__head-title,
.sticker-guide__section--compare .slack-guide__head-title,
.twitch-guide__section--bits .emoji-guide__head-title,
.twitch-guide__section--bits .sticker-guide__head-title,
.twitch-guide__section--bits .twitch-guide__head-title,
.twitch-guide__section--bits .slack-guide__head-title,
.slack-guide__section--aliases .emoji-guide__head-title,
.slack-guide__section--aliases .sticker-guide__head-title,
.slack-guide__section--aliases .twitch-guide__head-title,
.slack-guide__section--aliases .slack-guide__head-title {
  color: #161616;
}

/* line 324, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .emoji-guide__nitro-copy p,
.emoji-guide__section--nitro .sticker-guide__compare-copy p,
.emoji-guide__section--nitro .twitch-guide__bits-copy p,
.emoji-guide__section--nitro .slack-guide__aliases-copy p,
.sticker-guide__section--compare .emoji-guide__nitro-copy p,
.sticker-guide__section--compare .sticker-guide__compare-copy p,
.sticker-guide__section--compare .twitch-guide__bits-copy p,
.sticker-guide__section--compare .slack-guide__aliases-copy p,
.twitch-guide__section--bits .emoji-guide__nitro-copy p,
.twitch-guide__section--bits .sticker-guide__compare-copy p,
.twitch-guide__section--bits .twitch-guide__bits-copy p,
.twitch-guide__section--bits .slack-guide__aliases-copy p,
.slack-guide__section--aliases .emoji-guide__nitro-copy p,
.slack-guide__section--aliases .sticker-guide__compare-copy p,
.slack-guide__section--aliases .twitch-guide__bits-copy p,
.slack-guide__section--aliases .slack-guide__aliases-copy p {
  color: rgba(22, 22, 22, 0.7);
}

/* line 331, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .twitch-guide__bits-stage,
.sticker-guide__section--compare .twitch-guide__bits-stage,
.twitch-guide__section--bits .twitch-guide__bits-stage,
.slack-guide__section--aliases .twitch-guide__bits-stage {
  border-color: rgba(22, 22, 22, 0.12);
  background: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), radial-gradient(circle at 70% 18%, rgba(var(--howto-accent-rgb), 0.5), transparent 34%), linear-gradient(145deg, #222028, #121216);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1.4rem 2.8rem rgba(22, 22, 22, 0.18);
}

/* line 344, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .twitch-guide__bits-panel,
.sticker-guide__section--compare .twitch-guide__bits-panel,
.twitch-guide__section--bits .twitch-guide__bits-panel,
.slack-guide__section--aliases .twitch-guide__bits-panel {
  border-color: rgba(var(--howto-accent-rgb), 0.14);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.9rem 1.8rem rgba(22, 22, 22, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

/* line 352, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .twitch-guide__bits-label,
.sticker-guide__section--compare .twitch-guide__bits-label,
.twitch-guide__section--bits .twitch-guide__bits-label,
.slack-guide__section--aliases .twitch-guide__bits-label {
  color: rgba(22, 22, 22, 0.54);
}

/* line 356, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .twitch-guide__bits-pill,
.emoji-guide__section--nitro .twitch-guide__bits-count,
.sticker-guide__section--compare .twitch-guide__bits-pill,
.sticker-guide__section--compare .twitch-guide__bits-count,
.twitch-guide__section--bits .twitch-guide__bits-pill,
.twitch-guide__section--bits .twitch-guide__bits-count,
.slack-guide__section--aliases .twitch-guide__bits-pill,
.slack-guide__section--aliases .twitch-guide__bits-count {
  color: #161616;
}

/* line 361, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .twitch-guide__bits-pill,
.sticker-guide__section--compare .twitch-guide__bits-pill,
.twitch-guide__section--bits .twitch-guide__bits-pill,
.slack-guide__section--aliases .twitch-guide__bits-pill {
  background: rgba(var(--howto-accent-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--howto-accent-rgb), 0.14);
}

/* line 366, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--nitro .twitch-guide__bits-meter,
.sticker-guide__section--compare .twitch-guide__bits-meter,
.twitch-guide__section--bits .twitch-guide__bits-meter,
.slack-guide__section--aliases .twitch-guide__bits-meter {
  background: rgba(22, 22, 22, 0.08);
}

/* line 371, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__intro,
.sticker-guide__intro,
.twitch-guide__intro,
.slack-guide__intro {
  max-width: 50rem;
}

/* line 377, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__intro .ai-eyebrow,
.sticker-guide__intro .ai-eyebrow,
.twitch-guide__intro .ai-eyebrow,
.slack-guide__intro .ai-eyebrow {
  color: var(--howto-accent);
}

/* line 382, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__intro p + p,
.sticker-guide__intro p + p,
.twitch-guide__intro p + p,
.slack-guide__intro p + p {
  margin-top: 0;
}

/* line 387, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__intro .emoji-guide__intro-lead,
.sticker-guide__intro .sticker-guide__intro-lead,
.twitch-guide__intro .twitch-guide__intro-lead,
.slack-guide__intro .slack-guide__intro-lead {
  margin: .7rem 0 0;
  color: rgba(22, 22, 22, 0.68);
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.68;
}

/* line 397, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__intro .emoji-guide__note,
.sticker-guide__intro .sticker-guide__note,
.twitch-guide__intro .twitch-guide__note,
.slack-guide__intro .slack-guide__note {
  margin: 1.7rem 0 0;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(var(--howto-accent-rgb), 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)), radial-gradient(circle at 100% 0%, rgba(var(--howto-accent-rgb), 0.1), transparent 16rem);
  box-shadow: 0 1rem 1.8rem rgba(22, 22, 22, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: rgba(22, 22, 22, 0.7);
  font-size: 1rem;
  line-height: 1.65;
}

/* line 415, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__intro .emoji-guide__note strong,
.sticker-guide__intro .sticker-guide__note strong,
.twitch-guide__intro .twitch-guide__note strong,
.slack-guide__intro .slack-guide__note strong {
  color: var(--howto-accent-dark);
  font-weight: 800;
}

/* line 421, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__head,
.sticker-guide__head,
.twitch-guide__head,
.slack-guide__head {
  max-width: 50rem;
}

/* line 428, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__head-title,
.sticker-guide__head-title,
.twitch-guide__head-title,
.slack-guide__head-title {
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  letter-spacing: 0;
  color: #161616;
  text-wrap: balance;
}

/* line 438, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__head-text,
.sticker-guide__head-text,
.twitch-guide__head-text,
.slack-guide__head-text {
  max-width: 45rem;
  color: rgba(22, 22, 22, 0.66);
}

/* line 446, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__steps,
.sticker-guide__steps,
.twitch-guide__steps,
.slack-guide__steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 54rem;
}

/* line 456, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__steps::before,
.sticker-guide__steps::before,
.twitch-guide__steps::before,
.slack-guide__steps::before {
  content: '';
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--howto-accent-rgb), 0.18) 0%, rgba(var(--howto-accent-rgb), 0.62) 14%, rgba(var(--howto-accent-rgb), 0.62) 86%, rgba(var(--howto-accent-rgb), 0.18) 100%);
}

/* line 475, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step,
.sticker-guide__step,
.twitch-guide__step,
.slack-guide__step {
  position: relative;
  min-width: 0;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: 0 0 1.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* line 489, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step:not(:last-child)::before,
.sticker-guide__step:not(:last-child)::before,
.twitch-guide__step:not(:last-child)::before,
.slack-guide__step:not(:last-child)::before {
  content: none;
}

/* line 493, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step:last-child,
.sticker-guide__step:last-child,
.twitch-guide__step:last-child,
.slack-guide__step:last-child {
  padding-bottom: 0;
}

/* line 498, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step-number,
.sticker-guide__step-number,
.twitch-guide__step-number,
.slack-guide__step-number {
  position: relative;
  z-index: 1;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent), var(--howto-accent);
  box-shadow: 0 0.8rem 1.65rem rgba(var(--howto-accent-rgb), 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* line 515, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step-body,
.sticker-guide__step-body,
.twitch-guide__step-body,
.slack-guide__step-body {
  min-width: 0;
  margin-top: .05rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(22, 22, 22, 0.08);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.84)), radial-gradient(circle at 0 0, rgba(var(--howto-accent-rgb), 0.1), transparent 14rem);
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

/* line 532, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step-title,
.sticker-guide__step-title,
.twitch-guide__step-title,
.slack-guide__step-title {
  margin-bottom: .45rem;
  font-size: 1.16rem;
}

/* line 540, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__step-text,
.sticker-guide__step-text,
.twitch-guide__step-text,
.slack-guide__step-text {
  color: rgba(22, 22, 22, 0.66);
}

/* line 547, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__callout,
.sticker-guide__callout,
.twitch-guide__callout,
.slack-guide__callout {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: radial-gradient(circle at 92% 20%, rgba(var(--howto-accent-rgb), 0.32), transparent 15rem), #161616;
  box-shadow: 0 1.4rem 2.8rem rgba(22, 22, 22, 0.14);
}

/* line 559, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__req-card,
.sticker-guide__req-card,
.twitch-guide__req-card,
.slack-guide__req-card {
  border-top: 0;
  border-color: rgba(22, 22, 22, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)), radial-gradient(circle at 100% 100%, rgba(var(--howto-accent-rgb), 0.14), transparent 12rem);
  box-shadow: 0 1rem 2rem rgba(22, 22, 22, 0.055);
}

/* line 573, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__use,
.sticker-guide__send,
.twitch-guide__viewers,
.slack-guide__workspace,
.emoji-guide__nitro,
.sticker-guide__compare,
.twitch-guide__bits,
.slack-guide__aliases {
  gap: clamp(2rem, 5vw, 4rem);
}

/* line 584, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__picker,
.sticker-guide__picker,
.twitch-guide__chat-composer,
.slack-guide__message-panel,
.emoji-guide__nitro-panel,
.sticker-guide__expression-panel,
.twitch-guide__bits-stage,
.slack-guide__alias-panel {
  border-radius: 8px;
  box-shadow: 0 1.6rem 3.2rem rgba(22, 22, 22, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* line 598, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--faq,
.sticker-guide__section--faq,
.twitch-guide__section--faq,
.slack-guide__section--faq {
  background: radial-gradient(circle at 15% 0%, rgba(var(--howto-accent-rgb), 0.11), transparent 26rem), linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}

/* line 607, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--faq.emote-creator-faq,
.sticker-guide__section--faq.emote-creator-faq,
.twitch-guide__section--faq.emote-creator-faq,
.slack-guide__section--faq.emote-creator-faq {
  --faq-guide-accent: var(--howto-accent);
  --faq-guide-accent-rgb: var(--howto-accent-rgb);
  margin: 0;
  padding-top: clamp(3.6rem, 6vw, 5.25rem);
  padding-bottom: clamp(3.6rem, 6vw, 5.25rem);
}

/* line 617, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--faq.emote-creator-faq .emote-creator-faq__art,
.sticker-guide__section--faq.emote-creator-faq .emote-creator-faq__art,
.twitch-guide__section--faq.emote-creator-faq .emote-creator-faq__art,
.slack-guide__section--faq.emote-creator-faq .emote-creator-faq__art {
  background: linear-gradient(rgba(var(--faq-guide-accent-rgb), 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--faq-guide-accent-rgb), 0.055) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* line 624, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--faq.emote-creator-faq .emote-creator-faq__item:hover,
.emoji-guide__section--faq.emote-creator-faq .emote-creator-faq__item[open],
.sticker-guide__section--faq.emote-creator-faq .emote-creator-faq__item:hover,
.sticker-guide__section--faq.emote-creator-faq .emote-creator-faq__item[open],
.twitch-guide__section--faq.emote-creator-faq .emote-creator-faq__item:hover,
.twitch-guide__section--faq.emote-creator-faq .emote-creator-faq__item[open],
.slack-guide__section--faq.emote-creator-faq .emote-creator-faq__item:hover,
.slack-guide__section--faq.emote-creator-faq .emote-creator-faq__item[open] {
  border-color: rgba(var(--faq-guide-accent-rgb), 0.24);
}

/* line 629, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--faq.emote-creator-faq .emote-creator-faq__icon,
.sticker-guide__section--faq.emote-creator-faq .emote-creator-faq__icon,
.twitch-guide__section--faq.emote-creator-faq .emote-creator-faq__icon,
.slack-guide__section--faq.emote-creator-faq .emote-creator-faq__icon {
  background: rgba(var(--faq-guide-accent-rgb), 0.1);
  color: var(--faq-guide-accent);
}

/* line 634, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__section--faq.emote-creator-faq .emote-creator-faq__foot,
.sticker-guide__section--faq.emote-creator-faq .emote-creator-faq__foot,
.twitch-guide__section--faq.emote-creator-faq .emote-creator-faq__foot,
.slack-guide__section--faq.emote-creator-faq .emote-creator-faq__foot {
  display: none;
}

/* line 639, app/assets/stylesheets/partials/_how_to_guides.scss */
.emoji-guide__cta,
.sticker-guide__cta,
.twitch-guide__cta,
.slack-guide__cta {
  border-radius: 8px;
  box-shadow: 0 1.7rem 3.4rem rgba(var(--howto-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@media only screen and (max-width: 32rem) {
  /* line 650, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__section,
.sticker-guide__section,
.twitch-guide__section,
.slack-guide__section {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* line 660, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__note,
.sticker-guide__note,
.twitch-guide__note,
.slack-guide__note {
    padding: 1.1rem 1.2rem;
  }
  /* line 671, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__hero-actions .button,
.sticker-guide__hero-actions .button,
.twitch-guide__hero-actions .button,
.slack-guide__hero-actions .button {
    width: 100%;
    white-space: normal;
  }
  /* line 677, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__step,
.sticker-guide__step,
.twitch-guide__step,
.slack-guide__step {
    grid-template-columns: 2.7rem 1fr;
    padding: 0 0 1rem;
  }
  /* line 685, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__step-number,
.sticker-guide__step-number,
.twitch-guide__step-number,
.slack-guide__step-number {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.1rem;
  }
  /* line 698, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__steps::before,
.sticker-guide__steps::before,
.twitch-guide__steps::before,
.slack-guide__steps::before {
    left: 1.35rem;
    top: 1.35rem;
    bottom: 1.35rem;
  }
  /* line 705, app/assets/stylesheets/partials/_how_to_guides.scss */
  .emoji-guide__step-body,
.sticker-guide__step-body,
.twitch-guide__step-body,
.slack-guide__step-body {
    padding: 1rem;
  }
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control {
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 8px;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.full .ts-control {
  background-color: #fff;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.focus .ts-control {
  box-shadow: none;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control > * {
  display: inline-block;
  vertical-align: baseline;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.multi .ts-control > div {
  background: #f2f2f2;
  border: 0 solid #d0d0d0;
  color: #303030;
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  border: 0 solid #cacaca;
  color: #303030;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  background: #fff;
  border: 0 solid #fff;
  color: #7d7d7d;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control > input {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: inline-block !important;
  flex: 1 1 auto;
  line-height: inherit !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 7rem;
  padding: 0 !important;
  text-indent: 0 !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control > input::-ms-clear {
  display: none;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control > input:focus {
  outline: none !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.has-items .ts-control > input {
  margin: 0 4px !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control.rtl {
  text-align: right;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.disabled .ts-control {
  background-color: #fafafa;
  opacity: .5;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.input-hidden .ts-control > input {
  left: -10000px;
  opacity: 0;
  position: absolute;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 0 0 3px 3px;
  border-top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  left: 0;
  margin: .25rem 0 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 10;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .create, .ts-dropdown .no-results, .ts-dropdown .optgroup-header, .ts-dropdown .option {
  padding: 5px 8px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] .option[data-selectable] {
  cursor: inherit;
  opacity: .5;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .option[data-selectable] {
  cursor: pointer;
  opacity: 1;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .optgroup-header {
  background: #fff;
  color: #303030;
  cursor: default;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .active.create {
  color: #495c68;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .spinner {
  display: inline-block;
  height: 30px;
  margin: 5px 8px;
  width: 30px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown .spinner:after {
  animation: lds-dual-ring 1.2s linear infinite;
  border-color: #d0d0d0 transparent;
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  content: " ";
  display: block;
  height: 24px;
  margin: 3px;
  width: 24px;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown-content {
  max-height: 200px;
  overflow: hidden auto;
  scroll-behavior: smooth;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 !important;
  box-shadow: inset 0 0 12px 4px #fff;
  visibility: visible !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder:after {
  content: "!";
  visibility: hidden;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: .5rem;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-checkbox_options.rtl .option input {
  margin-left: .5rem;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-clear_button {
  --ts-pr-clear-button:1em;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-clear_button .clear-button {
  background: transparent !important;
  cursor: pointer;
  margin-right: 0 !important;
  opacity: 0;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .5s;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: 8px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button.has-items:not(.disabled):hover .clear-button {
  opacity: 1;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper .dropdown-header {
  background: color-mix(#fff, #d0d0d0, 85%);
  border-bottom: 1px solid #d0d0d0;
  border-radius: 3px 3px 0 0;
  padding: 10px 8px;
  position: relative;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper .dropdown-header-close {
  color: #303030;
  font-size: 20px !important;
  line-height: 20px;
  margin-top: -12px;
  opacity: .4;
  position: absolute;
  right: 8px;
  top: 50%;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper .dropdown-header-close:hover {
  color: #000;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  border: 1px solid #d0d0d0;
  box-shadow: none;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-dropdown_input .dropdown-input {
  background: transparent;
  border: solid #d0d0d0;
  border-width: 0 0 1px;
  box-shadow: none;
  display: block;
  padding: 8px;
  width: 100%;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-dropdown_input .items-placeholder {
  border: 0 !important;
  box-shadow: none !important;
  width: 100%;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.plugin-dropdown_input.dropdown-active .items-placeholder, .plugin-dropdown_input.has-items .items-placeholder {
  display: none !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0;
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button .item {
  align-items: center;
  display: inline-flex;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button .item .remove {
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  color: inherit;
  display: inline-block;
  padding: 0 6px;
  text-decoration: none;
  vertical-align: middle;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button .remove-single {
  font-size: 23px;
  position: absolute;
  right: 0;
  top: 0;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button.disabled:not(.rtl) .item .remove {
  border-left-color: #fff;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: #fff;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
:root {
  --ts-pr-clear-button:0;
  --ts-pr-caret:0;
  --ts-pr-min:.75rem;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control:not(.rtl) {
  padding-right: 0.75rem !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control.rtl {
  padding-left: 0.75rem !important;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-wrapper {
  position: relative;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control, .ts-control input, .ts-dropdown {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-control, .ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

/* line 1, app/assets/stylesheets/partials/_tom-select.scss */
.ts-hidden-accessible {
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/*# sourceMappingURL=tom-select.min.css.map */
/* line 4, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags .ts-control {
  border: 1px solid var(--control-border, rgba(22, 22, 22, 0.5));
  padding: .75rem .5rem;
  background: #fff;
  border-radius: var(--control-radius, 0.65rem);
}

/* line 11, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags.ts-wrapper.multi.has-items .ts-control {
  padding: .45rem .85rem;
  display: flex;
  gap: 0.25rem;
}

/* line 17, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags .ts-control, .add-tags .ts-control input, .add-tags .ts-dropdown {
  font-size: 1rem;
}

/* line 21, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags.ts-wrapper.multi .ts-control > div {
  background: rgba(22, 22, 22, 0.1);
  color: #161616;
  padding: 0.4rem 0.5rem;
  margin: 0;
  border-radius: var(--control-radius, 0.65rem);
  font-weight: 300;
  font-size: 0.875rem;
}

/* line 31, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags.ts-wrapper.multi .ts-control > div.active {
  background: rgba(22, 22, 22, 0.2);
  color: #161616;
  font-weight: 500;
}

/* line 37, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags .ts-dropdown {
  margin: 0;
  margin-top: 1px;
  border-radius: 3px;
  font-size: .875rem;
  border: 1px solid rgba(22, 22, 22, 0.25);
}

/* line 45, app/assets/stylesheets/partials/_tom-select.scss */
.add-tags .ts-dropdown .active.create {
  color: rgba(22, 22, 22, 0.5);
  background: none;
}

/* line 52, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user {
  position: relative;
  flex: 1 1 12rem;
  min-width: 12rem;
  min-height: var(--control-compact-height, 2.25rem);
  visibility: hidden;
}

/* line 59, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user:has(.ts-wrapper) {
  visibility: visible;
}

/* line 63, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user__icon {
  position: absolute;
  top: 50%;
  left: .68rem;
  z-index: 3;
  display: inline-flex;
  color: rgba(22, 22, 22, 0.42);
  pointer-events: none;
  transform: translateY(-50%);
}

/* line 73, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user__icon svg {
  width: .86rem;
  height: .86rem;
}

/* line 79, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user:has(.ts-wrapper.focus) .search-filter-user__icon, .search-filter-user:has(.ts-wrapper.has-items) .search-filter-user__icon {
  color: #0f68d3;
}

/* line 84, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-wrapper {
  width: 100%;
}

/* line 88, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-control {
  align-items: center;
  min-height: var(--control-compact-height, 2.25rem);
  padding: .32rem 1.9rem .32rem 1.95rem !important;
  overflow: visible;
  border: 1px solid var(--control-border, rgba(22, 22, 22, 0.2));
  border-radius: var(--control-radius, 0.65rem);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: text;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* line 100, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-control input {
  min-width: 4rem;
  padding: 0 !important;
  color: #161616;
  font-size: .73rem;
  font-weight: 700;
  cursor: text !important;
}

/* line 108, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-control input::placeholder {
  color: rgba(22, 22, 22, 0.55);
  opacity: 1;
}

/* line 114, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-control .item {
  min-width: 0;
  color: #0f68d3;
  font-size: .73rem;
  font-weight: 800;
}

/* line 122, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-wrapper.focus .ts-control {
  border-color: var(--control-accent, #0f68d3);
  background: #fff;
  box-shadow: 0 0 0 3px var(--control-focus-soft, rgba(15, 104, 211, 0.14));
}

/* line 128, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-wrapper.has-items .ts-control {
  border-color: rgba(15, 104, 211, 0.34);
  background: rgba(15, 104, 211, 0.09);
}

/* line 133, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .user-select__content {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-width: 0;
}

/* line 139, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .user-select__content svg {
  flex: 0 0 auto;
  width: .82rem;
  height: .82rem;
}

/* line 146, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .user-select__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 152, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-wrapper.plugin-remove_button .item .remove {
  position: absolute;
  top: 50%;
  right: .36rem;
  display: grid;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(15, 104, 211, 0.12);
  color: #0f68d3;
  font-size: .9rem;
  line-height: 1;
  place-items: center;
  transform: translateY(-50%);
}

/* line 170, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(15, 104, 211, 0.2);
}

/* line 175, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-dropdown {
  width: 17rem;
  max-width: calc(100vw - 2rem);
  min-width: 100%;
  margin-top: .45rem;
  overflow: hidden;
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: .7rem;
  background: #fff;
  box-shadow: 0 0.9rem 2rem rgba(22, 22, 22, 0.14);
}

/* line 187, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-dropdown .option,
.search-filter-user .ts-dropdown .no-results,
.search-filter-user .ts-dropdown .not-loading {
  padding: .65rem .75rem;
  font-size: .8rem;
}

/* line 194, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-dropdown .option {
  color: rgba(22, 22, 22, 0.75);
}

/* line 197, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-dropdown .option.active {
  background: rgba(15, 104, 211, 0.08);
  color: #0f68d3;
}

/* line 203, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-dropdown .no-results,
.search-filter-user .ts-dropdown .not-loading {
  color: rgba(22, 22, 22, 0.5);
  font-weight: 600;
}

/* line 209, app/assets/stylesheets/partials/_tom-select.scss */
.search-filter-user .ts-wrapper.disabled {
  opacity: .5;
}

@media only screen and (max-width: 32rem) {
  /* line 216, app/assets/stylesheets/partials/_tom-select.scss */
  .search-filter-user .ts-control {
    min-height: var(--control-compact-height, 2.25rem);
    padding: .45rem 2.15rem .45rem 2.15rem !important;
    border-radius: var(--control-radius, 0.65rem);
  }
  /* line 221, app/assets/stylesheets/partials/_tom-select.scss */
  .search-filter-user .ts-control input,
.search-filter-user .ts-control .item {
    font-size: .76rem;
  }
  /* line 227, app/assets/stylesheets/partials/_tom-select.scss */
  .search-filter-user__icon {
    left: .78rem;
  }
  /* line 230, app/assets/stylesheets/partials/_tom-select.scss */
  .search-filter-user__icon svg {
    width: .92rem;
    height: .92rem;
  }
  /* line 236, app/assets/stylesheets/partials/_tom-select.scss */
  .search-filter-user .ts-dropdown {
    width: 100%;
    max-width: 100%;
  }
}

/* line 1, app/assets/stylesheets/partials/_tiny-slider.scss */
.tns-visually-hidden {
  display: none !important;
}

/* line 5, app/assets/stylesheets/partials/_tiny-slider.scss */
.tns-controls {
  position: absolute;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  top: 8em;
}

@media only screen and (max-width: 32rem) {
  /* line 5, app/assets/stylesheets/partials/_tiny-slider.scss */
  .tns-controls {
    display: none !important;
  }
}

/* line 17, app/assets/stylesheets/partials/_tiny-slider.scss */
.tns-controls button {
  position: relative;
  border: none;
  height: 36px;
  width: 36px;
  background: url(/assets/icons/arrow-7fa96f0279db875bcd99b93de00eab472534dc1642ade437828e544fe66ad10f.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  top: 0;
  transition: 200ms ease-in-out;
}

/* line 28, app/assets/stylesheets/partials/_tiny-slider.scss */
.tns-controls button:nth-child(1) {
  transform: rotate(180deg);
}

/* line 32, app/assets/stylesheets/partials/_tiny-slider.scss */
.tns-controls button:hover {
  top: 2px;
}

/* line 38, app/assets/stylesheets/partials/_tiny-slider.scss */
.tns-inner {
  max-width: calc(100% - 4em);
  overflow: hidden;
  margin: 0 auto !important;
  display: block;
}

@media only screen and (max-width: 32rem) {
  /* line 38, app/assets/stylesheets/partials/_tiny-slider.scss */
  .tns-inner {
    max-width: 100%;
  }
}

/* line 1, app/assets/stylesheets/partials/_trix-editor.scss */
trix-toolbar {
  margin-bottom: -1rem;
}

/* line 4, app/assets/stylesheets/partials/_trix-editor.scss */
trix-toolbar .trix-button--icon-link,
trix-toolbar .trix-button--icon-heading-1,
trix-toolbar .trix-button--icon-bullet-list,
trix-toolbar .trix-button--icon-number-list,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button-group--file-tools {
  display: none;
}

/* line 16, app/assets/stylesheets/partials/_trix-editor.scss */
trix-editor, .trix-content {
  word-wrap: break-word;
  word-break: break-all;
}

/* line 20, app/assets/stylesheets/partials/_trix-editor.scss */
trix-editor strong, .trix-content strong {
  font-weight: bold;
}

/* line 24, app/assets/stylesheets/partials/_trix-editor.scss */
trix-editor em, .trix-content em {
  font-style: italic;
}

/* line 71, app/assets/stylesheets/application.css.scss */
:root {
  --asset-revision: 202604281748;
}