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


 */

.critique-panel {
  background-color: rgb(0 0 0 / 0.45);
  transition: background-color 150ms ease;
}

.critique-panel:hover {
  background-color: rgb(0 0 0 / 0.82);
}

.upload-progress-popover {
  background: rgb(2 6 24 / 0.98);
  border: 2px solid rgb(251 191 36 / 0.78);
  border-radius: 0.5rem;
  bottom: 7rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.72);
  color: rgb(255 255 255);
  left: auto;
  min-height: 6rem;
  padding: 1rem;
  position: fixed;
  right: 1.5rem;
  width: min(24rem, calc(100vw - 2rem));
  z-index: 2147483647;
}

.processing-indicator__mark {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  height: 1.25rem;
  justify-content: center;
  min-width: 2rem;
}

.processing-indicator__mark span {
  animation: miru-processing-pulse 1.45s ease-in-out infinite;
  background: rgb(251 191 36 / 0.92);
  border-radius: 9999px;
  display: block;
  height: 0.45rem;
  width: 0.45rem;
}

.processing-indicator__mark span:nth-child(2) {
  animation-delay: 0.16s;
}

.processing-indicator__mark span:nth-child(3) {
  animation-delay: 0.32s;
}

.processing-indicator::after {
  animation: miru-processing-scan 2.8s ease-in-out infinite;
  background: linear-gradient(90deg, transparent, rgb(251 191 36 / 0.22), transparent);
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.8;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(-100%);
}

.processing-indicator {
  overflow: hidden;
  position: relative;
}

@keyframes miru-processing-pulse {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0) scale(0.82);
  }

  40% {
    opacity: 1;
    transform: translateY(-0.16rem) scale(1);
  }
}

@keyframes miru-processing-scan {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .processing-indicator__mark span,
  .processing-indicator::after {
    animation: none;
  }
}

@media (max-width: 640px) {
  .upload-progress-popover {
    bottom: 8.5rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

.home-hero-band {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.025) 42%, rgb(0 0 0 / 0) 72%),
    linear-gradient(180deg, rgb(255 255 255 / 0.04), rgb(0 0 0 / 0) 80%);
}

.miru-hiw {
  --miru-hiw-bg: #0A0A0A;
  --miru-hiw-yellow: #F2C230;
  --miru-hiw-yellow-ink: #14110A;
  --miru-hiw-paper: #F5F1E8;
  --miru-hiw-muted: #8C877C;
  --miru-hiw-line: rgb(245 241 232 / 0.14);
  --miru-hiw-duration: 28s;

  align-items: center;
  background: var(--miru-hiw-bg);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  padding: 8vh 6vw;
  position: relative;
  width: 100%;
}

.miru-hiw * {
  box-sizing: border-box;
}

.miru-hiw__stage {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  justify-content: center;
  max-width: 960px;
  position: relative;
  width: 100%;
}

.miru-hiw__intro {
  max-width: 900px;
  text-align: center;
}

.miru-hiw__eyebrow {
  color: var(--miru-hiw-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  margin: 0;
  text-transform: uppercase;
}

.miru-hiw__title {
  color: var(--miru-hiw-paper);
  font-size: clamp(2.4rem, 5vw, 4.35rem);
  font-weight: 650;
  line-height: 1.02;
  margin: 1rem 0 0;
}

.miru-hiw__subtext {
  color: rgb(245 241 232 / 0.64);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.65;
  margin: 1rem auto 0;
  max-width: 680px;
}

.miru-hiw__anchor {
  height: 1px;
  position: relative;
  width: 1px;
}

.miru-hiw__button {
  align-items: center;
  animation: miru-button-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  background: var(--miru-hiw-yellow);
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  left: 0;
  min-width: 208px;
  padding: 0 2rem;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
}

.miru-hiw__button-label {
  color: var(--miru-hiw-yellow-ink);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  position: absolute;
  white-space: nowrap;
}

.miru-hiw__button-label--default {
  animation: miru-label-default-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
}

.miru-hiw__button-label--done {
  animation: miru-label-done-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  opacity: 0;
}

.miru-hiw__thumb {
  align-items: center;
  animation: miru-thumb-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  background: var(--miru-hiw-paper);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.35);
  display: flex;
  height: 46px;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 46px;
}

