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

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-Black.ttf") format("truetype");
  font-weight: 900 1000;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Quicksand";
  src: url("/fonts/Quicksand-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("/fonts/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("/fonts/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("/fonts/MPLUSRounded1c-Medium.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("/fonts/MPLUSRounded1c-ExtraBold.ttf") format("truetype");
  font-weight: 800 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Honeyfy Rounded";
  src: url("/fonts/HoneyfyRounded-ExtraBold.ttf") format("truetype");
  font-weight: 800 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ink: #111111;
  --paper: #f6f1e8;
  --gold: #f3c34f;
  --coral: #e35b4f;
  --mint: #4a8f75;
  --blue: #2e5f87;
  --line: rgba(17, 17, 17, 0.14);
  --honey-rail: #dad6ce;
  --rounded-font: "Nunito", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Nunito", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 900;
  --action-font-weight: 900;
  --title-tightness-scale: 1;
}

:root[data-honeyfy-font="quicksand"] {
  --rounded-font: "Quicksand", ui-rounded, "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Quicksand", ui-rounded, "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 700;
  --action-font-weight: 700;
}

:root[data-title-tightness="1"] {
  --title-tightness-scale: 0.985;
}

:root[data-title-tightness="2"] {
  --title-tightness-scale: 0.97;
}

:root[data-title-tightness="3"] {
  --title-tightness-scale: 0.955;
}

:root[data-title-tightness="4"] {
  --title-tightness-scale: 0.94;
}

:root[data-honeyfy-font="nunito"] {
  --rounded-font: "Nunito", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Nunito", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 900;
  --action-font-weight: 900;
}

:root[data-honeyfy-font="honeyfy-rounded"] {
  --rounded-font: "M PLUS Rounded 1c", ui-rounded, "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Honeyfy Rounded", "M PLUS Rounded 1c", ui-rounded, system-ui, var(--emoji-font), sans-serif;
  --display-font-weight: 1000;
  --action-font-weight: 1000;
}

:root[data-honeyfy-font="baloo-2"] {
  --rounded-font: "Baloo 2", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Baloo 2", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 800;
  --action-font-weight: 800;
}

:root[data-honeyfy-font="fredoka"] {
  --rounded-font: "Fredoka", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Fredoka", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 700;
  --action-font-weight: 700;
}

:root[data-honeyfy-font="comfortaa"] {
  --rounded-font: "Comfortaa", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Comfortaa", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 700;
  --action-font-weight: 700;
}

:root[data-honeyfy-font="varela-round"] {
  --rounded-font: "Varela Round", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --rounded-font-extra-bold: "Varela Round", ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", var(--emoji-font), sans-serif;
  --display-font-weight: 400;
  --action-font-weight: 400;
}

:root.darkMode {
  color-scheme: dark;
  --ink: #fff6df;
  --paper: #0b0907;
  --gold: #d9a83c;
  --coral: #ff8175;
  --mint: #63c5a4;
  --blue: #79acd1;
  --line: rgba(255, 246, 223, 0.16);
  --honey-rail: #282522;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--rounded-font);
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.darkMode body,
body.darkMode {
  background: var(--paper);
}

.darkMode .appShell {
  background:
    radial-gradient(circle at 24% 10%, rgba(217, 168, 60, 0.22), transparent 28%),
    linear-gradient(135deg, rgba(99, 197, 164, 0.12), transparent 38%),
    linear-gradient(315deg, rgba(121, 172, 209, 0.12), transparent 42%),
    var(--paper);
}

.darkMode .phoneStage {
  border-color: rgba(255, 246, 223, 0.14);
  background: rgba(19, 16, 12, 0.9);
  box-shadow: 0 26px 78px rgba(0, 0, 0, 0.58);
}

.accessGate,
.maintenanceGate {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(14px);
}

.accessPanel,
.maintenancePanel {
  width: min(100%, 330px);
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 250, 240, 0.24);
  border-radius: 8px;
  color: #fffaf0;
  background: #111111;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
}

.maintenancePanel {
  width: min(100%, 420px);
  text-align: center;
}

.maintenancePanel h2 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(1.7rem, 9vw, 3rem);
  line-height: 0.98;
}

.accessPanel h2,
.accessPanel p {
  margin: 0;
}

.accessPanel h2 {
  font-size: 1.28rem;
  line-height: 1;
}

.accessPanel label {
  display: grid;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.accessPanel input {
  min-height: 44px;
  border: 1px solid rgba(255, 250, 240, 0.32);
  border-radius: 8px;
  padding: 0 12px;
  color: #fffaf0;
  background: rgba(255, 250, 240, 0.08);
}

.accessPanel button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
}

.accessError {
  color: #ff7a70;
  font-size: 0.85rem;
  font-weight: 800;
}

.emailLinkModal,
.welcomeAuthModal,
.purchaseSuccessModal,
.beeFoundModal,
.freeHoneyLimitModal,
.secretUnlockModal,
.minorRewardModal,
.aboutModal,
.shareModal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(17, 17, 17, 0.62);
  backdrop-filter: blur(12px);
  opacity: 1;
  transition: opacity 220ms ease;
}

.emailLinkModal.closing,
.welcomeAuthModal.closing,
.purchaseSuccessModal.closing,
.beeFoundModal.closing,
.freeHoneyLimitModal.closing,
.secretUnlockModal.closing,
.minorRewardModal.closing,
.aboutModal.closing,
.shareModal.closing {
  opacity: 0;
}

.emailLinkPanel,
.welcomeAuthPanel,
.purchaseSuccessPanel,
.beeFoundPanel,
.freeHoneyLimitPanel,
.secretUnlockPanel,
.minorRewardPanel,
.aboutPanel,
.sharePanel {
  width: min(100%, 340px);
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 18px;
  color: var(--ink);
  background: #fffaf0;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
  transform: translateY(0) scale(1);
  transition: transform 220ms ease;
}

.darkMode .emailLinkPanel,
.darkMode .welcomeAuthPanel,
.darkMode .purchaseSuccessPanel,
.darkMode .beeFoundPanel,
.darkMode .freeHoneyLimitPanel,
.darkMode .secretUnlockPanel,
.darkMode .minorRewardPanel,
.darkMode .aboutPanel,
.darkMode .sharePanel {
  border-color: rgba(255, 246, 223, 0.14);
  color: var(--ink);
  background: #15120e;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
}

.emailLinkModal.closing .emailLinkPanel,
.welcomeAuthModal.closing .welcomeAuthPanel,
.purchaseSuccessModal.closing .purchaseSuccessPanel,
.beeFoundModal.closing .beeFoundPanel,
.freeHoneyLimitModal.closing .freeHoneyLimitPanel,
.secretUnlockModal.closing .secretUnlockPanel,
.minorRewardModal.closing .minorRewardPanel,
.aboutModal.closing .aboutPanel,
.shareModal.closing .sharePanel {
  transform: translateY(8px) scale(0.98);
}

.emailLinkPanel.invalid {
  animation: emailLinkShake 320ms ease-in-out;
}

.emailLinkPanel h2,
.emailLinkPanel p,
.welcomeAuthPanel h2,
.welcomeAuthPanel p,
.purchaseSuccessPanel p,
.beeFoundPanel p,
.freeHoneyLimitPanel p,
.secretUnlockPanel p,
.minorRewardPanel p,
.sharePanel h2,
.sharePanel p {
  margin: 0;
}

.emailLinkPanel h2,
.welcomeAuthPanel h2,
.beeFoundPanel h2,
.freeHoneyLimitPanel h2,
.sharePanel h2 {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
}

.darkMode .emailLinkPanel h2,
.darkMode .welcomeAuthPanel h2,
.darkMode .beeFoundPanel h2,
.darkMode .freeHoneyLimitPanel h2,
.darkMode .sharePanel h2 {
  color: var(--ink);
}

.emailLinkPanel p,
.welcomeAuthPanel p,
.beeFoundPanel p,
.freeHoneyLimitPanel p,
.sharePanel p {
  color: rgba(17, 17, 17, 0.66);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.darkMode .emailLinkPanel p,
.darkMode .welcomeAuthPanel p,
.darkMode .beeFoundPanel p,
.darkMode .freeHoneyLimitPanel p,
.darkMode .sharePanel p {
  color: rgba(255, 246, 223, 0.68);
}

.emailLinkPanel input {
  min-height: 46px;
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--ink);
  background: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 850;
}

.emailLinkModalError {
  color: #d82020 !important;
}

.emailLinkActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.emailLinkActions button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
}

.emailLinkCancelButton {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.08);
}

.emailLinkSubmitButton {
  color: var(--ink);
  background: var(--gold);
}

.welcomeAuthPanel {
  gap: 14px;
}

.welcomeAuthButtons {
  display: grid;
  gap: 9px;
}

.welcomeAuthPanel .officialSignInButton {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 10px;
  padding: 0 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.welcomeShopButton {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
  cursor: pointer;
}

.welcomeAuthDismissButton {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.08);
  font-weight: 950;
  cursor: pointer;
}

.darkMode .welcomeAuthDismissButton,
.darkMode .emailLinkCancelButton {
  color: var(--ink);
  background: rgba(255, 246, 223, 0.1);
}

.purchaseSuccessPanel {
  justify-items: center;
  gap: 10px;
  overflow: hidden;
}

.beeFoundPanel {
  justify-items: center;
  gap: 12px;
  overflow: hidden;
  text-align: center;
}

.beeFoundPanel.hiveShake {
  animation: beeFoundHiveShake 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.beeFoundPanel h2 {
  max-width: 12ch;
  color: var(--ink);
  font-size: clamp(2rem, 10vw, 3.2rem);
  font-weight: 1000;
  line-height: 0.9;
}

.beeFoundImage {
  width: min(54vw, 190px);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(17, 17, 17, 0.2));
}

