.spark-cover {
  --phone-scale: 1.056;
  --shift: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 960;
  margin: 8px 0 28px;
  overflow: hidden;
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", "SF Pro", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #070706;
  pointer-events: none;
}
.sp-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #070605;
}
.sp-wash {
  position: absolute;
  width: 170%;
  height: 180%;
  left: -35%;
  top: -40%;
  opacity: 0;
  transform: translate3d(calc(var(--shift) * -6%), calc(var(--shift) * -10%), 0);
  transition:
    opacity 900ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 1200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.sp-wash-base {
  opacity: 1;
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  transform: none;
  filter: blur(16px);
  background-color: #070605;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(32% 36% at 16% 18%, #4a4338 0%, transparent 68%),
    radial-gradient(26% 30% at 82% 10%, #6a5818 0%, transparent 64%),
    radial-gradient(18% 22% at 56% 32%, #3a3018 0%, transparent 70%),
    radial-gradient(30% 34% at 88% 84%, #2a4860 0%, transparent 66%),
    radial-gradient(22% 26% at 38% 62%, #2c261c 0%, transparent 72%),
    radial-gradient(16% 20% at 68% 48%, #3a3414 0%, transparent 68%);
  background-size: 155% 150%, 165% 170%, 140% 145%, 160% 155%, 150% 160%, 135% 140%;
  animation: sp-pan-a 22s ease-in-out infinite alternate;
}
.sp-wash-warm {
  filter: blur(22px);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(28% 32% at 10% 20%, #5a5044 0%, transparent 66%),
    radial-gradient(24% 28% at 76% 8%, #7a641c 0%, transparent 64%),
    radial-gradient(20% 24% at 90% 46%, #4a3c12 0%, transparent 68%),
    radial-gradient(28% 32% at 72% 90%, #345672 0%, transparent 66%);
  background-size: 170% 160%, 155% 175%, 150% 150%, 165% 160%;
  animation: sp-pan-b 26s ease-in-out infinite alternate;
}
.sp-wash-olive {
  filter: blur(20px);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(30% 34% at 14% 16%, #2a3018 0%, transparent 68%),
    radial-gradient(22% 26% at 70% 22%, #1c2412 0%, transparent 70%),
    radial-gradient(26% 30% at 86% 80%, #12160c 0%, transparent 68%),
    radial-gradient(18% 22% at 42% 58%, #32381c 0%, transparent 70%);
  background-size: 160% 155%, 150% 165%, 165% 150%, 140% 145%;
  animation: sp-pan-c 20s ease-in-out infinite alternate;
}
.sp-wash-ice {
  filter: blur(20px);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(28% 32% at 84% 82%, #243e54 0%, transparent 66%),
    radial-gradient(22% 26% at 16% 18%, #1a2830 0%, transparent 68%),
    radial-gradient(16% 20% at 58% 42%, #142028 0%, transparent 70%);
  background-size: 165% 160%, 150% 155%, 145% 150%;
  animation: sp-pan-b 18s ease-in-out infinite alternate-reverse;
}
@keyframes sp-pan-a {
  from { background-position: 4% 8%, 84% 2%, 46% 26%, 88% 80%, 28% 58%, 62% 44%; }
  to { background-position: 22% 24%, 62% 18%, 64% 12%, 66% 58%, 44% 74%, 48% 66%; }
}
@keyframes sp-pan-b {
  from { background-position: 2% 14%, 88% 0%, 74% 38%, 92% 88%; }
  to { background-position: 20% 30%, 58% 16%, 46% 56%, 64% 62%; }
}
@keyframes sp-pan-c {
  from { background-position: 0% 6%, 76% 10%, 92% 82%, 34% 54%; }
  to { background-position: 18% 26%, 54% 28%, 64% 60%, 50% 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-wash { animation: none; }
}
.spark-cover[data-mood="photo"] .sp-wash-warm,
.spark-cover[data-mood="bio"] .sp-wash-warm { opacity: 0.46; }
.spark-cover[data-mood="about"] .sp-wash-olive,
.spark-cover[data-mood="prompt"] .sp-wash-olive { opacity: 0.46; }
.spark-cover[data-mood="ice"] .sp-wash-ice { opacity: 0.46; }
.sp-grain {
  position: absolute;
  inset: -12%;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='gamma' amplitude='1.3' exponent='0.55' offset='-0.05'/><feFuncG type='gamma' amplitude='1.3' exponent='0.55' offset='-0.05'/><feFuncB type='gamma' amplitude='1.3' exponent='0.55' offset='-0.05'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
  pointer-events: none;
}
.sp-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 72px 72px;
}
.spark-cover,
.spark-cover * { box-sizing: border-box; }

.project-media.has-spark {
  position: relative;
  width: 604px;
  min-height: 453px;
  aspect-ratio: 604 / 453;
  overflow: hidden;
  background: transparent;
}
@media (max-width: 1199.98px) {
  .project-media.has-spark {
    width: 100%;
    min-height: 0;
    aspect-ratio: 400 / 300;
  }
}
.project-media .spark-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.sp-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 960px;
  transform-origin: 0 0;
  z-index: 1;
}

.sp-phone {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 381px;
  height: 818px;
  padding: 3px;
  border-radius: 50px;
  background: #4a5328;
  transform: translate(-50%, -50%) scale(var(--phone-scale));
  transform-origin: center center;
  box-shadow:
    0 0 0 1px #12160c,
    0 26px 44px rgba(0, 0, 0, 0.48);
}
.sp-skin {
  position: relative;
  width: 375px;
  height: 812px;
  border-radius: 47px;
  overflow: hidden;
  background: #000;
}

.sp-island {
  position: absolute;
  z-index: 20;
  top: 11px;
  left: 50%;
  width: 126px;
  height: 36px;
  margin-left: -63px;
  border-radius: 20px;
  background: #000;
}
.sp-island i {
  position: absolute;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #1a2230;
  box-shadow: inset 0 0 0 1.5px #0b1018, inset 3px -1px 0 #2a4a6a;
}
.sp-island i:first-child { right: 18px; }
.sp-island i:last-child {
  right: 36px;
  width: 6px;
  height: 6px;
  top: 12px;
  background: #151515;
  box-shadow: none;
}

.sp-status,
.sp-head,
.sp-nav {
  position: absolute;
  left: 0;
  right: 0;
  background: #000;
}
.sp-status {
  top: 0;
  z-index: 18;
  height: 54px;
  color: #fff;
}
.sp-time {
  position: absolute;
  left: 24px;
  top: 16px;
  width: 54px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.sp-sig {
  position: absolute;
  right: 16px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-sig img {
  display: block;
  height: 12px;
  width: auto;
}

.sp-head {
  top: 54px;
  z-index: 17;
  height: 48px;
}
.sp-energy {
  position: absolute;
  left: 16px;
  top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.408px;
}
.sp-energy img { width: 20px; height: 20px; }
.sp-online {
  position: absolute;
  right: 48px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 2px 8px 2px 2px;
  background: #252525;
  border-radius: 50px;
  color: #aaabad;
  font-size: 12px;
  font-weight: 500;
  box-shadow:
    0 3px 1px rgba(0, 0, 0, 0.06),
    0 3px 8px rgba(0, 0, 0, 0.15);
}
.sp-online img { width: 24px; height: 24px; }
.sp-filter {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
}

.sp-nav {
  bottom: 0;
  z-index: 12;
  height: 83px;
  display: flex;
  flex-direction: column;
}
.sp-tabs { display: flex; height: 49px; }
.sp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sp-tab img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.sp-tab .sp-ava {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  object-fit: cover;
}
.sp-badge {
  position: absolute;
  left: calc(50% + 8px);
  top: 8px;
  min-width: 16px;
  padding: 0 4px;
  background: #fce72c;
  color: #000;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}
.sp-home { height: 34px; position: relative; }
.sp-home i,
.sp-kb-home i {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  background: #fff;
  border-radius: 100px;
}

.sp-feed {
  position: absolute;
  top: 102px;
  left: 0;
  right: 0;
  bottom: 83px;
  overflow: hidden;
  background: #000;
}
.sp-tape {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px 24px;
}
.spark-cover.is-play .sp-tape {
  transform: translateY(72px);
}
.spark-cover.is-play.is-scroll .sp-tape {
  transform: translateY(var(--to, 72px));
  transition: transform 2400ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.spark-cover.is-play.is-scroll.is-step .sp-tape {
  transition-duration: 1800ms;
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.spark-cover.is-play.is-scroll.is-end .sp-tape {
  transition-duration: 1200ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.sp-fill { display: contents; }

.sp-card {
  position: relative;
  width: 359px;
  border-radius: 16px;
  overflow: hidden;
  flex: 0 0 auto;
}
.sp-card:not(.sp-photo) {
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}
.spark-cover.is-play .sp-card {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(0.972);
  transform-origin: center top;
}
.spark-cover.is-play .sp-card.is-block {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 380ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 480ms cubic-bezier(0.23, 1, 0.32, 1);
}
.spark-cover.is-play .sp-bit {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  filter: blur(5px);
}
.spark-cover.is-play .sp-card.is-live .sp-bit {
  opacity: 1;
  transform: none;
  filter: none;
  animation: sp-bit-in 520ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
}
.spark-cover.is-play .sp-card.is-live .sp-ch {
  animation-duration: 220ms;
}
.sp-name { display: block; white-space: nowrap; }
.sp-ch { display: inline-block; }
@keyframes sp-bit-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.sp-photo {
  height: 478px;
  background: #111;
}
.sp-photo > img:not(.sp-more) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.8) 100%);
}
.sp-user {
  position: absolute;
  left: 16px;
  right: 68px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
}
.sp-user strong {
  display: block;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.35px;
}
.sp-meta {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  color: #f8f8f8;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
}
.sp-meta span { display: flex; align-items: center; gap: 4px; }
.sp-meta img { width: 20px; height: 20px; }
.sp-more {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 16px;
  object-fit: cover;
}
.sp-heart,
.sp-heart-abs {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 60px;
  background: #fff;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.12);
}
.sp-heart img,
.sp-heart-abs img { width: 24px; height: 24px; }
.sp-react {
  transition: scale 140ms cubic-bezier(0.2, 0, 0, 1), background 140ms linear;
}
.spark-cover.is-tap .sp-react {
  scale: 0.88;
  background: #fce72c;
}

.sp-bio,
.sp-prompt { background: #fff; padding: 24px 16px 84px; }
.sp-bio p {
  margin: 0;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.4px;
  color: #000;
}
.sp-about {
  background: #fff;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sp-block { display: flex; flex-direction: column; gap: 10px; }
.sp-label {
  margin: 0;
  color: #191919;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}
.sp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 60px;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
}
.sp-chip img { width: 14px; height: 14px; object-fit: contain; }
.sp-chip.on { background: #252525; color: #fff; }
.sp-chip.off { background: #f8f8f8; color: #000; }
.sp-hr { height: 1px; background: #e9eaea; }
.sp-note {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  width: 236px;
  padding: 8px 16px;
  border-radius: 16px;
  background: rgba(31, 31, 31, 0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.15px;
}
.sp-ice {
  height: 329px;
  padding: 24px 16px 84px;
  background:
    linear-gradient(180deg, rgba(31, 214, 255, 0.3) 0%, rgba(255, 255, 255, 0) 72%),
    #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sp-ice img.sp-ice-ico { width: 40px; height: 40px; margin-bottom: 16px; }
.sp-ice .sp-label,
.sp-ice h3 { width: 100%; align-self: stretch; }
.sp-ice h3 {
  margin: 16px 0 0;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: 0.38px;
  color: #000;
}
.sp-q { width: 16px; height: 16px; margin-bottom: 10px; }
.sp-prompt h3 {
  margin: 10px 0 0;
  font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  letter-spacing: 0.4px;
  color: #000;
}

.sp-reply {
  position: absolute;
  top: 102px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  display: flex;
  flex-direction: column;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 180ms;
}
.spark-cover.is-reply .sp-reply {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s;
}
.sp-reply-pic {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 8px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.sp-reply-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: #000;
}
.sp-compose {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px 12px;
  background: #000;
}
.spark-cover.is-kb .sp-compose {
  gap: 0;
  padding: 0;
}
.sp-row-in {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.spark-cover.is-kb .sp-row-in {
  padding: 8px;
  background: #000;
}
.sp-field {
  height: 44px;
  min-height: 44px;
  border-radius: 24px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #aaabad;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  min-width: 0;
}
.sp-row-in .sp-field { flex: 1; }
.sp-typed { color: #000; white-space: nowrap; overflow: hidden; }
.sp-caret {
  display: none;
  width: 2px;
  height: 18px;
  margin-right: 2px;
  background: #000;
  animation: sp-blink 1s step-end infinite;
}
.spark-cover.is-kb .sp-caret { display: inline-block; }
@keyframes sp-blink { 50% { opacity: 0; } }
.sp-send {
  height: 44px;
  border-radius: 60px;
  background: #fce72c;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-cancel {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
.spark-cover.is-kb .sp-send-full,
.spark-cover.is-kb .sp-cancel { display: none; }
.sp-send-ico {
  display: none;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}
.spark-cover.is-kb .sp-send-ico { display: block; }

.sp-kb {
  display: none;
  flex: 0 0 auto;
  width: 375px;
  background: rgba(56, 56, 56, 0.94);
}
.spark-cover.is-kb .sp-kb {
  display: block;
  animation: sp-kb-in 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes sp-kb-in {
  from { transform: translate3d(0, 22px, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.sp-acc {
  display: flex;
  height: 43px;
  align-items: center;
  padding: 2px 1px 0;
  color: #fff;
  font-size: 17px;
  letter-spacing: -0.43px;
}
.sp-acc span { flex: 1; text-align: center; line-height: 22px; }
.sp-acc i {
  width: 1px;
  height: 25px;
  background: rgba(255, 255, 255, 0.1);
}
.sp-keys {
  position: relative;
  height: 204px;
  margin-top: 5px;
}
.sp-krow {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 42px;
  display: flex;
  gap: 6px;
}
.sp-krow.r1 { top: 0; }
.sp-krow.r2 { top: 54px; left: 22px; right: 22px; }
.sp-krow.r3 { top: 108px; left: 59px; right: 59px; }
.sp-krow.r4 { top: 162px; left: 3px; right: 3px; }
.sp-shift,
.sp-del {
  position: absolute;
  top: 108px;
  width: 42px;
  height: 42px;
}
.sp-shift { left: 3px; }
.sp-del { right: 3px; }
.sp-key {
  flex: 1;
  height: 42px;
  border-radius: 4.6px;
  background: #6b6b70;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: -apple-system, "SF Pro", system-ui, sans-serif;
  font-size: 25px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 28px;
}
.sp-key.mod {
  background: #454547;
  font-size: 16px;
  letter-spacing: -0.31px;
}
.sp-key.space { flex: 1.7; font-size: 16px; }
.sp-key.is-hit { background: #9a9a9e; }
.sp-kb-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55px;
  padding: 12px 24px 0 20px;
}
.sp-kb-bot img { display: block; }
.sp-kb-home { height: 26px; position: relative; }

@media (prefers-reduced-motion: reduce) {
  .spark-cover.is-play .sp-card,
  .spark-cover.is-play .sp-card.is-block,
  .spark-cover.is-play .sp-bit,
  .spark-cover.is-play .sp-card.is-live .sp-bit,
  .spark-cover.is-play .sp-tape,
  .spark-cover.is-play.is-scroll .sp-tape {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
  .sp-feed,
  .sp-reply,
  .spark-cover.is-kb .sp-kb {
    transition: none;
    animation: none;
  }
}