.miru-hiw__cursor {
  animation: miru-cursor-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.45));
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}

.miru-hiw__progress-wrap {
  animation: miru-progress-wrap-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, 52px);
  width: 208px;
}

.miru-hiw__progress-label {
  color: var(--miru-hiw-muted);
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
  text-align: center;
  text-transform: uppercase;
}

.miru-hiw__progress-track {
  background: var(--miru-hiw-line);
  border-radius: 4px;
  height: 4px;
  overflow: hidden;
  width: 100%;
}

.miru-hiw__progress-fill {
  animation: miru-progress-fill-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  background: var(--miru-hiw-yellow);
  border-radius: 4px;
  height: 100%;
  width: 0%;
}

.miru-hiw__photo-frame {
  animation: miru-photo-frame-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  aspect-ratio: 4 / 5;
  background: #1A1A1A;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
  left: 50%;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 58vh, 560px);
  z-index: 20;
}

.miru-hiw__photo {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.miru-hiw__scrim {
  animation: miru-scrim-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  background: linear-gradient(to top, rgb(10 10 10 / 0.85) 0%, rgb(10 10 10 / 0.15) 55%, rgb(10 10 10 / 0) 100%);
  inset: 0;
  opacity: 0;
  position: absolute;
}

.miru-hiw__processing {
  bottom: 20px;
  height: 1.4em;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.miru-hiw__msg {
  animation-duration: var(--miru-hiw-duration);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  color: var(--miru-hiw-paper);
  font-size: 0.92rem;
  font-weight: 500;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.miru-hiw__msg--1 {
  animation-name: miru-msg1-seq;
}

.miru-hiw__msg--2 {
  animation-name: miru-msg2-seq;
}

.miru-hiw__msg--3 {
  animation-name: miru-msg3-seq;
}

.miru-hiw__dot {
  align-items: center;
  animation-duration: var(--miru-hiw-duration);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  backdrop-filter: blur(2px);
  background: rgb(10 10 10 / 0.55);
  border: 1.5px solid var(--miru-hiw-paper);
  border-radius: 50%;
  color: var(--miru-hiw-paper);
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transform: translate(-50%, -50%) scale(0.4);
  width: 24px;
}

.miru-hiw__dot--1 {
  animation-name: miru-dot1-seq;
  left: 57%;
  top: 18%;
}

.miru-hiw__dot--2 {
  animation-name: miru-dot2-seq;
  left: 42%;
  top: 35%;
}

.miru-hiw__dot--3 {
  animation-name: miru-dot3-seq;
  left: 75%;
  top: 45%;
}

.miru-hiw__dot--4 {
  animation-name: miru-dot4-seq;
  left: 26%;
  top: 63%;
}

.miru-hiw__dot--5 {
  animation-name: miru-dot5-seq;
  left: 70%;
  top: 68%;
}

.miru-hiw__spot-card,
.miru-hiw__card {
  animation-play-state: paused;
  backdrop-filter: blur(6px);
  background: rgb(10 10 10 / 0.78);
  border: 1px solid var(--miru-hiw-line);
  border-radius: 10px;
  opacity: 0;
  padding: 0.85rem 0.95rem;
  position: absolute;
  transform: translateY(10px);
}

.miru-hiw__spot-card {
  animation-duration: var(--miru-hiw-duration);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  width: min(76%, 20rem);
}

.miru-hiw__spot-card--1 {
  animation-name: miru-spot-card1-seq;
  left: 50%;
  top: 24%;
}

.miru-hiw__spot-card--2 {
  animation-name: miru-spot-card2-seq;
  left: 9%;
  top: 43%;
}

.miru-hiw__card {
  animation: miru-card-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.miru-hiw__card-eyebrow {
  color: var(--miru-hiw-yellow);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.miru-hiw__spot-card-heading {
  align-items: flex-start;
  display: flex;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.miru-hiw__spot-badge {
  align-items: center;
  background: var(--miru-hiw-yellow);
  border-radius: 50%;
  color: var(--miru-hiw-yellow-ink);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  height: 1.65rem;
  justify-content: center;
  margin-top: 0.05rem;
  width: 1.65rem;
}

.miru-hiw__spot-card h3 {
  color: var(--miru-hiw-paper);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.2;
  margin: 0 0 0.2rem;
}

.miru-hiw__spot-card p,
.miru-hiw__card p {
  color: var(--miru-hiw-paper);
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 0.35rem;
}

.miru-hiw__spot-card p:last-child,
.miru-hiw__card p:last-child {
  margin-bottom: 0;
}

.miru-hiw__spot-card .miru-hiw__card-eyebrow,
.miru-hiw__card .miru-hiw__card-eyebrow {
  color: var(--miru-hiw-yellow);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.miru-hiw__card strong {
  color: var(--miru-hiw-yellow);
  font-weight: 600;
}

.miru-hiw__card-line {
  animation-duration: var(--miru-hiw-duration);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
  opacity: 0;
  transform: translateY(5px);
}

.miru-hiw__card-line--summary {
  animation-name: miru-card-line-summary-seq;
}

.miru-hiw__card-line--strength {
  animation-name: miru-card-line-strength-seq;
}

.miru-hiw__card-line--next {
  animation-name: miru-card-line-next-seq;
}

.miru-hiw__try-now {
  animation: miru-try-now-seq var(--miru-hiw-duration) ease-in-out 1 forwards;
  animation-play-state: paused;
  background: var(--miru-hiw-yellow);
  border-radius: 9999px;
  box-shadow: 0 20px 54px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.2);
  color: var(--miru-hiw-yellow-ink);
  font-size: 1rem;
  font-weight: 700;
  left: 50%;
  min-width: 210px;
  opacity: 0;
  padding: 1rem 2.4rem;
  position: absolute;
  text-align: center;
  text-decoration: none;
  top: 50%;
  transform: translate(-50%, calc(-50% - 10px));
  transition: background-color 150ms ease, transform 150ms ease;
  visibility: hidden;
  white-space: nowrap;
  z-index: 45;
}

.miru-hiw__try-now:hover {
  background: #F7D95C;
  transform: translate(-50%, -50%) scale(1.03);
}

.miru-hiw__stage.is-visible .miru-hiw__button,
.miru-hiw__stage.is-visible .miru-hiw__button-label--default,
.miru-hiw__stage.is-visible .miru-hiw__button-label--done,
.miru-hiw__stage.is-visible .miru-hiw__thumb,
.miru-hiw__stage.is-visible .miru-hiw__cursor,
.miru-hiw__stage.is-visible .miru-hiw__progress-wrap,
.miru-hiw__stage.is-visible .miru-hiw__progress-fill,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__scrim,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__msg,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__dot,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__spot-card,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__card,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__card-line,
.miru-hiw__stage.is-visible ~ .miru-hiw__photo-frame .miru-hiw__try-now {
  animation-play-state: running;
}

@keyframes miru-cursor-seq {
  0% { opacity: 0; transform: translate(-34vw, 14vh); }
  2% { opacity: 1; transform: translate(-34vw, 14vh); }
  7% { opacity: 1; transform: translate(0, 0); }
  12% { opacity: 1; transform: translate(0, 0) scale(0.88); }
  14% { opacity: 1; transform: translate(0, 0) scale(1); }
  16% { opacity: 0; transform: translate(9vw, -13vh); }
  17% { opacity: 0; transform: translate(-34vw, 14vh); }
  100% { opacity: 0; transform: translate(-34vw, 14vh); }
}

@keyframes miru-thumb-seq {
  0% { opacity: 0; transform: translate(-34vw, 14vh) translate(6px, 6px) rotate(-9deg) scale(1); }
  2% { opacity: 1; transform: translate(-34vw, 14vh) translate(6px, 6px) rotate(-9deg) scale(1); }
  7% { opacity: 1; transform: translate(0, 0) translate(6px, 6px) rotate(-9deg) scale(1); }
  12% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.85); }
  15% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.15); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.15); }
}

@keyframes miru-button-seq {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  11% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.94); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  31% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
}