.beeFoundPanel p {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.beeFoundActions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.beeFoundActions button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.beeFoundHiveButton {
  color: var(--ink);
  background: #f4c240;
}

.beeFoundOkButton {
  color: var(--ink);
  background: rgba(17, 17, 17, 0.08);
}

.darkMode .beeFoundOkButton {
  background: rgba(255, 246, 223, 0.1);
}

.secretUnlockPanel {
  justify-items: center;
  gap: 12px;
  overflow: hidden;
  text-align: center;
}

.secretUnlockPanel.majorUnlock {
  width: min(100%, 380px);
  padding: 24px 20px 22px;
  border-color: rgba(244, 194, 64, 0.54);
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 194, 64, 0.28), transparent 54%),
    #fffaf0;
}

.darkMode .secretUnlockPanel.majorUnlock {
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 194, 64, 0.2), transparent 54%),
    #15120e;
}

.secretUnlockCount {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.secretUnlockTitle {
  color: var(--gold);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  font-weight: 1000;
  line-height: 0.94;
  text-shadow:
    0 2px 0 var(--ink),
    0 10px 26px rgba(243, 195, 79, 0.28);
}

.secretUnlockPanel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 1000;
  line-height: 1;
}

.secretUnlockPanel p {
  max-width: 29ch;
  color: rgba(17, 17, 17, 0.72);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.3;
}

.secretUnlockPanel button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
  cursor: pointer;
}

.minorRewardPanel {
  justify-items: center;
  gap: 14px;
  overflow: hidden;
  text-align: center;
}

.minorRewardTitle {
  color: var(--gold);
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  font-weight: 1000;
  line-height: 0.95;
  text-shadow:
    0 2px 0 var(--ink),
    0 10px 24px rgba(243, 195, 79, 0.26);
}

.minorRewardCategory {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.minorRewardSpinner {
  width: 100%;
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.54);
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  font-weight: 1000;
  line-height: 1.05;
  transition: color 180ms ease, transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.darkMode .minorRewardSpinner {
  border-color: rgba(255, 246, 223, 0.14);
  background: rgba(255, 246, 223, 0.08);
}

.minorRewardSpinner.final {
  color: var(--gold);
}

.minorRewardPanel button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
  cursor: pointer;
}

.minorRewardPanel button:disabled {
  cursor: default;
  opacity: 0.48;
}

.purchaseSuccessAmount {
  color: var(--gold);
  font-size: clamp(4.2rem, 24vw, 7.2rem);
  font-weight: 1000;
  line-height: 0.86;
  text-shadow: 0 10px 26px rgba(243, 195, 79, 0.3);
}

.purchaseSuccessPanel p {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.freeHoneyLimitPanel {
  gap: 14px;
  text-align: center;
}

.freeHoneyLimitPanel h2 {
  font-size: 1.25rem;
  font-weight: 1000;
  letter-spacing: 0;
}

.freeHoneyLimitActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.freeHoneyLimitActions button {
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  font-weight: 950;
  letter-spacing: 0;
  cursor: pointer;
}

.freeHoneyLimitBuy {
  color: var(--ink);
  background: var(--gold);
}

.freeHoneyLimitWait {
  color: rgba(17, 17, 17, 0.72);
  background: #ded8ca;
}

.purchaseSuccessPanel button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
  cursor: pointer;
}

.purchaseParticles {
  position: relative;
  width: 170px;
  height: 28px;
}

.purchaseParticles span {
  position: absolute;
  left: calc(var(--i, 0) * 16%);
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
  opacity: 0;
  animation: purchaseParticle 1200ms ease-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.purchaseParticles span:nth-child(1) { --i: 1; }
.purchaseParticles span:nth-child(2) { --i: 2; }
.purchaseParticles span:nth-child(3) { --i: 3; }
.purchaseParticles span:nth-child(4) { --i: 4; }
.purchaseParticles span:nth-child(5) { --i: 5; }
.purchaseParticles span:nth-child(6) { --i: 6; }

@keyframes purchaseParticle {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.6);
  }

  25% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translateY(-22px) scale(1.1);
  }
}

@keyframes emailLinkShake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-7px);
  }

  40% {
    transform: translateX(7px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(4px);
  }
}

@keyframes beeFoundHiveShake {
  10%,
  90% {
    transform: translateX(-2px) rotate(-0.7deg);
  }

  20%,
  80% {
    transform: translateX(4px) rotate(0.7deg);
  }

  30%,
  50%,
  70% {
    transform: translateX(-7px) rotate(-1.2deg);
  }

  40%,
  60% {
    transform: translateX(7px) rotate(1.2deg);
  }
}

.sharePanel {
  position: relative;
  width: min(100%, 376px);
  gap: 12px;
}

.aboutPanel {
  position: relative;
  width: min(100%, 420px);
  max-height: min(78vh, 620px);
  overflow: auto;
  padding-right: 22px;
}

.aboutPanel h2 {
  margin: 0;
  padding-right: 34px;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
}

.aboutTitleBrand {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  vertical-align: baseline;
}

.aboutTitleLogo {
  width: 23px;
  height: 28px;
  flex: 0 0 auto;
  overflow: visible;
  transform: translateY(0.12em);
}

.aboutTitleLogo .honeyLogoHeartLeft,
.aboutTitleLogo .honeyLogoHeartRight,
.purifyMode .aboutTitleLogo .honeyLogoHeartLeft,
.purifyMode .aboutTitleLogo .honeyLogoHeartRight {
  stroke: var(--gold);
  stroke-width: 18;
}

.aboutTitleLogo .honeyLogoDrip,
.purifyMode .aboutTitleLogo .honeyLogoDrip {
  fill: var(--gold);
}

.aboutPanel p {
  margin: 0;
  color: rgba(17, 17, 17, 0.7);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.42;
  white-space: pre-line;
}

.darkMode .aboutPanel p {
  color: rgba(255, 246, 223, 0.7);
}

.aboutGlitchText {
  display: grid;
  gap: 12px;
  height: var(--about-text-height, auto);
  align-content: start;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.aboutGlitchText.glitching {
  cursor: grabbing;
  user-select: none;
}

.aboutGlitchMeasure {
  position: absolute;
  left: 0;
  top: 0;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

.aboutMoreButton {
  width: fit-content;
  min-height: 0;
  justify-self: start;
  margin: -2px 0 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  color: #111;
  background: var(--gold);
  font-size: 0.76rem;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}

.aboutPageButton {
  justify-self: center;
  margin-top: 0;
}

.shareModalClose {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.06);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.darkMode .shareModalClose {
  border-color: rgba(255, 246, 223, 0.14);
  background: rgba(255, 246, 223, 0.08);
}

.shareWatermarkToggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 2px;
  color: var(--ink);
  font-weight: 900;
}

.shareWatermarkToggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
}

.shareWatermarkToggle.locked {
  color: rgba(17, 17, 17, 0.42);
  cursor: pointer;
}

.darkMode .shareWatermarkToggle.locked {
  color: rgba(255, 246, 223, 0.38);
}

.shareWatermarkToggle.locked input {
  opacity: 0.5;
  cursor: pointer;
}

.shareWatermarkLockMessage {
  margin: -4px 2px 0;
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.2;
}

.darkMode .shareWatermarkLockMessage {
  color: rgba(255, 246, 223, 0.62);
}

.sharePanel p:empty {
  display: none;
}

.shareCaptionField {
  display: grid;
}

.shareCaptionField textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.04);
  font-weight: 850;
  line-height: 1.25;
}

.shareCaptionField textarea:focus {
  border-color: rgba(243, 195, 79, 0.76);
  outline: none;
}

.shareGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shareGrid button {
  min-height: 78px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.04);
  font-weight: 950;
  cursor: pointer;
}

.darkMode .shareGrid button {
  border-color: rgba(255, 246, 223, 0.12);
  background: rgba(255, 246, 223, 0.07);
}

.shareGrid button:hover,
.shareGrid button:focus-visible {
  border-color: rgba(243, 195, 79, 0.7);
  background: rgba(243, 195, 79, 0.16);
  outline: none;
}

.shareGrid button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.shareGrid span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ink);
  border-radius: 999px;
  background: var(--gold);
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
}

#downloadShareButton span {
  font-size: 1rem;
}

.shareGrid strong {
  max-width: 100%;
  font-size: 0.82rem;
  line-height: 1.05;
  text-align: center;
}

.appLocked .appShell {
  filter: blur(10px);
  pointer-events: none;
}

button,
input,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

.appShell {
  height: 100svh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(6px, env(safe-area-inset-top)) 8px max(6px, env(safe-area-inset-bottom));
  background:
    linear-gradient(135deg, rgba(243, 195, 79, 0.42), transparent 38%),
    linear-gradient(315deg, rgba(46, 95, 135, 0.22), transparent 42%),
    var(--paper);
}

.phoneStage {
  width: min(100%, 430px);
  height: min(820px, calc(100svh - 12px));
  height: min(820px, calc(100dvh - 12px));
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(6px, 1.1svh, 10px);
  padding: clamp(9px, 1.45svh, 14px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 252, 246, 0.86);
  box-shadow: 0 26px 70px rgba(17, 17, 17, 0.18);
  backdrop-filter: blur(20px);
}

.launchIntroPending .phoneStage > :not(.launchSplash),
.launchIntroReveal .phoneStage > :not(.launchSplash) {
  opacity: 0;
}

.launchIntroReveal .phoneStage > :not(.launchSplash) {
  animation: launchContentFadeIn 260ms ease-out forwards;
}

.launchSplash {
  position: absolute;
  inset: 0;
  z-index: 50;
  --fast-launch-overlay-bg: rgba(255, 252, 246, 0.98);
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(255, 252, 246, 0.98);
  pointer-events: auto;
  animation: launchSplashFadeOut 480ms ease-in-out 2050ms forwards;
}

.launchSplash.isFinished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.darkMode .launchSplash {
  --fast-launch-overlay-bg: rgba(28, 27, 25, 0.98);
  background: rgba(28, 27, 25, 0.98);
}

.launchSplashLogo {
  width: min(48%, 206px);
  display: grid;
  justify-items: center;
  gap: 11px;
  opacity: 0;
  animation: launchSplashLogoIn 180ms ease-out 120ms forwards;
}

.launchSplashHeart {
  width: 100%;
  aspect-ratio: 300 / 330;
  display: block;
  overflow: visible;
}

.launchSplashHeartLeft,
.launchSplashHeartRight {
  fill: none;
  stroke: var(--gold);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
}

.launchSplashHeartLeft {
  animation: launchSplashDrawLeft 2470ms cubic-bezier(.32, .05, .68, .95) forwards;
}

.launchSplashHeartRight {
  animation: launchSplashDrawRight 2470ms cubic-bezier(.32, .05, .68, .95) forwards;
}

.launchSplashDrip {
  fill: var(--gold);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center top;
  animation:
    launchSplashDripMotion 2470ms linear forwards,
    launchSplashDripVisibility 2470ms linear forwards;
}

.launchSplashWord {
  display: flex;
  justify-content: center;
  color: var(--ink);
  font-family: var(--rounded-font-extra-bold);
  font-size: clamp(2.1rem, 9.5vw, 3.05rem);
  font-weight: var(--display-font-weight);
  line-height: 0.9;
  letter-spacing: 0;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.launchSplashWord span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: launchSplashLetterIn 240ms ease-out forwards;
}

.launchSplashWord span:nth-child(1) {
  animation-delay: 1357ms;
}

.launchSplashWord span:nth-child(2) {
  animation-delay: 1391ms;
}

.launchSplashWord span:nth-child(3) {
  animation-delay: 1425ms;
}

.launchSplashWord span:nth-child(4) {
  animation-delay: 1459ms;
}

.launchSplashWord span:nth-child(5) {
  animation-delay: 1493ms;
}

.launchSplashWord span:nth-child(6) {
  animation-delay: 1527ms;
}

.launchSplashWord span:nth-child(7) {
  animation-delay: 1561ms;
}

.fastIntro .launchSplash {
  animation: launchSplashFadeOut 320ms ease-in-out 1450ms forwards;
}

.fastIntro .launchSplashLogo {
  gap: 0;
}

.fastIntro .launchSplashHeartLeft {
  animation: launchSplashFastDrawLeft 1450ms cubic-bezier(.32, .05, .68, .95) forwards;
}

.fastIntro .launchSplashHeartRight {
  animation: launchSplashFastDrawRight 1450ms cubic-bezier(.32, .05, .68, .95) forwards;
}

.fastIntro .launchSplashDrip {
  animation:
    launchSplashFastDripMotion 1450ms linear forwards,
    launchSplashFastDripVisibility 1450ms linear forwards;
}

.fastIntro .launchSplashWord {
  display: none;
}

@keyframes launchSplashLogoIn {
  100% {
    opacity: 1;
  }
}