@keyframes miru-label-default-seq {
  0%, 12% { opacity: 1; }
  14% { opacity: 0; }
  17%, 100% { opacity: 1; }
}

@keyframes miru-label-done-seq {
  0%, 12% { opacity: 0; }
  14% { opacity: 1; }
  17%, 100% { opacity: 0; }
}

@keyframes miru-progress-wrap-seq {
  0%, 18% { opacity: 0; }
  20%, 27% { opacity: 1; }
  31%, 100% { opacity: 0; }
}

@keyframes miru-progress-fill-seq {
  0%, 19% { width: 0%; }
  27%, 31% { width: 100%; }
  32%, 100% { width: 0%; }
}

@keyframes miru-photo-frame-seq {
  0%, 30% { opacity: 0; }
  38%, 100% { opacity: 1; }
}

@keyframes miru-scrim-seq {
  0%, 42% { opacity: 0; }
  45%, 64% { opacity: 1; }
  67%, 100% { opacity: 0; }
}

@keyframes miru-msg1-seq {
  0%, 44% { opacity: 0; }
  46%, 50% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

@keyframes miru-msg2-seq {
  0%, 52% { opacity: 0; }
  54%, 58% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes miru-msg3-seq {
  0%, 60% { opacity: 0; }
  62%, 65% { opacity: 1; }
  67%, 100% { opacity: 0; }
}

@keyframes miru-dot1-seq {
  0%, 66% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  70%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes miru-dot2-seq {
  0%, 73% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  77%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes miru-dot3-seq {
  0%, 80% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  84%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes miru-dot4-seq {
  0%, 82% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  84% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  86%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes miru-dot5-seq {
  0%, 84% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  86% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  88%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes miru-spot-card1-seq {
  0%, 68% { opacity: 0; transform: translateY(10px); }
  70%, 73% { opacity: 1; transform: translateY(0); }
  75%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes miru-spot-card2-seq {
  0%, 75% { opacity: 0; transform: translateY(10px); }
  77%, 80% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(10px); }
}

@keyframes miru-card-seq {
  0%, 84% { opacity: 0; transform: translateY(10px); }
  87%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes miru-card-line-summary-seq {
  0%, 87% { opacity: 0; transform: translateY(5px); }
  88%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes miru-card-line-strength-seq {
  0%, 89% { opacity: 0; transform: translateY(5px); }
  90%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes miru-card-line-next-seq {
  0%, 91% { opacity: 0; transform: translateY(5px); }
  92%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes miru-try-now-seq {
  0%, 93% { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); visibility: hidden; }
  96%, 100% { opacity: 1; transform: translate(-50%, -50%); visibility: visible; }
}

@media (max-width: 640px) {
  .miru-hiw {
    padding: 7vh 5vw;
  }

  .miru-hiw__stage {
    gap: 3rem;
  }

  .miru-hiw__photo-frame {
    width: min(88vw, 52vh, 380px);
  }

  @keyframes miru-cursor-seq {
    0% { opacity: 0; transform: translate(-46vw, 20vh); }
    2% { opacity: 1; transform: translate(-46vw, 20vh); }
    7% { opacity: 1; transform: translate(0, 0); }
    12% { opacity: 1; transform: translate(0, 0) scale(0.88); }
    14% { opacity: 1; transform: translate(0, 0) scale(1); }
    16% { opacity: 0; transform: translate(14vw, -18vh); }
    17% { opacity: 0; transform: translate(-46vw, 20vh); }
    100% { opacity: 0; transform: translate(-46vw, 20vh); }
  }

  @keyframes miru-thumb-seq {
    0% { opacity: 0; transform: translate(-46vw, 20vh) translate(6px, 6px) rotate(-9deg) scale(1); }
    2% { opacity: 1; transform: translate(-46vw, 20vh) translate(6px, 6px) rotate(-9deg) scale(1); }
    7% { opacity: 1; transform: translate(0, 0) translate(6px, 6px) rotate(-9deg) scale(1); }
    12% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.85); }
    15% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.15); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.15); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .miru-hiw__cursor,
  .miru-hiw__thumb,
  .miru-hiw__progress-wrap,
  .miru-hiw__photo-frame,
  .miru-hiw__scrim,
  .miru-hiw__msg,
  .miru-hiw__dot,
  .miru-hiw__spot-card,
  .miru-hiw__card,
  .miru-hiw__card-line,
  .miru-hiw__try-now {
    display: none;
  }

  .miru-hiw__button {
    animation: none;
    opacity: 1;
  }

  .miru-hiw__button-label--default {
    animation: none;
    opacity: 1;
  }

  .miru-hiw__button-label--done {
    animation: none;
    opacity: 0;
  }
}

.blog-content {
  color: rgb(255 255 255 / 0.72);
  font-size: 1.0625rem;
  line-height: 1.9;
}

.blog-content > * + * {
  margin-top: 1.25rem;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  color: rgb(255 255 255);
  font-weight: 650;
  line-height: 1.2;
  margin-top: 2.25rem;
}

.blog-content h2 {
  font-size: 1.875rem;
}

.blog-content h3 {
  font-size: 1.5rem;
}

.blog-content h4 {
  font-size: 1.25rem;
}

.blog-content a {
  color: rgb(251 191 36);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-content ul,
.blog-content ol {
  padding-left: 1.35rem;
}

.blog-content ul {
  list-style: disc;
}

.blog-content ol {
  list-style: decimal;
}

.blog-content blockquote {
  border-left: 2px solid rgb(251 191 36 / 0.7);
  color: rgb(255 255 255 / 0.82);
  padding-left: 1rem;
}

.blog-content pre {
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.375rem;
  color: rgb(255 255 255 / 0.82);
  overflow-x: auto;
  padding: 1rem;
}

.blog-content code {
  background: rgb(255 255 255 / 0.08);
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
}

.blog-content pre code {
  background: transparent;
  padding: 0;
}

.blog-content-light {
  color: rgb(51 65 85);
}

.blog-content-light h2,
.blog-content-light h3,
.blog-content-light h4 {
  color: rgb(15 23 42);
}

.blog-content-light a {
  color: rgb(15 23 42);
}

.blog-content-light blockquote {
  border-left-color: rgb(15 23 42 / 0.45);
  color: rgb(30 41 59);
}

.blog-content-light pre,
.blog-content-light code {
  background: rgb(241 245 249);
  border-color: rgb(226 232 240);
  color: rgb(15 23 42);
}

.tiptap-toolbar-button {
  align-items: center;
  background: rgb(255 255 255 / 0.08);
  border-radius: 9999px;
  color: rgb(255 255 255 / 0.78);
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 700;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  transition: background-color 150ms ease, color 150ms ease;
}

.tiptap-toolbar-button:hover {
  background: rgb(255 255 255 / 0.16);
  color: rgb(255 255 255);
}

.tiptap-editor-surface .ProseMirror > * + * {
  margin-top: 1rem;
}

.tiptap-editor-surface .ProseMirror h2,
.tiptap-editor-surface .ProseMirror h3,
.tiptap-editor-surface .ProseMirror h4 {
  color: rgb(255 255 255);
  font-weight: 650;
  line-height: 1.2;
}

.tiptap-editor-surface .ProseMirror h2 {
  font-size: 1.875rem;
}

.tiptap-editor-surface .ProseMirror h3 {
  font-size: 1.5rem;
}

.tiptap-editor-surface .ProseMirror h4 {
  font-size: 1.25rem;
}

.tiptap-editor-surface .ProseMirror ul {
  list-style: disc;
  padding-left: 1.35rem;
}

.tiptap-editor-surface .ProseMirror ol {
  list-style: decimal;
  padding-left: 1.35rem;
}

.tiptap-editor-surface .ProseMirror blockquote {
  border-left: 2px solid rgb(251 191 36 / 0.7);
  padding-left: 1rem;
}

.tiptap-editor-surface .ProseMirror a {
  color: rgb(251 191 36);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.tiptap-editor-surface .ProseMirror p.is-editor-empty:first-child::before {
  color: rgb(255 255 255 / 0.35);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}