@keyframes launchSplashFadeOut {
  99% {
    opacity: 0;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes launchContentFadeIn {
  100% {
    opacity: 1;
  }
}

@keyframes launchSplashDrawLeft {
  0%,
  3% {
    stroke-dashoffset: 380;
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  19.2%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes launchSplashDrawRight {
  0%,
  20.5% {
    opacity: 0;
    stroke-dashoffset: 380;
  }

  21.5% {
    opacity: 1;
  }

  36.7%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes launchSplashDripMotion {
  0%,
  31.64% {
    transform: translateY(0) scale(.12, .026);
  }

  45.94% {
    transform: translateY(0) scale(.87, .578);
    animation-timing-function: cubic-bezier(.22, .78, .3, 1);
  }

  51.94%,
  54.94% {
    transform: translateY(0) scale(.87, .578);
    animation-timing-function: cubic-bezier(.42, .02, .88, .45);
  }

  67.94%,
  100% {
    transform: translateY(80px) scale(.87, .578);
  }
}

@keyframes launchSplashDripVisibility {
  0%,
  31.54% {
    opacity: 0;
  }

  31.64%,
  61.94% {
    opacity: 1;
  }

  67.94%,
  100% {
    opacity: 0;
  }
}

@keyframes launchSplashLetterIn {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes launchSplashFastDrawLeft {
  0%,
  6.9% {
    stroke-dashoffset: 380;
    opacity: 0;
  }

  9.4% {
    opacity: 1;
  }

  34.48%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes launchSplashFastDrawRight {
  0%,
  34.48% {
    opacity: 0;
    stroke-dashoffset: 380;
  }

  36.98% {
    opacity: 1;
  }

  62.07%,
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes launchSplashFastDripMotion {
  0%,
  62.07% {
    transform: translateY(0) scale(.12, .026);
  }

  86.41%,
  100% {
    transform: translateY(0) scale(.87, .578);
  }
}

@keyframes launchSplashFastDripVisibility {
  0%,
  61.97% {
    opacity: 0;
  }

  62.07%,
  100% {
    opacity: 1;
  }
}

.brandBar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 4px;
  min-height: 46px;
  max-height: 48px;
  overflow: visible;
}

h1 {
  margin: 0;
  max-width: 14ch;
  display: inline-block;
  font-size: clamp(1.8rem, 9.2vw, 2.75rem);
  line-height: 0.9;
  letter-spacing: 0;
  font-family: var(--rounded-font-extra-bold);
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-weight: var(--display-font-weight);
  text-rendering: optimizeLegibility;
  transform: scaleX(var(--title-tightness-scale));
  transform-origin: left center;
  white-space: pre-line;
}

.brandTitleWrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  max-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.brandTitleWrap:focus,
.brandTitleWrap:focus-visible {
  outline: none;
}

.brandLogo {
  width: 51px;
  height: 68px;
  max-width: 51px;
  max-height: 68px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
  overflow: visible;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.brandLogo:focus,
.brandLogo:focus-visible {
  outline: none;
}

.brandDripCount {
  position: absolute;
  left: 0;
  top: 7px;
  width: 51px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--gold);
  font: 900 6px/1 var(--display-font, var(--app-font));
  opacity: 0;
  transform: scale(0.64);
  transform-origin: center;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0;
}

.brandDripCount[data-digits="3"] {
  font-size: 16px;
}

.brandDripCount[data-digits="4"],
.brandDripCount[data-digits="5"] {
  font-size: 6.5px;
}

.brandDripCount[data-digits="6"] {
  font-size: 5.5px;
}

.brandDripCount.visible {
  animation: brandDripCountPop 760ms ease-in-out both;
}

.brandDripCount.blood {
  color: #e12232;
}

.honeyLogoHeartLeft,
.honeyLogoHeartRight {
  fill: none;
  stroke: var(--gold);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(0) scale(1);
  transition: stroke 180ms ease;
}

.purifyMode .honeyLogoHeartLeft,
.purifyMode .honeyLogoHeartRight {
  stroke: #9f111b;
}

.honeyLogoDrip {
  fill: var(--gold);
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center top;
  transform: translateY(0) scale(1);
}

.purifyMode .honeyLogoDrip {
  fill: #9f111b;
}

.honeyLogoDrip.nextDrip {
  opacity: 0;
  transform: translateY(0) scale(.138, .045);
}

.honeyLogoMark.isGrowing .honeyLogoDrip.activeDrip {
  animation: honeyLogoDripGrow 520ms cubic-bezier(.22, .78, .3, 1) both;
}

.honeyLogoMark.isDropping .honeyLogoHeartLeft,
.honeyLogoMark.isDropping .honeyLogoHeartRight {
  animation: honeyLogoHeartBump 520ms cubic-bezier(.22, .82, .32, 1) both;
  transform-origin: 150px 150px;
}

.honeyLogoMark.isDropping .honeyLogoDrip.activeDrip {
  animation:
    honeyLogoDripFall 720ms cubic-bezier(.38, .02, .94, .52) both,
    honeyLogoDripFade 720ms linear both;
}

.honeyLogoMark.isDropping .honeyLogoDrip.nextDrip {
  animation-name: honeyLogoDripGrow;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.22, .78, .3, 1);
  animation-delay: 400ms;
  animation-fill-mode: both;
}

@keyframes honeyLogoDripGrow {
  0% {
    opacity: 1;
    transform: translateY(0) scale(.138, .045);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes honeyLogoDripFall {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(88px) scale(1);
  }
}

@keyframes honeyLogoDripFade {
  0%,
  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes honeyLogoHeartBump {
  0% {
    transform: translateY(0) scale(1);
  }

  32% {
    transform: translateY(-5px) scale(1.018);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes brandDripCountPop {
  0% {
    opacity: 0;
    transform: scale(0.64);
  }

  14%,
  48% {
    opacity: 1;
    transform: scale(0.67);
  }

  100% {
    opacity: 0;
    transform: scale(0.67);
  }
}

.brandTextStack {
  position: relative;
  min-width: 0;
  max-width: min(52vw, 220px);
  display: grid;
  align-items: center;
  min-height: 46px;
  max-height: 48px;
}

.brandTitleLetter {
  display: inline-block;
}

.brandPulse {
  animation: brandPulse 260ms ease-out;
}

.extremeStamp {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%) rotate(-14deg);
  color: var(--gold);
  font-size: clamp(1.05rem, 5.4vw, 1.6rem);
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 #fffaf0,
    0 0 12px rgba(241, 177, 35, 0.4);
  pointer-events: none;
}

.photoMode h1 {
  max-width: 13ch;
  font-size: clamp(1.55rem, 7.4vw, 1.82rem);
  line-height: 0.78;
}

.extremeMode .primaryButton {
  box-shadow: 0 14px 28px rgba(241, 177, 35, 0.38);
}

.extremeBurst {
  position: absolute;
  z-index: 8;
  left: 58px;
  top: 48px;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.extremeBurst span {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
  animation: extremeParticle 760ms ease-out forwards;
  transform: rotate(var(--angle)) translateX(0);
}

.headerActions {
  position: relative;
  display: grid;
  grid-template-columns: 36px 36px 36px;
  justify-items: center;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 126px;
  min-height: 44px;
  max-height: 44px;
}

@keyframes brandPulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes extremeParticle {
  0% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(0.5);
  }
}

@keyframes puzzleCounterPulse {
  0% {
    transform: scale(1);
  }
  48% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes puzzleShake {
  0% {
    translate: calc(var(--shake-x, 1px) * -1) var(--shake-y, 1px);
    rotate: calc(var(--shake-rotate, 0.45deg) * -1);
  }
  50% {
    translate: var(--shake-x, 1px) calc(var(--shake-y, 1px) * -1);
    rotate: var(--shake-rotate, 0.45deg);
  }
  100% {
    translate: 0 0;
    rotate: calc(var(--shake-rotate, 0.45deg) * 0.5);
  }
}

@keyframes puzzlePulse {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.06;
  }
  100% {
    scale: 1;
  }
}

@keyframes finalPuzzleTile {
  0% {
    opacity: 0;
    scale: 0.92;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes puzzleParticle {
  0% {
    opacity: 1;
    transform: rotate(var(--angle)) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(0.35);
  }
}

.settingsToggle,
.optionsToggle,
.shopToggle {
  transform: translateY(2px);
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.shopToggle img,
.optionsIcon,
.settingsIcon {
  width: 31px;
  height: 31px;
  display: block;
}

.optionsIcon,
.settingsIcon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  transform: scale(1.08);
}

.shopToggle img {
  grid-area: 1 / 1;
  z-index: 0;
  object-fit: contain;
  opacity: 0;
  transition: filter 160ms ease;
}

.shopToggle::before {
  content: "";
  grid-area: 1 / 1;
  z-index: 0;
  width: 31px;
  height: 31px;
  background: #000000;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  pointer-events: none;
}

.darkMode .shopToggle::before {
  background: #ffffff;
}

.shopTokenFill {
  grid-area: 1 / 1;
  justify-self: center;
  z-index: 1;
  position: relative;
  width: 25px;
  height: 25px;
  overflow: hidden;
  background: #fffaf0;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  pointer-events: none;
}

.darkMode .shopTokenFill {
  background: #15120e;
}

.shopTokenFill::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100% * var(--credit-fill, 0));
  background: var(--gold);
  transition: height 220ms ease-in-out;
}

.shopIconLight {
  display: block;
  filter: brightness(0) saturate(100%);
}

.shopIconDark {
  display: none;
  filter: none;
}

.darkMode .shopIconLight {
  display: none;
}

.darkMode .shopIconDark {
  display: block;
}

.shopToggle[aria-expanded="true"] .shopIconLight {
  filter: brightness(0) saturate(100%);
}

.settingsToggle:focus,
.optionsToggle:focus,
.shopToggle:focus,
.optionsToggle:focus-visible,
.settingsToggle:focus-visible {
  outline: none;
}

.settingsToggle[aria-expanded="true"],
.optionsToggle[aria-expanded="true"],
.shopToggle[aria-expanded="true"] {
  color: var(--mint);
}

.creditsPill {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
  z-index: 3;
  transform: translateY(0.5px);
  color: #000000;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  min-width: 0;
  max-width: 22px;
  text-align: center;
  pointer-events: none;
}

.zeroCredits {
  color: #000000 !important;
}

.darkMode .creditsPill,
.darkMode .zeroCredits {
  color: #ffffff !important;
}

.settingsDevFontControls {
  display: grid;
  gap: 10px;
}

.settingsMenu,
.optionsMenu,
.shopMenu {
  position: absolute;
  z-index: 40;
  top: 56px;
  right: 0;
  width: min(285px, calc(100vw - 42px));
  max-height: min(70svh, 430px);
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.98);
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.2);
  overflow: auto;
}

.darkMode .settingsMenu,
.darkMode .optionsMenu,
.darkMode .shopMenu {
  border-color: rgba(255, 246, 223, 0.16);
  background: rgba(19, 16, 12, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52);
}

.menuTitle {
  font-size: 1rem;
  font-weight: 950;
  text-align: center;
}

.settingsSubhead {
  margin-top: 4px;
  color: #7a4d05;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.settingToggle em,
.settingSwitch em {
  color: #7a4d05;
  font-style: normal;
}

.darkMode .settingsSubhead,
.darkMode .settingToggle em,
.darkMode .settingSwitch em {
  color: #f0c968;
}

.devSettings {
  display: grid;
  gap: 10px;
}

.uidBlock {
  display: grid;
  gap: 7px;
}

.uidBlock code {
  color: rgba(17, 17, 17, 0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.darkMode .uidBlock code {
  color: rgba(255, 246, 223, 0.68);
}

.uidBlock button {
  justify-self: start;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: #111;
  font-size: 0.76rem;
  font-weight: 950;
  padding: 7px 10px;
  cursor: pointer;
}

.giftBlock {
  display: grid;
  gap: 8px;
}

.giftRedeemForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 8px;
}

.giftRedeemForm label {
  display: grid;
  min-width: 0;
  width: 100%;
}

.giftRedeemForm input {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--ink);
  background: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 850;
}

.darkMode .giftRedeemForm input,
.darkMode .shopEmailForm input,
.darkMode .settingField select,
.darkMode .emailLinkPanel input,
.darkMode .shareCaptionField textarea {
  border-color: rgba(255, 246, 223, 0.16);
  color: var(--ink);
  background: rgba(255, 246, 223, 0.08);
}

.giftRedeemActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.giftRedeemForm button {
  min-height: 0;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: #111;
  font-size: 0.76rem;
  font-weight: 950;
  padding: 7px 10px;
  cursor: pointer;
}

.giftRedeemForm button:disabled {
  cursor: default;
  opacity: 0.5;
}

.giftStatus {
  min-height: 0;
  margin: 0;
  color: var(--mint) !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  line-height: 1;
}

.giftStatus.error {
  color: #d82020 !important;
}

.socialsBlock {
  display: grid;
  gap: 5px;
  margin-top: -4px;
}

.socialTile {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fffaf0;
  background: #5865f2;
  font-size: 0.72rem;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(88, 101, 242, 0.22);
}

.socialTile img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

.socialTile:focus-visible,
.socialTile:hover {
  outline: 2px solid rgba(88, 101, 242, 0.44);
  outline-offset: 2px;
}

.creditHero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.darkMode .creditHero {
  background: rgba(255, 246, 223, 0.08);
}

.creditHero strong {
  color: var(--gold);
  font-size: 3rem;
  line-height: 1;
}

.creditHero img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
}

.shopAuth,
.shopAccount,
.settingsAccount {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.darkMode .shopAuth,
.darkMode .shopAccount,
.darkMode .settingsAccount {
  border-color: rgba(255, 246, 223, 0.14);
  background: rgba(255, 246, 223, 0.07);
}

.shopAuth strong,
.shopAccount span,
.settingsAccount span,
.settingsAccount strong {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1.2;
}

.settingsAccount span {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.72rem;
}

.darkMode .settingsAccount span,
.darkMode .shopAuth p,
.darkMode .shopAuthMessage,
.darkMode .shopAuthDivider,
.darkMode .shopCost,
.darkMode .shopNote,
.darkMode .shopPackSub {
  color: rgba(255, 246, 223, 0.66);
}

.settingsAccount strong {
  overflow-wrap: anywhere;
}

.shopAuth p,
.shopAuthMessage {
  margin: 0;
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.shopAuthButtons,
.shopEmailForm,
.shopAccount {
  align-items: center;
}

.shopEmailForm {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 7px;
}

.shopAuthButtons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
}

.shopAccount {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.settingsAccount {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.shopAuth .officialSignInButton,
.shopAccount button,
.settingsAccount button {
  min-height: 34px;
  cursor: pointer;
}

.shopAuth .officialSignInButton {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 10px;
  padding: 0 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
}

.shopAuthDivider {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.googleSignInButton {
  border: 1px solid #dadce0;
  color: #3c4043;
  background: #ffffff;
}

.appleSignInButton {
  border: 1px solid #000000;
  color: #ffffff;
  background: #000000;
}

.googleMark,
.appleMark {
  width: 18px;
  height: 18px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.googleMark {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234285F4' d='M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.88 2.69-6.62Z'/%3E%3Cpath fill='%2334A853' d='M9 18c2.43 0 4.47-.8 5.96-2.18l-2.91-2.26c-.8.54-1.83.86-3.05.86-2.35 0-4.34-1.59-5.05-3.72H.94v2.33A9 9 0 0 0 9 18Z'/%3E%3Cpath fill='%23FBBC05' d='M3.95 10.7A5.41 5.41 0 0 1 3.67 9c0-.59.1-1.16.28-1.7V4.97H.94A9 9 0 0 0 0 9c0 1.45.35 2.82.94 4.03l3.01-2.33Z'/%3E%3Cpath fill='%23EA4335' d='M9 3.58c1.32 0 2.51.45 3.44 1.35l2.58-2.58C13.46.9 11.43 0 9 0A9 9 0 0 0 .94 4.97L3.95 7.3C4.66 5.17 6.65 3.58 9 3.58Z'/%3E%3C/svg%3E");
}

.appleMark {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M14.5 9.57c-.02-2.06 1.68-3.05 1.76-3.1-.96-1.4-2.45-1.6-2.98-1.62-1.27-.13-2.48.75-3.12.75-.65 0-1.65-.73-2.71-.71-1.4.02-2.68.81-3.4 2.06-1.45 2.52-.37 6.25 1.04 8.3.69 1 1.52 2.12 2.6 2.08 1.04-.04 1.44-.67 2.7-.67 1.27 0 1.62.67 2.72.65 1.12-.02 1.83-1.02 2.52-2.02.79-1.16 1.12-2.28 1.14-2.34-.03-.01-2.19-.84-2.21-3.38h-.06ZM12.45 3.51c.57-.7.96-1.67.86-2.64-.83.03-1.83.55-2.43 1.25-.53.62-1 1.61-.87 2.56.92.07 1.87-.47 2.44-1.17Z'/%3E%3C/svg%3E");
}

.shopAuth .shopEmailForm button,
.shopAccount button,
.settingsAccount button {
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  color: #111111;
  background: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  cursor: pointer;
}

.shopAuth button:disabled,
.shopAccount button:disabled,
.settingsAccount button:disabled {
  cursor: default;
  opacity: 0.55;
}

.shopEmailForm input {
  min-width: 0;
  height: 34px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 9px;
  color: var(--ink);
  background: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
}

.shopToggle *,
.creditsPill,
.creditsPill *,
.shopMenu .menuTitle,
.creditHero,
.creditHero *,
.shopAuth strong,
.shopAuth p,
.shopAuthDivider,
.shopAuth .officialSignInButton *,
.shopAuth .shopEmailForm button *,
.shopAccount button *,
.settingsAccount button *,
.shopPacks button *,
.shopCost,
.shopCost *,
.shopNote {
  cursor: pointer;
}

.shopEmailForm input {
  cursor: text;
}

.shopCost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  color: rgba(17, 17, 17, 0.62);
  font-size: 0.8rem;
  font-weight: 900;
}

.shopCost img {
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.shopPacks {
  display: grid;
  gap: 8px;
}

.shopPackButton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
  cursor: pointer;
  padding: 9px 10px;
  text-align: left;
}

.darkMode .shopPackButton {
  border-color: rgba(255, 246, 223, 0.14);
  background: rgba(255, 246, 223, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.shopPackButton:disabled {
  cursor: wait;
  opacity: 0.62;
}

.shopPackMain {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 950;
}

.shopPackMain img {
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.shopPackSub {
  margin-top: 2px;
  color: rgba(17, 17, 17, 0.56);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
}

.shopPackPrice {
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 950;
  white-space: nowrap;
}

.shopNote {
  color: rgba(17, 17, 17, 0.62);
  font-weight: 800;
}

.shopNote {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
}

.settingField,
.settingToggle,
.settingSwitch {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.settingField {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.settingField > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingField select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #ffffff;
  font-weight: 800;
}

.settingField button {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: var(--gold);
  font-weight: 950;
  cursor: pointer;
}

.titleSpacingControl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.titleSpacingControl input {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}

.titleSpacingControl strong {
  min-width: 0;
  color: rgba(17, 17, 17, 0.66);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.darkMode .titleSpacingControl strong {
  color: rgba(255, 246, 223, 0.68);
}

.settingToggle {
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 38px;
  padding: 0 4px;
}

.settingToggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--mint);
}

.settingToggle.disabled,
.settingSwitch.disabled {
  color: rgba(17, 17, 17, 0.42);
  cursor: default;
}

.darkMode .settingToggle.disabled,
.darkMode .settingSwitch.disabled {
  color: rgba(255, 246, 223, 0.38);
}

.premiumHint {
  margin: -6px 0 4px 80px;
  color: rgba(17, 17, 17, 0.52);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.darkMode .premiumHint {
  color: rgba(255, 246, 223, 0.5);
}

.settingSwitch {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  cursor: pointer;
}

.settingSwitch > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settingSwitch input {
  position: relative;
  width: 42px;
  height: 24px;
  margin: 0;
  appearance: none;
  justify-self: start;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.18);
  cursor: pointer;
  transition: background 120ms ease-in-out, border-color 120ms ease-in-out;
}

.darkMode .settingSwitch input {
  border-color: rgba(255, 246, 223, 0.22);
  background: rgba(255, 246, 223, 0.16);
}

.settingSwitch input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.18);
  transition: transform 120ms ease-in-out;
}

.darkMode .settingSwitch input::before {
  background: #fff6df;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34);
}

.settingSwitch input:checked {
  border-color: rgba(5, 191, 141, 0.36);
  background: var(--mint);
}

.settingSwitch input:checked::before {
  transform: translateX(18px);
}

.settingSwitch input:focus-visible {
  outline: 2px solid rgba(5, 191, 141, 0.4);
  outline-offset: 2px;
}

.aboutBlock {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.aboutBlock p {
  margin: 0;
  color: rgba(17, 17, 17, 0.82);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.42;
}

.darkMode .aboutBlock p {
  color: rgba(255, 246, 223, 0.78);
}

.aboutBlock p:empty {
  display: none;
}

.aboutBlock a {
  color: var(--mint);
  font-weight: 950;
}

.settingsLegalLink {
  justify-self: start;
  margin-top: 2px;
  color: rgba(17, 17, 17, 0.68);
  font-size: 0.75rem;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.darkMode .settingsLegalLink {
  color: rgba(255, 246, 223, 0.68);
}

.settingsLegalLink:hover {
  color: var(--gold);
}

.previewFrame {
  position: relative;
  min-height: 0;
  overflow: hidden;
  --reveal-photo-width: 100%;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: #181818;
}

.clickablePreview {
  cursor: zoom-in;
}

.previewFrame:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #000000;
  cursor: zoom-out;
}

.previewFrame:fullscreen .previewMedia {
  object-fit: contain;
}

.expandedPreview {
  position: fixed;
  z-index: 30;
  inset: 0;
  width: 100vw;
  height: 100svh;
  border: 0;
  border-radius: 0;
  background: #000000;
  cursor: zoom-out;
}

.expandedPreview .previewMedia {
  object-fit: contain;
}

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

.mirrorCamera #cameraPreview {
  transform: scaleX(-1);
}

#cameraPreview {
  pointer-events: none;
}

.previewOriginal {
  position: absolute;
  inset: 0;
}

.revealMode .previewMedia {
  position: absolute;
  inset: 0;
  object-fit: contain;
}

.revealMode #originalPreview {
  z-index: 1;
}

.revealMode #imagePreview {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--reveal-progress, 100%)) 0 0);
}

.cameraOverlay,
.workingOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fffaf0;
  text-align: center;
}

.cameraOverlay {
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.52));
  font-weight: 900;
  text-transform: uppercase;
}

.cameraOverlay.tiktokPhotoPrompt {
  isolation: isolate;
  text-transform: none;
}

.tiktokPhotoPrompt .tiktokPhotoPromptCopy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 9px;
  width: min(84%, 340px);
}

.tiktokPhotoPrompt .tiktokPhotoPromptEyebrow {
  color: #fffaf0;
  font-size: clamp(0.86rem, 3.5vw, 1.08rem);
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.tiktokPhotoPrompt .tiktokPhotoPromptHeadline {
  display: grid;
  justify-items: center;
  gap: 0;
  font-size: clamp(1rem, 4.6vw, 1.45rem);
  line-height: 1.04;
}

.tiktokPhotoPrompt .tiktokPhotoPromptHeadline > span {
  display: block;
}

.tiktokPhotoPrompt .tiktokPhotoPromptStepNumber {
  display: inline;
  color: #fffaf0;
}

.tiktokPhotoPrompt .tiktokPhotoPromptVerb {
  display: inline;
  color: var(--gold);
}

.tiktokPhotoPrompt .tiktokPhotoPromptVariant {
  display: block;
  max-width: 22ch;
  color: var(--gold);
  font-size: clamp(0.82rem, 3.4vw, 1.02rem);
  line-height: 1.12;
  text-transform: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.tiktokPhotoPrompt .tiktokPhotoPromptVariant span {
  display: block;
}

.tiktokPhotoPromptTwoStep .tiktokPhotoPromptHeadline {
  margin-block: 14px 16px;
}

.cameraOverlay.tiktokDemoWipePrompt {
  overflow: hidden;
  padding: 0;
  background: #050505;
}

.tiktokDemoWipeStage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050505;
}

.tiktokDemoWipeImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  pointer-events: none;
  user-select: none;
}

.tiktokDemoWipeResult {
  z-index: 1;
}

.tiktokDemoWipeOriginal {
  z-index: 2;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.tiktokDemoWipeLine {
  position: absolute;
  top: -2%;
  left: 100%;
  z-index: 3;
  width: 8px;
  height: 104%;
  border-radius: 999px;
  background: var(--gold);
  box-shadow:
    0 0 0 1px rgba(255, 250, 240, 0.24),
    0 0 18px rgba(255, 203, 5, 0.92),
    0 0 42px rgba(255, 203, 5, 0.42);
  opacity: 0;
  transform: translateX(-50%);
  will-change: left, opacity;
  pointer-events: none;
}

.tiktokPhotoPromptArrows {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#tiktokPhotoPromptGoldArrow path {
  fill: var(--gold);
}

#tiktokPhotoPromptWhiteArrow path {
  fill: var(--gold);
}

.tiktokPhotoPromptArrow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5.5px;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.45));
}

.tiktokPhotoPromptArrowAdd {
  color: var(--gold);
  stroke: currentColor;
  marker-end: url("#tiktokPhotoPromptGoldArrow");
}

.tiktokPhotoPromptArrowPhoto {
  color: var(--gold);
  stroke: currentColor;
  marker-end: url("#tiktokPhotoPromptWhiteArrow");
}

.cameraSwitch {
  position: absolute;
  z-index: 3;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 250, 240, 0.52);
  border-radius: 999px;
  color: #111111;
  background: rgba(255, 250, 240, 0.88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.cameraGallery {
  left: 12px;
  right: auto;
}

.cameraSwitch svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.cameraGallery svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cameraSwitch:disabled {
  opacity: 0.45;
}

.tiktokPhotoPromptMode .cameraGallery:not(:disabled),
.tiktokPhotoPromptMode .mainActionRow.noPhoto .photoActionButton:not(:disabled) {
  animation: tiktokPhotoPromptPulse 1467ms ease-in-out infinite;
}

.tiktokPhotoPromptMode .cameraGallery:not(:disabled) {
  box-shadow:
    0 0 0 3px var(--gold),
    0 10px 26px rgba(0, 0, 0, 0.22),
    0 0 28px var(--gold);
}

.tiktokPhotoPromptMode .mainActionRow.noPhoto .photoActionButton:not(:disabled) {
  animation-delay: 440ms;
}

.tiktokPhotoPromptMode .mainActionRow.noPhoto .photoActionButton:not(:disabled) .actionButtonFace {
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 240, 0.38),
    0 0 30px rgba(255, 203, 5, 0.46);
}

@keyframes tiktokPhotoPromptPulse {
  0%,
  54%,
  100% {
    transform: translateY(0) scale(1);
  }

  18% {
    transform: translateY(-2px) scale(1.035);
  }
}

.favouriteHeart {
  position: absolute;
  z-index: 4;
  right: 12px;
  top: 12px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 250, 240, 0.7);
  border-radius: 999px;
  color: #fffaf0;
  background: rgba(17, 17, 17, 0.34);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.favouriteHeart svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  transform: translateY(1px);
}

.favouriteHeart.active {
  color: var(--gold);
}

.favouriteHeart.active svg {
  fill: currentColor;
}

.darkSigilLines {
  position: absolute;
  z-index: 13;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 480ms ease;
}

.darkSigilLines.hidden {
  display: none;
}

.darkSigilLines.fading {
  opacity: 0;
}

.darkSigilLines.gold {
  opacity: 1;
}

.darkSigilSegment {
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.32));
  transition: stroke 620ms ease;
}

.darkSigilLines.gold .darkSigilSegment {
  stroke: var(--gold);
  animation: darkSigilGoldShift 640ms ease-in-out both;
}

.darkSigilHex {
  --dark-hex-size: clamp(34px, 9vw, 43px);
  position: absolute;
  z-index: 14;
  width: var(--dark-hex-size);
  height: var(--dark-hex-size);
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
}

.darkSigilHex.hidden {
  display: none;
}

.darkSigilHex.sigilActive .darkHexGlyph {
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.62));
}

.darkHexController {
  --dark-hex-size: clamp(34px, 9vw, 43px);
  --dark-hex-gap: 6px;
  position: absolute;
  z-index: 14;
  top: clamp(10px, 2.4vw, 14px);
  right: clamp(10px, 2.4vw, 14px);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--dark-hex-gap);
  width: var(--dark-hex-size);
  height: var(--dark-hex-size);
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
  transition:
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease;
}

.darkHexController.hidden {
  display: none;
}

.darkHexController.opening,
.darkHexController.expanded {
  width: calc((var(--dark-hex-size) * 4) + (var(--dark-hex-gap) * 3));
}

.darkHexController.merging {
  width: calc((var(--dark-hex-size) * 4) + (var(--dark-hex-gap) * 3));
}

.darkHexController.unlocked {
  justify-content: flex-start;
  gap: 0;
  width: var(--dark-hex-size);
  height: var(--dark-hex-size);
  cursor: grab;
  transition: opacity 260ms ease, transform 120ms ease;
}

.darkHexController.unlocked.placed,
.darkHexController.dragging {
  position: fixed;
  right: auto;
  top: auto;
}

.darkHexController.dragging {
  cursor: grabbing;
  transition: none;
}

.darkHexController.sigilActive .darkHexGlyph {
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.62));
}

.darkHexController.fading {
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

.darkHexCell {
  position: relative;
  flex: 0 0 var(--dark-hex-size);
  width: var(--dark-hex-size);
  height: var(--dark-hex-size);
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  transform: translateX(0) scale(0.78);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: none;
}

.darkHexCell:nth-child(1) {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.darkHexCell:nth-child(2) {
  transform: translateX(calc((var(--dark-hex-size) + var(--dark-hex-gap)) * -1)) scale(1);
}

.darkHexCell:nth-child(3) {
  transform: translateX(calc((var(--dark-hex-size) + var(--dark-hex-gap)) * -2)) scale(1);
}

.darkHexCell:nth-child(4) {
  transform: translateX(calc((var(--dark-hex-size) + var(--dark-hex-gap)) * -3)) scale(1);
}

.darkHexController.opening .darkHexCell {
  opacity: 1;
}

.darkHexController.expanded .darkHexCell,
.darkHexController.merging .darkHexCell,
.darkHexController.unlocked .darkHexCell:nth-child(1) {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.darkHexController.merging .darkHexCell:nth-child(2) {
  transform: translateX(calc((var(--dark-hex-size) + var(--dark-hex-gap)) * -1)) scale(1);
}

.darkHexController.merging .darkHexCell:nth-child(3) {
  transform: translateX(calc((var(--dark-hex-size) + var(--dark-hex-gap)) * -2)) scale(1);
}

.darkHexController.merging .darkHexCell:nth-child(4) {
  transform: translateX(calc((var(--dark-hex-size) + var(--dark-hex-gap)) * -3)) scale(1);
}

.darkHexController.unlocked .darkHexCell:not(:nth-child(1)) {
  opacity: 0;
  pointer-events: none;
}

.darkHexGlyph {
  position: absolute;
  inset: 0;
  display: block;
  background: url("/icons/hexagonwhite.png?v=20260605-dark-mode-shop") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));
}

.darkHexGlyph::after {
  content: "";
  position: absolute;
  inset: 7%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  transition: opacity 420ms ease;
}

.darkHexController.filled .darkHexGlyph::after {
  opacity: 1;
}

.darkHexInput {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  opacity: 0;
  outline: none;
  text-align: center;
  text-transform: uppercase;
  font: 1000 1rem/1 var(--ui-font);
  letter-spacing: 0;
  caret-color: #ffffff;
  transform: translateY(1px);
  pointer-events: none;
  transition: opacity 260ms ease, color 180ms ease;
}

.darkHexController.expanded .darkHexInput {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 360ms;
}

.darkHexController.merging .darkHexInput {
  opacity: 1;
  pointer-events: none;
  transition-delay: 0ms;
}

.darkHexCell.solved .darkHexInput,
.darkHexController.filled .darkHexInput {
  color: #000000;
}

.darkHexController.lettersHidden .darkHexInput {
  opacity: 0;
  transition-delay: 0ms;
}

.darkHexController.pulsing .darkHexCell {
  animation: darkHexLetterPulse 420ms ease;
}

.darkHexController.pulsing .darkHexCell:nth-child(1) { animation-delay: 0ms; }
.darkHexController.pulsing .darkHexCell:nth-child(2) { animation-delay: 180ms; }
.darkHexController.pulsing .darkHexCell:nth-child(3) { animation-delay: 360ms; }
.darkHexController.pulsing .darkHexCell:nth-child(4) { animation-delay: 540ms; }

.workingOverlay {
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(17, 17, 17, 0.72);
}

.workingOverlay p,
.workingOverlay strong {
  margin: 0;
}

.workingOverlay p {
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.workingOverlay strong {
  font-family: var(--rounded-font-extra-bold);
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-size: 1.35rem;
  font-weight: var(--display-font-weight);
  line-height: 1.05;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.pulseMark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 24px;
}

.pulseMark span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
  animation: honeyPulse 1s ease-in-out infinite;
}

.pulseMark span:nth-child(2) {
  animation-delay: 140ms;
}

.pulseMark span:nth-child(3) {
  animation-delay: 280ms;
}

.progressRail {
  position: relative;
  width: min(220px, 76%);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.28);
}

.progressRail span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: var(--gold);
  animation: honeyRail 1.45s ease-in-out infinite;
}

.revealControl {
  position: absolute;
  z-index: 5;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(16px);
}

.expandedPreview .revealControl,
.previewFrame:fullscreen .revealControl {
  left: 50%;
  right: auto;
  width: calc(var(--reveal-photo-width, 100vw) + 24px);
  max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  transform: translateX(-50%);
}

.revealControl input {
  width: 100%;
  height: 36px;
  margin: 0;
  accent-color: var(--gold);
}

.puzzleActive .previewMedia {
  opacity: 0;
}

.puzzleOverlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(54px, 11vh) minmax(0, 1fr);
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: #000000;
  overflow: hidden;
  cursor: default;
  touch-action: none;
}

.puzzleMoveCounter {
  z-index: 5;
  align-self: end;
  color: var(--gold);
  font-size: clamp(1.15rem, 5vw, 1.9rem);
  font-weight: 1000;
  line-height: 1;
  transition: opacity 360ms ease, transform 220ms ease;
}

.puzzleMoveCounter.pulse {
  animation: puzzleCounterPulse 260ms ease-out;
}

.puzzleMoveCounter.fading,
.puzzleMoveCounter.hidden {
  opacity: 0;
}

.puzzleBoard {
  position: relative;
  z-index: 3;
  width: min(92vw, 74vh);
  max-width: 100%;
  max-height: 78vh;
  background: transparent;
  overflow: visible;
}

.puzzleMissingText {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 55%;
  width: min(92vw, 74vh);
  max-width: calc(100vw - 28px);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 0.02em;
  color: #1a1a1a;
  font-weight: 1000;
  line-height: 0.86;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.puzzleMissingText span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  transition: color 320ms ease, text-shadow 320ms ease;
}

.puzzleOverlay.showMissing .puzzleMissingText {
  opacity: 1;
}

.puzzleOverlay.chaosWords .puzzleMissingText span.lit {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(243, 195, 79, 0.45);
}

.puzzleTile {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  border: 1.5px solid var(--gold);
  border-radius: 0;
  background-repeat: no-repeat;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
  touch-action: none;
  transform-origin: center;
  transition:
    transform 280ms ease-in-out,
    opacity 260ms ease,
    scale 260ms ease,
    border-color 540ms ease;
}

.puzzleTile.finalTile {
  animation: finalPuzzleTile 700ms ease forwards;
}

.puzzleOverlay.complete .puzzleTile {
  border-color: rgba(243, 195, 79, 0);
}

.puzzleTile.shaking,
.puzzleTile.unstable {
  animation: puzzleShake var(--shake-duration, 104ms) linear infinite;
  animation-delay: var(--shake-delay, 0ms);
}

.puzzleTile.unstable {
  animation-duration: calc(var(--shake-duration, 104ms) * 2.6);
}

.puzzleTile.lifted {
  z-index: 8;
  scale: 1.04;
  transition: none;
}

.puzzleTile.pulsing {
  animation: puzzlePulse 280ms ease-out;
}

.puzzleTile.popping {
  scale: 1.08;
}

.puzzleTile.vanishing,
.puzzleTile.popping {
  opacity: 0;
  scale: 0;
}

.puzzleParticles {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: max(34px, 8vh);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.puzzleParticles span {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
  animation: puzzleParticle 760ms ease-out forwards;
  transform: rotate(var(--angle)) translateX(0);
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.errorText {
  margin: -2px 2px 0;
  color: #8d2019;
  font-size: 0.92rem;
  font-weight: 700;
}

.controls {
  display: grid;
  gap: clamp(5px, 0.95svh, 8px);
  min-height: 0;
}

.primaryButton,
.ghostButton,
.segment {
  min-height: clamp(38px, 5.2svh, 46px);
  border: 0;
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: 0;
  cursor: pointer;
}

.mainActionRow {
  display: flex;
  gap: 8px;
  min-height: clamp(43px, 5.9svh, 51px);
  padding-bottom: 5px;
  align-items: stretch;
}

.actionButton {
  position: relative;
  flex: 0 0 0;
  min-width: 0;
  max-width: 0;
  min-height: clamp(38px, 5.2svh, 46px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  scale: 0.92;
  transition:
    flex-basis 200ms ease-in-out,
    max-width 200ms ease-in-out,
    opacity 160ms ease-in-out,
    scale 160ms ease-in-out;
}

.mainActionRow.noPhoto .photoActionButton,
.mainActionRow.photoReady .photoActionButton,
.mainActionRow.photoReady .honeyfyActionButton,
.mainActionRow.resultPrep .photoActionButton,
.mainActionRow.resultPrep .honeyfyActionButton,
.mainActionRow.resultReady .photoActionButton,
.mainActionRow.resultReady .honeyfyActionButton,
.mainActionRow.resultReady .shareGlyphButton {
  opacity: 1;
  pointer-events: auto;
  scale: 1;
}

.mainActionRow.noPhoto .photoActionButton {
  flex-basis: 100%;
  max-width: 100%;
}

.mainActionRow.photoReady .photoActionButton {
  flex-basis: calc(25% - 4px);
  max-width: calc(25% - 4px);
}

.mainActionRow.photoReady .honeyfyActionButton {
  flex-basis: calc(75% - 4px);
  max-width: calc(75% - 4px);
}

.mainActionRow.resultPrep .photoActionButton,
.mainActionRow.resultReady .photoActionButton,
.mainActionRow.resultReady .shareGlyphButton {
  flex-basis: calc(22% - 5px);
  max-width: calc(22% - 5px);
}

.mainActionRow.resultPrep .honeyfyActionButton,
.mainActionRow.resultReady .honeyfyActionButton {
  flex-basis: calc(56% - 6px);
  max-width: calc(56% - 6px);
}

.actionButton.actionCollapsed {
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.actionButton.actionCollapsed:disabled {
  opacity: 0;
}

.honeyfyActionButton {
  transform-origin: left center;
}

.shareGlyphButton {
  transform-origin: left center;
}

.mainActionRow.photoReady .honeyfyActionButton {
  transition-delay: 95ms;
}

.mainActionRow.resultReady .shareGlyphButton {
  transition-delay: 95ms;
}

.mainActionRow.noPhoto .honeyfyActionButton,
.mainActionRow.photoReady .shareGlyphButton,
.mainActionRow.resultPrep .shareGlyphButton {
  transition-delay: 0ms;
}

.actionButton::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 16px;
  background: var(--ink);
  transform: translateY(5px);
  transition: transform 80ms ease-in-out;
}

.actionButtonFace {
  position: relative;
  z-index: 1;
  min-height: clamp(38px, 5.2svh, 46px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--gold);
  transition: transform 80ms ease-in-out;
}

.actionButton:active .actionButtonFace {
  transform: translateY(5px);
}

.primaryButton {
  width: auto;
  display: block;
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: clamp(0.94rem, 4.4vw, 1.12rem);
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  transition:
    flex-basis 200ms ease-in-out,
    max-width 200ms ease-in-out,
    opacity 160ms ease-in-out,
    scale 160ms ease-in-out;
}

.primaryCost {
  position: absolute;
  right: 14px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transform: translateY(-50%);
  color: var(--ink);
  font-size: 0.92em;
  font-weight: 1000;
}

.primaryCost img {
  width: 1em;
  height: 1em;
  object-fit: contain;
}

.primaryButton:disabled {
  cursor: wait;
  opacity: 0.72;
}

.actionButton:disabled,
.actionButton.notActionable {
  cursor: default;
}

.actionButton:disabled .actionButtonFace,
.actionButton.notActionable .actionButtonFace {
  background: rgba(255, 250, 240, 0.76);
  color: rgba(17, 17, 17, 0.48);
}

.darkMode .actionButton:disabled .actionButtonFace,
.darkMode .actionButton.notActionable .actionButtonFace {
  background: rgba(255, 246, 223, 0.12);
  color: rgba(255, 246, 223, 0.42);
}

.honeyfyActionButton:disabled::before,
.honeyfyActionButton.notActionable::before {
  opacity: 0;
  transform: translateY(0);
}

.honeyfyActionButton:disabled .actionButtonFace,
.honeyfyActionButton.notActionable .actionButtonFace {
  transform: translateY(5px);
}

.takePhotoGlyph,
.photoActionButton svg,
.shareGlyphButton svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.35;
}

.takePhotoGlyph {
  margin-left: -2px;
}

.photoActionButton .actionButtonFace {
  color: var(--ink);
}

#primaryButtonLabel {
  display: inline-block;
  max-width: 14ch;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 80ms ease-out, opacity 80ms ease-out;
}

.mainActionRow.noPhoto .photoActionButton #primaryButtonLabel {
  transition-delay: 205ms;
}

.tiktokDemoWipeMode .mainActionRow.noPhoto .photoActionButton #primaryButtonLabel {
  max-width: 100%;
  font-size: clamp(0.74rem, 3.25vw, 0.92rem);
}

.tiktokDemoWipeMode .mainActionRow.noPhoto .photoActionButton .takePhotoGlyph {
  display: none;
}

.photoMode .photoActionButton .actionButtonFace {
  background: #fffaf0;
  gap: 0;
}

.darkMode .photoMode .photoActionButton .actionButtonFace {
  color: #fff6df;
  border-color: rgba(255, 246, 223, 0.82);
  background: #4c4a45;
}

.darkMode .photoMode .photoActionButton::before {
  background: var(--ink);
  opacity: 1;
  transform: translateY(5px);
}

.photoMode .photoActionButton #primaryButtonLabel {
  max-width: 0;
  opacity: 0;
  transition-delay: 0ms;
}

.photoActionButton svg {
  transform: translateX(0.5px);
}

.shareGlyphButton .actionButtonFace {
  color: #ffffff;
  background: var(--mint);
  border-color: var(--ink);
}

.honeyfyActionButton .actionButtonFace {
  padding: 0 44px 0 12px;
  box-sizing: border-box;
  font-family: var(--rounded-font-extra-bold);
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  font-weight: var(--action-font-weight);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

.honeyfyActionButton.purifyAction::before {
  background: var(--ink);
  opacity: 1;
  transform: translateY(5px);
}

.honeyfyActionButton.purifyAction .actionButtonFace {
  color: #fff6df;
  background: #7a0508;
  border-color: #fff6df;
}

.honeyfyActionButton.purifyAction #honeyfyButtonLabel {
  animation: purifyLabelIn 360ms ease both;
}

#honeyfyButtonLabel {
  min-width: 0;
  overflow: visible;
  padding-right: 1ch;
  white-space: nowrap;
}

.mainActionRow.resultReady #honeyfyButtonLabel {
  font-size: clamp(0.76rem, 3.45vw, 0.94rem);
}

.shareGlyphButton svg {
  width: 24px;
  height: 24px;
  transform: translateY(-2px);
}

.fileInput {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.controlRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-top: 7px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  background: rgba(17, 17, 17, 0.08);
}

.darkMode .controlRow {
  border-color: rgba(255, 246, 223, 0.12);
  background: rgba(255, 246, 223, 0.08);
}

.segment {
  color: var(--ink);
  min-height: 30px;
  padding: 0 8px;
  border-radius: 11px;
  background: transparent;
  border: 0;
  font-size: clamp(0.76rem, 3.2vw, 0.9rem);
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.segment.active {
  color: var(--ink);
  background: rgba(255, 250, 240, 0.96);
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.darkMode .segment.active {
  background: rgba(255, 246, 223, 0.16);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 246, 223, 0.12);
}

.sliderWrap {
  display: grid;
  gap: clamp(3px, 0.5svh, 5px);
  padding: clamp(6px, 1svh, 8px) 10px clamp(7px, 1.1svh, 9px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  font-weight: 850;
}

.darkMode .sliderWrap,
.darkMode .honeyCounter {
  background: rgba(255, 246, 223, 0.08);
}

.sliderWrap input {
  width: 100%;
  height: 38px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  --slider-progress: 0%;
}

.sliderWrap input:focus,
.sliderWrap input:focus-visible {
  outline: none;
}

.sliderWrap input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--gold) 0 var(--slider-progress),
      rgba(17, 17, 17, 0.14) var(--slider-progress) 100%
    );
}

.darkMode .sliderWrap input::-webkit-slider-runnable-track {
  background:
    linear-gradient(
      90deg,
      var(--gold) 0 var(--slider-progress),
      rgba(255, 246, 223, 0.18) var(--slider-progress) 100%
    );
}

.sliderWrap input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.14);
}

.darkMode .sliderWrap input::-moz-range-track {
  background: rgba(255, 246, 223, 0.18);
}

.sliderWrap input::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
}

.sliderWrap input::-webkit-slider-thumb {
  width: 32px;
  height: 32px;
  margin-top: -12px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 20.6S4 15.8 2.2 10.8C.9 7.1 3.6 4 7 4c2 0 3.6 1 5 2.9C13.4 5 15 4 17 4c3.4 0 6.1 3.1 4.8 6.8C20 15.8 12 20.6 12 20.6Z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-shadow:
    0 3px 7px rgba(17, 17, 17, 0.16),
    inset 0 0 0 1px rgba(17, 17, 17, 0.14);
}

.purifyMode .sliderWrap input::-webkit-slider-thumb {
  background-color: #9f111b;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7 0V7a2 2 0 0 1 4 0v2h-4Z'/%3E%3C/svg%3E");
  box-shadow:
    0 3px 8px rgba(120, 0, 12, 0.28),
    inset 0 0 0 1px rgba(40, 0, 5, 0.24);
}

.sliderWrap input::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 20.6S4 15.8 2.2 10.8C.9 7.1 3.6 4 7 4c2 0 3.6 1 5 2.9C13.4 5 15 4 17 4c3.4 0 6.1 3.1 4.8 6.8C20 15.8 12 20.6 12 20.6Z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-shadow:
    0 3px 7px rgba(17, 17, 17, 0.16),
    inset 0 0 0 1px rgba(17, 17, 17, 0.14);
}

.purifyMode .sliderWrap input::-moz-range-thumb {
  background-color: #9f111b;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Zm-7 0V7a2 2 0 0 1 4 0v2h-4Z'/%3E%3C/svg%3E");
  box-shadow:
    0 3px 8px rgba(120, 0, 12, 0.28),
    inset 0 0 0 1px rgba(40, 0, 5, 0.24);
}

.sliderScale {
  display: grid;
  grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
  align-items: center;
  gap: 12px;
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.1;
}

.darkMode .sliderScale,
.darkMode .honeyCounterLabel,
.darkMode #honeyCounterLabel {
  color: rgba(255, 246, 223, 0.66);
}

#countLabel {
  color: var(--ink);
  text-align: center;
}

#sliderMaxMarker {
  justify-self: end;
  text-align: right;
}

#sliderMinMarker {
  justify-self: start;
}

.infinityMark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 16px;
  font-size: 1.05rem;
  line-height: 1;
}

.honeyCounter {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.darkMode .archiveThumb {
  background: rgba(255, 246, 223, 0.1);
}

.honeyCounterLabel,
#honeyCounterLabel {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.honeyCounter strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

.honeyCounterGoalPulse {
  animation: honeyCounterGoalPulse 760ms ease-out 2;
}

.honeyCounterRail {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: var(--honey-rail);
}

.honeyCounterFill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 900ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

.honeyCounterGainPreview {
  position: absolute;
  top: 0;
  left: 0%;
  z-index: 1;
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: rgba(247, 201, 72, 0.5);
  opacity: 0;
  pointer-events: none;
}

.honeyCounterGainPreview.active {
  opacity: 1;
}

.honeyCounterGainPreview.fading {
  opacity: 0;
  transition: opacity 500ms ease;
}

.honeyCounterNotch {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 3px;
  height: 13px;
  border-radius: 999px;
  background: var(--honey-rail);
  box-shadow: 0 0 0 1px var(--honey-rail);
  transform: translate(-50%, -50%);
}

.honeyCounterNotch.reached {
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.honeyCounterRail.noTransition .honeyCounterFill {
  transition: none;
}

.honeyCounterParticles {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.honeyCounterParticles span {
  position: absolute;
  width: var(--particle-size, 5px);
  height: var(--particle-size, 5px);
  margin-left: calc(var(--particle-size, 5px) / -2);
  margin-top: calc(var(--particle-size, 5px) / -2);
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08);
  animation: honeyCounterParticle 820ms ease-out forwards;
}

.secondaryActions {
  min-height: clamp(38px, 5.1svh, 44px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.archiveCarousel {
  min-height: 54px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

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

.archiveThumb {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  background: #fffaf0;
}

.archivePlaceholder {
  display: grid;
  place-items: center;
  border-color: rgba(17, 17, 17, 0.08);
  background: #ece8df;
  color: rgba(17, 17, 17, 0.34);
  pointer-events: none;
}

.darkMode .archivePlaceholder {
  border-color: rgba(255, 246, 223, 0.1);
  background: rgba(255, 246, 223, 0.12);
  color: rgba(255, 246, 223, 0.42);
}

.archivePlaceholder svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.archiveThumb.selected {
  border: 2px solid var(--gold);
}

.archiveThumb.deleteReady {
  border: 2px solid #cf3a2f;
}

.archiveThumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ghostButton {
  min-height: clamp(38px, 5.2svh, 46px);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  font-size: 0.82rem;
}

.ghostButton.actionButton {
  background: transparent;
  border: 0;
}

.ghostButton.deleteConfirm {
  color: #8d2019;
  border-color: #cf3a2f;
  box-shadow: inset 0 0 0 2px #cf3a2f;
}

.ghostButton.accent {
  color: #ffffff;
  background: var(--mint);
  border-color: var(--mint);
}

.ghostButton.accent.actionButton {
  background: transparent;
  border-color: transparent;
}

.hidden,
.hiddenCanvas {
  display: none;
}

@keyframes honeyPulse {
  0%,
  80%,
  100% {
    opacity: 0.38;
    transform: translateY(0) scale(0.86);
  }

  40% {
    opacity: 1;
    transform: translateY(-5px) scale(1);
  }
}

@keyframes honeyRail {
  0% {
    transform: translateX(-105%);
  }

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

  100% {
    transform: translateX(250%);
  }
}

@keyframes honeyCounterParticle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.45);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

@keyframes honeyCounterGoalPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(243, 195, 79, 0));
  }

  45% {
    transform: scale(1.36);
    filter: drop-shadow(0 0 10px rgba(243, 195, 79, 0.8));
  }
}

@keyframes darkHexLetterPulse {
  0% {
    transform: translateX(0) scale(1);
  }

  45% {
    transform: translateX(0) scale(1.18);
  }

  100% {
    transform: translateX(0) scale(1);
  }
}

@keyframes darkSigilGoldShift {
  0% {
    stroke: rgba(255, 255, 255, 0.94);
  }

  26% {
    stroke: #fff4c7;
  }

  54% {
    stroke: #ffe38f;
  }

  78% {
    stroke: #f6ce62;
  }

  100% {
    stroke: var(--gold);
  }
}

@keyframes purifyLabelIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 360px) {
  .appShell {
    padding-left: 5px;
    padding-right: 5px;
  }

  .phoneStage {
    padding: 8px;
    border-radius: 18px;
    gap: 5px;
  }

  .brandBar {
    min-height: 42px;
    max-height: 44px;
  }

  .brandLogo {
    width: 45px;
    height: 60px;
    max-width: 45px;
    max-height: 60px;
  }

  .brandTitleWrap,
  .brandTextStack {
    min-height: 42px;
    max-height: 44px;
  }

  h1 {
    font-size: clamp(1.45rem, 8vw, 2rem);
  }

  .settingsToggle,
  .optionsToggle,
  .shopToggle {
    width: 32px;
    min-width: 32px;
    min-height: 28px;
  }

  .shopToggle img,
  .shopToggle::before,
  .optionsIcon,
  .settingsIcon {
    width: 25px;
    height: 25px;
  }

  .shopTokenFill {
    width: 20px;
    height: 20px;
  }

  .headerActions {
    grid-template-columns: 32px 32px 32px;
    min-height: 40px;
    max-height: 40px;
    min-width: 112px;
    gap: 6px;
  }

  .primaryButton,
  .ghostButton,
  .segment {
    border-radius: 13px;
    font-size: 0.9rem;
  }
}

@media (min-width: 720px) and (min-height: 820px) {
  .phoneStage {
    height: 780px;
  }
}

@media (max-height: 720px) {
  h1 {
    max-width: 16ch;
    font-size: clamp(1.35rem, 6.2svh, 2.05rem);
    line-height: 0.94;
  }

  .phoneStage {
    border-radius: 22px;
  }

  .previewFrame {
    border-radius: 18px;
  }
}

@media (max-height: 620px) {
  .brandBar {
    align-items: center;
  }

  h1 {
    font-size: clamp(1.22rem, 5.7svh, 1.75rem);
  }

  .primaryButton,
  .ghostButton,
  .segment {
    font-size: 0.9rem;
  }

  .sliderWrap {
    gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .launchSplash {
    display: none;
  }

  .launchIntroPending .phoneStage > :not(.launchSplash),
  .launchIntroReveal .phoneStage > :not(.launchSplash) {
    opacity: 1;
    animation: none;
  }
}