:root {
  --ink: #101827;
  --muted: #647184;
  --paper: #fff8ea;
  --card: #ffffff;
  --blue: #4068ff;
  --green: #11b989;
  --mint: #c9f2dc;
  --violet: #6a43d9;
  --lemon: #ffe374;
  --coral: #f64f78;
  --berry: #bd1752;
  --aqua: #1ec6d6;
  --line: rgba(16, 24, 32, 0.1);
  --shadow: 0 22px 54px rgba(27, 39, 51, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 16% 4%, rgba(47, 128, 237, 0.12), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(111, 186, 102, 0.14), transparent 30%),
    linear-gradient(180deg, #f6f8fb 0%, #eef3f4 100%);
}

button {
  border: 0;
  font: inherit;
}

.design-board {
  width: min(1480px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 36px 0 60px;
}

.brief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brief h1 {
  margin: 8px 0 10px;
  font-size: 46px;
  line-height: 1;
}

.brief p:last-child {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.asset-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow);
}

.asset-strip img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(16, 24, 32, 0.12));
}

.screen-grid {
  display: grid;
  grid-template-columns: repeat(3, 390px);
  gap: 26px;
  justify-content: center;
  align-items: start;
}

body.video-landscape-active .brief,
body.video-landscape-active .asset-strip,
body.video-landscape-active .screen-grid > .phone:not(.video-screen) {
  display: none;
}

body.video-landscape-active .design-board {
  width: min(920px, calc(100vw - 32px));
  padding-top: 28px;
}

body.video-landscape-active .screen-grid {
  grid-template-columns: min(844px, calc(100vw - 32px));
}

.phone {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border: 8px solid #07090d;
  border-radius: 42px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.phone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 112px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 0 0 18px 18px;
  background: #07090d;
  z-index: 4;
}

.phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 120px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(7, 9, 13, 0.26);
}

.image-screen {
  background: #231056;
}

.image-screen::before,
.image-screen::after {
  display: none;
}

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

.login-register-screen > img {
  object-fit: fill;
}

.login-hotspots {
  position: absolute;
  inset: 0;
  z-index: 8;
}

.login-hotspot {
  position: absolute;
  display: block;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  color: transparent;
  background: transparent !important;
  border: 0;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
}

.login-hotspot:focus-visible {
  outline: 3px solid rgba(255, 228, 93, 0.85);
  outline-offset: 2px;
}

.login-hotspot.back {
  left: 28px;
  top: 61px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.login-hotspot.wechat {
  left: 63px;
  top: 485px;
  width: 268px;
  height: 55px;
}

.login-hotspot.phone-login-hotspot {
  left: 63px;
  top: 567px;
  width: 268px;
  height: 55px;
}

.login-hotspot.register {
  left: 75px;
  top: 653px;
  width: 108px;
  height: 42px;
}

.login-hotspot.parent {
  left: 226px;
  top: 653px;
  width: 108px;
  height: 42px;
}

.login-hotspot.terms {
  left: 28px;
  top: 704px;
  width: 92px;
  height: 44px;
  border-radius: 18px;
}

.login-hotspot.legal-link {
  top: 704px;
  height: 40px;
  border-radius: 6px;
}

.login-hotspot.legal-terms {
  left: 122px;
  width: 92px;
}

.login-hotspot.legal-privacy {
  left: 222px;
  width: 70px;
}

.login-hotspot.legal-children {
  left: 300px;
  width: 74px;
}

.login-hotspot.terms::before {
  display: none;
}

.login-register-screen.terms-accepted .login-hotspot.terms::after {
  content: "";
  position: absolute;
  left: 8px;
  top: -2px;
  width: 12px;
  height: 7px;
  border: solid #ffe45d;
  border-width: 0 0 4px 4px;
  transform: rotate(-45deg);
  filter: drop-shadow(0 2px 2px rgba(16, 5, 45, 0.45));
}

.login-toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 40;
  min-width: 190px;
  padding: 11px 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 8, 35, 0.82);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 14px 28px rgba(6, 3, 24, 0.28);
}

.login-toast[hidden],
.login-sheet-layer[hidden] {
  display: none !important;
}

.login-sheet-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(8, 5, 32, 0.45);
  backdrop-filter: blur(8px);
}

.login-sheet {
  position: relative;
  padding: 24px 20px 20px;
  border-radius: 28px;
  color: #161333;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 42px rgba(8, 5, 32, 0.34);
}

.login-sheet-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #2b1a55;
  background: #f0ecff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.login-sheet > span {
  color: #8b53ff;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.login-sheet h2 {
  margin: 6px 0 16px;
  font-size: 26px;
  line-height: 1.1;
}

.login-sheet label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: #4f5e73;
  font-size: 13px;
  font-weight: 900;
}

.login-sheet input {
  width: 100%;
  height: 48px;
  border: 2px solid rgba(106, 67, 217, 0.15);
  border-radius: 16px;
  padding: 0 14px;
  color: #161333;
  background: #f7f8ff;
  font-size: 16px;
  font-weight: 800;
}

.login-code-row {
  display: grid;
  grid-template-columns: 1fr 106px;
  gap: 8px;
}

.login-code-row button {
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, #3edfff, #14c1db);
  font-size: 13px;
  font-weight: 1000;
}

.login-sheet p {
  margin: 12px 0 0;
  color: #6a7282;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.login-submit {
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(180deg, #ff4aa0, #f32375 78%, #d9125e);
  font-size: 18px;
  font-weight: 1000;
  box-shadow: 0 10px 18px rgba(210, 18, 94, 0.22);
}

.login-screen {
  color: white;
  background:
    radial-gradient(circle at 89% 35%, rgba(255, 73, 139, 0.24), transparent 22%),
    radial-gradient(circle at 14% 72%, rgba(121, 71, 255, 0.26), transparent 30%),
    linear-gradient(180deg, #3910a0 0%, #2a0f80 47%, #1b0a58 100%);
  overflow: hidden;
}

.login-screen::before,
.login-screen::after {
  display: none;
}

.login-screen::before {
  content: "";
  position: absolute;
  left: auto;
  top: auto;
  right: -116px;
  bottom: -96px;
  width: 265px;
  height: 238px;
  transform: none;
  display: block;
  border-radius: 62% 38% 35% 65% / 49% 46% 54% 51%;
  background: linear-gradient(145deg, #18d0cf, #3fc3ff);
  z-index: 0;
}

.login-screen > * {
  position: relative;
  z-index: 1;
}

.login-decoration {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.login-decoration::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, transparent 0 37%, rgba(255, 255, 255, 0.13) 38%, transparent 39% 100%),
    linear-gradient(110deg, transparent 0 72%, rgba(255, 255, 255, 0.13) 73%, transparent 74% 100%);
  opacity: 0.72;
}

.login-decoration::after {
  content: "";
  position: absolute;
  left: -112px;
  top: -132px;
  width: 315px;
  height: 300px;
  border-radius: 42% 58% 64% 36% / 48% 45% 55% 52%;
  background: linear-gradient(145deg, #ff2d87, #e7247d);
  box-shadow: 0 18px 44px rgba(16, 5, 45, 0.16);
}

.login-screen .login-decoration .corner-cyan {
  display: none;
}

.deco {
  position: absolute;
  display: block;
}

.star-a,
.star-b {
  color: #ffe044;
  font-size: 40px;
  text-shadow:
    0 5px 0 rgba(191, 122, 0, 0.2),
    0 10px 16px rgba(13, 5, 50, 0.26);
}

.star-a {
  left: 44px;
  top: 263px;
  transform: rotate(-12deg);
}

.star-b {
  right: 32px;
  bottom: 18px;
  transform: rotate(11deg);
}

.moon-a {
  right: 47px;
  top: 84px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffe044;
  box-shadow: -11px 2px 0 #351297, 0 7px 12px rgba(13, 5, 50, 0.25);
  transform: rotate(26deg);
}

.dot-a,
.dot-b {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.dot-a {
  left: 96px;
  top: 235px;
  background: #7258ff;
}

.dot-b {
  right: 53px;
  top: 330px;
  background: #18d0cf;
}

.shard-a,
.shard-b {
  width: 31px;
  height: 24px;
  border-radius: 9px 16px 7px 15px;
}

.shard-a {
  right: 70px;
  top: 264px;
  background: #ff3b91;
  transform: rotate(-20deg);
}

.shard-b {
  left: -9px;
  bottom: 192px;
  background: #a66cff;
  transform: rotate(18deg);
}

.login-screen::selection {
  background: rgba(255, 255, 255, 0.25);
}

.login-status {
  height: 48px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 0 26px 8px;
  font-size: 16px;
  font-weight: 1000;
  text-shadow: 0 2px 9px rgba(14, 5, 43, 0.28);
}

.login-status i {
  width: 56px;
  height: 13px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, white 0 8px, transparent 8px 13px, white 13px 24px, transparent 24px 30px, white 30px 42px, transparent 42px),
    linear-gradient(white, white) right center / 19px 11px no-repeat;
}

.login-close {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  margin: 14px 0 0 25px;
  border-radius: 50%;
  color: #2b1a55;
  background: white;
  font-size: 35px;
  line-height: 1;
  box-shadow:
    0 9px 0 rgba(23, 8, 62, 0.18),
    0 18px 26px rgba(15, 5, 43, 0.28);
}

.login-brand {
  display: grid;
  justify-items: center;
  margin-top: 48px;
  text-align: center;
}

.login-app-icon {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.65), transparent 23%),
    linear-gradient(145deg, #ff61b0, #7b4dff 58%, #1ec6d6);
  border: 3px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    0 11px 0 rgba(14, 5, 43, 0.28),
    0 22px 34px rgba(14, 5, 43, 0.38);
}

.login-app-icon img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  filter:
    drop-shadow(0 7px 0 rgba(255, 255, 255, 0.65))
    drop-shadow(0 14px 12px rgba(14, 5, 43, 0.24));
}

.login-brand h2 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
  width: 100%;
  margin: 35px 0 10px;
  color: #fff;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 52px;
  line-height: 0.9;
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 #fff,
    0 6px 0 #c22cd1,
    0 10px 0 #7a148c,
    0 16px 18px rgba(14, 5, 43, 0.42);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28);
}

.login-brand h2 span:first-child {
  font-size: 58px;
  letter-spacing: -3px;
}

.login-brand h2 span:last-child {
  font-size: 47px;
}

.login-brand p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  font-size: 24px;
  font-weight: 1000;
  text-shadow: 0 3px 9px rgba(14, 5, 43, 0.28);
}

.login-brand p::after {
  content: none;
  display: none;
}

.login-actions {
  display: grid;
  gap: 24px;
  margin: 74px 46px 0;
}

.login-button {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-radius: 999px;
  color: white;
  font-size: 25px;
  font-weight: 1000;
  box-shadow:
    0 9px 0 rgba(14, 5, 43, 0.26),
    0 19px 25px rgba(14, 5, 43, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.login-button span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: inherit;
  font-size: 25px;
  font-weight: 1000;
}

.wechat-mark {
  position: relative;
  width: 50px;
  height: 38px;
  filter: drop-shadow(0 4px 4px rgba(19, 8, 48, 0.18));
}

.wechat-mark i,
.wechat-mark b {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: white;
}

.wechat-mark i {
  left: 1px;
  top: 5px;
  width: 29px;
  height: 24px;
}

.wechat-mark i::before,
.wechat-mark i::after,
.wechat-mark b::before,
.wechat-mark b::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #24c94b;
}

.wechat-mark i::before {
  left: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
}

.wechat-mark i::after {
  left: 17px;
  top: 8px;
  width: 4px;
  height: 4px;
}

.wechat-mark b {
  right: 2px;
  bottom: 4px;
  width: 27px;
  height: 22px;
}

.wechat-mark b::before {
  left: 8px;
  top: 7px;
  width: 4px;
  height: 4px;
}

.wechat-mark b::after {
  left: 16px;
  top: 7px;
  width: 4px;
  height: 4px;
}

.phone-mark {
  position: relative;
  width: 28px;
  height: 38px;
  border: 5px solid white;
  border-radius: 7px;
  box-shadow: 0 5px 7px rgba(19, 8, 48, 0.16);
}

.phone-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: white;
}

.login-button.wechat {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.28), transparent 22%),
    linear-gradient(180deg, #62ea66, #26c94a 78%, #16a63b);
}

.login-button.phone-login {
  background:
    radial-gradient(circle at 17% 20%, rgba(255, 255, 255, 0.28), transparent 23%),
    linear-gradient(180deg, #3edfff, #14c1db 78%, #0b9eba);
}

.login-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 72px;
}

.login-links button {
  color: white;
  background: transparent;
  font-size: 18px;
  font-weight: 1000;
  text-shadow: 0 3px 9px rgba(14, 5, 43, 0.26);
}

.login-links i {
  width: 1px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
}

.login-terms {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 11px;
  align-items: start;
}

.login-terms button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 3px solid rgba(255, 255, 255, 0.78);
}

.login-terms p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 800;
}

.login-terms a {
  color: #ffe45d;
}

.status {
  position: relative;
  z-index: 5;
  height: 42px;
  display: none;
  align-items: end;
  justify-content: space-between;
  padding: 0 24px 7px;
  font-size: 15px;
  font-weight: 900;
}

.status i {
  width: 52px;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #111 0 8px, transparent 8px 12px, #111 12px 22px, transparent 22px 27px, #111 27px 39px, transparent 39px),
    linear-gradient(#111, #111) right center / 18px 10px no-repeat;
}

.status.light {
  color: white;
}

.status.light i {
  filter: invert(1);
}

.app-nav,
.video-head,
.sleep-nav {
  position: relative;
  z-index: 3;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
}

.app-nav strong {
  font-size: 18px;
}

.cat-logo,
.nav-actions button,
.video-head button,
.sleep-nav button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.08);
}

.cat-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.nav-actions {
  display: flex;
  gap: 8px;
}

.home-screen {
  scroll-margin-top: 24px;
  background:
    radial-gradient(circle at 84% 9%, rgba(69, 101, 255, 0.58), transparent 24%),
    radial-gradient(circle at 18% 8%, rgba(255, 44, 123, 0.45), transparent 26%),
    radial-gradient(circle at 16% 54%, rgba(255, 203, 23, 0.18), transparent 28%),
    radial-gradient(circle at 88% 56%, rgba(27, 198, 172, 0.2), transparent 28%),
    linear-gradient(180deg, #c81b5d 0%, #932166 26%, #44216e 58%, #281751 100%);
  background-size: 140% 140%;
  animation: home-gradient-drift 18s ease-in-out infinite alternate;
}

.home-screen .status {
  color: white;
  text-shadow: 0 2px 8px rgba(19, 8, 48, 0.22);
}

.home-screen .status i {
  filter: invert(1);
}

.home-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.42) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.32) 0 2px, transparent 3px),
    radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.34) 0 3px, transparent 4px),
    linear-gradient(115deg, transparent 0 24%, rgba(255, 255, 255, 0.18) 25% 28%, transparent 29% 100%);
  opacity: 0.64;
  animation: sparkle-drift 7s ease-in-out infinite alternate;
}

.home-ambient::after {
  content: "✦  meow  ✦  abc  ✦  suzy  ✦";
  position: absolute;
  left: -56px;
  top: 116px;
  width: 560px;
  color: rgba(255, 255, 255, 0.13);
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: 5px;
  transform: rotate(-12deg);
  animation: word-float 8s ease-in-out infinite alternate;
}

.home-ambient .paw,
.home-ambient .spark {
  position: absolute;
  color: rgba(255, 255, 255, 0.44);
  font-weight: 1000;
  filter: blur(0.2px);
  animation: float-mark 6s ease-in-out infinite alternate;
}

.home-ambient .paw {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 10px;
}

.home-ambient .p1 {
  right: 54px;
  top: 128px;
}

.home-ambient .p2 {
  left: 42px;
  bottom: 148px;
  animation-delay: 700ms;
}

.home-ambient .spark {
  font-size: 30px;
}

.home-ambient .s1 {
  right: 92px;
  bottom: 236px;
}

.home-ambient .s2 {
  left: 74px;
  top: 312px;
  animation-delay: 1s;
}

.home-screen > *:not(.home-ambient):not(.bottom-tabs):not(.home-modal-overlay) {
  position: relative;
  z-index: 1;
}

.home-screen > .home-ambient {
  position: absolute;
  z-index: 0;
}

.home-screen.modal-open > *:not(.home-modal-overlay) {
  filter: blur(7px) saturate(0.78);
  transform: scale(0.985);
  transition: filter 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.home-screen.modal-open > .home-modal-overlay {
  filter: none;
  transform: none;
  pointer-events: auto;
}

@keyframes home-gradient-drift {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 76%;
  }
}

@keyframes sparkle-drift {
  0% {
    transform: translate3d(-8px, -4px, 0);
  }

  100% {
    transform: translate3d(10px, 8px, 0);
  }
}

@keyframes word-float {
  0% {
    transform: rotate(-12deg) translateX(0);
  }

  100% {
    transform: rotate(-12deg) translateX(24px);
  }
}

@keyframes float-mark {
  0% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }

  100% {
    transform: translate3d(8px, -10px, 0) rotate(8deg);
  }
}

.daily-quote {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 16px;
  align-items: center;
  padding: 24px 26px 18px;
}

.daily-copy {
  min-width: 0;
  border-radius: 26px;
  cursor: pointer;
  outline: none;
}

.daily-copy:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 228, 93, 0.42);
}

.daily-quote h2 {
  margin: 8px 0;
  color: white;
  font-size: 32px;
  line-height: 1.06;
  text-shadow: 0 4px 14px rgba(19, 8, 48, 0.24);
}

.daily-quote .eyebrow {
  color: #ffe45d;
}

.home-screen .subcopy {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
}

.quote-chip {
  width: fit-content;
  max-width: 242px;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid rgba(255, 255, 255, 0.68);
  color: #27174e;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 14px 24px rgba(24, 7, 60, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.quote-chip.speaking {
  transform: translateY(-2px);
  background: #fff4b4;
  box-shadow: 0 14px 26px rgba(255, 177, 59, 0.2);
}

.quote-chip img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.talking-cat {
  position: relative;
  width: 84px;
  height: 94px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 45% 18%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(145deg, #ffe45d, #39c5ff 52%, #ff4d8e);
  box-shadow:
    0 22px 34px rgba(22, 8, 54, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.52);
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.talking-cat small {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  color: white;
  font-size: 10px;
  font-weight: 1000;
  opacity: 0.78;
}

.talking-cat img {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 78px;
  height: 78px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 8px rgba(16, 24, 32, 0.18));
  z-index: 2;
}

.real-mouth {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 11px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #9c4d5b;
  box-shadow: 0 0 0 2px rgba(255, 230, 230, 0.85);
  transform-origin: center top;
  z-index: 3;
  opacity: 0.82;
}

.talking-cat:active,
.talking-cat.speaking {
  transform: translateY(-2px) scale(1.03);
}

.talking-cat.speaking .real-mouth {
  animation: real-talk-mouth 250ms ease-in-out 0s 7;
}

.talking-cat.speaking img {
  animation: talk-bob 320ms ease-in-out 0s 5;
}

.home-screen > .home-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: center;
  padding: 18px 16px 20px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 228, 93, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(25, 12, 56, 0.34), rgba(11, 5, 28, 0.76));
  backdrop-filter: blur(12px) saturate(0.82);
}

.home-modal-overlay[hidden] {
  display: none;
}

.parent-unlock-layer[hidden] {
  display: none;
}

.parent-unlock-layer {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 228, 93, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(19, 10, 54, 0.44), rgba(8, 5, 22, 0.74));
  backdrop-filter: blur(12px) saturate(0.85);
}

.parent-unlock-dialog {
  position: relative;
  width: min(344px, calc(100vw - 44px));
  padding: 24px 20px 18px;
  border-radius: 28px;
  color: #21153f;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 228, 93, 0.58), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 255, 250, 0.97));
  border: 2px solid rgba(255, 255, 255, 0.76);
  box-shadow:
    0 18px 0 rgba(19, 8, 48, 0.13),
    0 26px 48px rgba(8, 4, 30, 0.34);
  animation: modal-rise 220ms ease-out both;
}

.parent-unlock-close {
  position: absolute;
  right: 14px;
  top: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2a174f;
  background: rgba(255, 255, 255, 0.88);
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.parent-unlock-dialog > span {
  display: block;
  color: #0ba69d;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.parent-unlock-dialog h2 {
  margin: 7px 42px 8px 0;
  color: #19123d;
  font-size: 25px;
  line-height: 1.08;
  font-weight: 1000;
}

.parent-unlock-dialog p,
.parent-unlock-dialog small {
  display: block;
  margin: 0;
  color: rgba(25, 18, 61, 0.62);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 850;
}

.parent-unlock-question {
  margin: 16px 0 11px;
  padding: 14px;
  border-radius: 20px;
  background: #f6fbff;
  border: 1px solid rgba(90, 112, 255, 0.14);
}

.parent-unlock-question strong {
  display: block;
  color: #181842;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 1000;
}

.parent-unlock-question input {
  width: 100%;
  height: 48px;
  margin-top: 11px;
  border: 2px solid rgba(90, 112, 255, 0.16);
  border-radius: 16px;
  padding: 0 14px;
  color: #181842;
  background: white;
  font-size: 18px;
  font-weight: 900;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.parent-unlock-question input::-webkit-outer-spin-button,
.parent-unlock-question input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.parent-unlock-question input:focus {
  border-color: #5a70ff;
  box-shadow: 0 0 0 4px rgba(90, 112, 255, 0.12);
}

.parent-unlock-dialog small.error {
  color: #d83268;
}

.parent-unlock-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  margin-top: 16px;
}

.parent-unlock-actions button {
  min-height: 48px;
  border-radius: 18px;
  color: #13203a;
  background: #eaf4f8;
  font-size: 14px;
  font-weight: 1000;
}

.parent-unlock-actions button:last-child {
  color: white;
  background: linear-gradient(145deg, #17c7bb, #5a70ff);
  box-shadow: 0 10px 18px rgba(52, 82, 170, 0.2);
}

.floating-dialog {
  position: relative;
  width: 100%;
  height: 82%;
  max-height: calc(100% - 8px);
  min-height: 668px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  box-shadow:
    0 24px 0 rgba(19, 8, 48, 0.16),
    0 28px 48px rgba(8, 4, 30, 0.38);
  animation: modal-rise 220ms ease-out both;
}

.dialog-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.dialog-scroll::-webkit-scrollbar {
  display: none;
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

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

.modal-close {
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2a174f;
  background: rgba(255, 255, 255, 0.86);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(24, 7, 60, 0.16);
}

.profile-dialog {
  padding: 20px 18px 18px;
  color: #251747;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 228, 93, 0.76), transparent 22%),
    radial-gradient(circle at 8% 14%, rgba(51, 213, 202, 0.4), transparent 25%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 255, 250, 0.96) 52%, rgba(243, 236, 255, 0.98));
  border: 2px solid rgba(255, 255, 255, 0.76);
}

.dialog-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 42px 16px 0;
}

.dialog-hero.text-only {
  display: block;
  min-height: 0;
  margin: 2px 42px 18px 0;
}

.dialog-hero img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  padding: 5px;
  border-radius: 23px;
  background: linear-gradient(145deg, #fff5bb, #52d7ff 55%, #ff76b8);
  filter: drop-shadow(0 13px 13px rgba(35, 14, 78, 0.16));
}

.dialog-hero span,
.profile-field span,
.avatar-field > span,
.profile-grid span,
.grade-row > span,
.grade-select-field > span,
.dialog-kicker,
.mini-lesson span {
  display: block;
  color: #5f6f88;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dialog-hero h3,
.quote-dialog h3 {
  margin: 4px 0 0;
  font-size: 26px;
  line-height: 1;
}

.profile-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.profile-field input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 18px;
  color: #211642;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 0 0 2px rgba(81, 203, 218, 0.18),
    0 12px 22px rgba(35, 14, 78, 0.1);
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  outline: none;
}

.avatar-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.avatar-select {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 52px 1fr 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 20px;
  color: #231646;
  text-align: left;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 2px rgba(81, 203, 218, 0.18),
    0 12px 22px rgba(35, 14, 78, 0.1);
}

.avatar-select img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  padding: 3px;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff5bb, #52d7ff 55%, #ff76b8);
  filter: drop-shadow(0 8px 8px rgba(35, 14, 78, 0.13));
}

.avatar-select strong {
  display: block;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 1000;
}

.avatar-select small {
  display: block;
  margin-top: 3px;
  color: #728099;
  font-size: 11px;
  font-weight: 900;
}

.avatar-select b {
  color: #6e4dff;
  font-size: 18px;
  text-align: center;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

.avatar-field.open .avatar-select b {
  transform: rotate(180deg);
}

.avatar-menu {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.48),
    0 14px 22px rgba(35, 14, 78, 0.1);
}

.avatar-field.open .avatar-menu {
  display: grid;
}

.avatar-menu button {
  min-width: 0;
  min-height: 83px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 7px 5px;
  border-radius: 18px;
  color: #251747;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58);
}

.avatar-menu button.selected {
  background: linear-gradient(145deg, #fff1a3, #74ead8);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 13px 18px rgba(38, 186, 166, 0.2);
}

.avatar-menu img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(35, 14, 78, 0.13));
}

.avatar-menu span {
  font-size: 10px;
  font-weight: 1000;
}

.avatar-menu .upload-avatar {
  color: #6e4dff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(238, 232, 255, 0.84));
}

.avatar-menu .upload-avatar > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, #22c8cf, #6e4dff);
  font-size: 24px;
  line-height: 1;
}

.avatar-menu .upload-avatar small {
  max-width: 56px;
  color: #59476f;
  font-size: 9px;
  line-height: 1.15;
  font-weight: 1000;
}

.pet-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.pet-picker button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px 7px;
  border-radius: 20px;
  color: #251747;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58);
}

.pet-picker button.selected {
  background: linear-gradient(145deg, #fff1a3, #74ead8);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 13px 18px rgba(38, 186, 166, 0.22);
}

.pet-picker img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(35, 14, 78, 0.13));
}

.pet-picker span {
  font-size: 10px;
  font-weight: 1000;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 13px;
}

.profile-grid > div,
.grade-row,
.grade-select-field {
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.segmented-mini,
.stepper-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.segmented-mini button,
.stepper-mini button,
.grade-row button {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #38245f;
  background: rgba(237, 232, 255, 0.9);
  font-size: 13px;
  font-weight: 1000;
}

.segmented-mini button.active,
.grade-row button.active {
  color: white;
  background: #6e4dff;
}

.stepper-mini {
  justify-content: space-between;
}

.stepper-mini button {
  width: 30px;
  padding: 0;
  color: white;
  background: #22c8cf;
}

.stepper-mini strong {
  font-size: 22px;
  line-height: 1;
}

.grade-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.grade-row > span {
  width: 100%;
}

.grade-select-field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.grade-select-field select {
  width: 100%;
  height: 42px;
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 0 42px 0 14px;
  color: #251747;
  background:
    linear-gradient(45deg, transparent 50%, #6e4dff 50%) calc(100% - 22px) 18px / 8px 8px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 255, 0.9));
  box-shadow:
    inset 0 0 0 2px rgba(81, 203, 218, 0.18),
    0 10px 18px rgba(35, 14, 78, 0.09);
  font: inherit;
  font-size: 15px;
  font-weight: 1000;
  outline: none;
}

.primary-save {
  width: 100%;
  height: 48px;
  margin: 3px 0 10px;
  border-radius: 999px;
  color: white;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.45), transparent 22%),
    linear-gradient(180deg, #ff5b9d, #6d45ff);
  font-size: 17px;
  font-weight: 1000;
  box-shadow:
    0 8px 0 rgba(70, 34, 173, 0.36),
    0 18px 28px rgba(60, 24, 132, 0.24);
}

.profile-section {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.interest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.interest-chips button {
  height: 31px;
  padding: 0 12px;
  border-radius: 999px;
  color: #39255f;
  background: rgba(237, 232, 255, 0.92);
  font-size: 12px;
  font-weight: 1000;
}

.interest-chips button.active {
  color: white;
  background: linear-gradient(135deg, #21c4c9, #6e4dff);
}

.profile-note {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px;
  margin-bottom: 13px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 228, 93, 0.32), rgba(255, 255, 255, 0.62));
}

.profile-note img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.profile-note p {
  margin: 0;
  color: #4b5672;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 900;
}

.quote-layer {
  align-items: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 63, 146, 0.28), transparent 26%),
    radial-gradient(circle at 88% 72%, rgba(30, 203, 214, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(12, 6, 33, 0.5), rgba(8, 4, 23, 0.78));
}

.quote-dialog {
  padding: 27px 20px 20px;
  color: white;
  background:
    linear-gradient(135deg, rgba(37, 20, 83, 0.94), rgba(111, 37, 128, 0.9)),
    radial-gradient(circle at 86% 12%, rgba(255, 228, 93, 0.28), transparent 24%);
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.quote-dialog::after {
  content: "spark";
  position: absolute;
  right: -14px;
  top: 130px;
  color: rgba(255, 255, 255, 0.08);
  font-size: 68px;
  font-weight: 1000;
  transform: rotate(-14deg);
  pointer-events: none;
}

.quote-mark {
  position: absolute;
  right: 18px;
  top: 16px;
  color: rgba(255, 228, 93, 0.34);
  font-size: 88px;
  line-height: 0.7;
  font-family: Georgia, serif;
}

.dialog-kicker {
  color: #ffe45d;
}

.quote-dialog h3 {
  max-width: 285px;
  margin-top: 9px;
  font-size: 30px;
  line-height: 1.04;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.26);
}

.quote-cn {
  margin: 10px 0 16px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  font-weight: 900;
}

.quote-notes {
  display: grid;
  gap: 10px;
}

.quote-notes article,
.mini-lesson {
  position: relative;
  z-index: 1;
  padding: 13px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.quote-notes b {
  display: block;
  margin-bottom: 5px;
  color: #ffe45d;
  font-size: 16px;
}

.quote-notes span,
.mini-lesson p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.mini-lesson {
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(30, 203, 214, 0.18));
}

.mini-lesson span {
  color: #86f4e9;
}

.mini-lesson strong {
  display: block;
  margin-top: 5px;
  font-size: 19px;
}

.mini-lesson p {
  margin: 4px 0 0;
}

.quote-compare,
.family-prompt {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.quote-compare span {
  display: block;
  color: #86f4e9;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.quote-compare p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 850;
}

.family-prompt {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(255, 228, 93, 0.22), rgba(255, 255, 255, 0.12));
}

.family-prompt img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(4, 2, 16, 0.26));
}

.family-prompt b {
  display: block;
  margin-bottom: 5px;
  color: #ffe45d;
}

.family-prompt span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 850;
}

.quote-vocab,
.quote-scene {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.quote-vocab span {
  display: block;
  color: #86f4e9;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.quote-vocab div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.quote-vocab button {
  height: 31px;
  padding: 0 12px;
  border-radius: 999px;
  color: #2c174b;
  background: linear-gradient(135deg, #ffe45d, #ffffff);
  font-size: 12px;
  font-weight: 1000;
}

.quote-scene {
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(255, 91, 157, 0.2), rgba(30, 203, 214, 0.14));
}

.quote-scene b {
  display: block;
  margin-bottom: 6px;
  color: #ffe45d;
}

.quote-scene p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 850;
}

@keyframes real-talk-mouth {
  0%,
  100% {
    width: 10px;
    height: 4px;
  }

  45% {
    width: 13px;
    height: 13px;
  }
}

@keyframes talk-mouth {
  0%,
  100% {
    height: 5px;
    border-radius: 0 0 999px 999px;
  }

  50% {
    height: 15px;
    width: 14px;
    border-radius: 50%;
  }
}

@keyframes talk-bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-2px);
  }
}

.placement-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 12px;
  align-items: center;
  margin: 4px 26px 18px;
  padding: 16px 19px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 86% 30%, rgba(255, 228, 93, 0.9), transparent 21%),
    radial-gradient(circle at 8% 0%, rgba(49, 214, 191, 0.72), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f5f3ff 46%, #e8f0ff 100%);
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 20px 0 rgba(29, 12, 71, 0.12),
    0 24px 38px rgba(19, 8, 48, 0.24);
}

.placement-card span {
  color: #11a17f;
  font-size: 12px;
  font-weight: 900;
}

.placement-card strong {
  display: block;
  margin: 6px 0 6px;
  color: #181333;
  font-size: 24px;
  line-height: 1.08;
}

.placement-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.placement-card button {
  height: 34px;
  margin-top: 8px;
  padding: 0 18px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #ff2d80, #f20f5f);
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(246, 79, 120, 0.22);
}

.grade-badge {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, #4565ff, #6a43d9);
  box-shadow:
    0 8px 0 rgba(30, 15, 86, 0.15),
    0 16px 20px rgba(64, 104, 255, 0.24);
  font-size: 26px;
  font-weight: 1000;
}

.age-paths {
  display: grid;
  gap: 14px;
  margin: 0 26px;
}

.age-card {
  min-height: 78px;
  display: grid;
  grid-template-columns: 58px 1fr 18px;
  gap: 10px;
  align-items: center;
  padding: 9px 14px 9px 10px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.22), transparent 26%),
    linear-gradient(135deg, #13b995, #0b9fca);
  border: 3px solid rgba(255, 255, 255, 0.18);
  text-align: left;
  box-shadow:
    0 11px 0 rgba(20, 8, 55, 0.2),
    0 18px 26px rgba(19, 8, 48, 0.24);
}

.age-card img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 19px;
  padding: 3px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 9px 0 rgba(19, 8, 48, 0.14);
}

.age-card strong {
  display: block;
  margin-bottom: 4px;
  color: white;
  font-size: 23px;
  line-height: 1;
}

.age-card span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.age-card b {
  color: rgba(255, 255, 255, 0.86);
  font-size: 30px;
  line-height: 1;
}

.age-3 img {
  background: linear-gradient(145deg, #ffdf59, #ff9d5f);
}

.age-7 img {
  background: linear-gradient(145deg, #ff4f9a, #7b4dff);
}

.age-10 img {
  background: linear-gradient(145deg, #49d5ff, #4565ff);
}

.age-3 {
  background:
    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.2), transparent 26%),
    linear-gradient(135deg, #12b98f, #07a7cf);
}

.age-7 {
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.2), transparent 27%),
    linear-gradient(135deg, #ff2d80, #f25b47);
}

.age-10 {
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.2), transparent 27%),
    linear-gradient(135deg, #4565ff, #6a43d9);
}

.bottom-tabs {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 8px;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  padding: 0 18px 4px;
  border-radius: 24px 24px 25px 25px;
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.2), transparent 24%),
    linear-gradient(180deg, #6035b0 0%, #54309e 76%, #422484 100%);
  border: 0;
  box-shadow:
    0 9px 0 rgba(29, 13, 73, 0.56),
    0 21px 30px rgba(16, 6, 44, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.14);
  z-index: 3;
  overflow: visible;
}

.bottom-tabs::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: -8px;
  height: 18px;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(90deg, #ff2d80, #ffcf2e 36%, #15c6b0 62%, #4565ff);
  box-shadow:
    0 8px 16px rgba(18, 8, 50, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  z-index: -1;
}

.bottom-tabs button {
  position: relative;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  border-radius: 22px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 900;
  transition: transform 180ms ease;
}

.bottom-tabs button:first-child {
  transform: translateX(-32px);
}

.bottom-tabs button:last-child {
  transform: translateX(32px);
}

.bottom-tabs span,
.bottom-tabs b {
  display: block;
}

.bottom-tabs .nav-icon {
  position: absolute;
  left: 50%;
  top: -28px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin: 0;
  transform: translateX(-50%);
  border-radius: 24px;
  background: transparent;
  font-size: 15px;
  overflow: visible;
  border: 0;
  box-shadow: none;
  z-index: 2;
}

.bottom-tabs .nav-icon::before {
  content: "";
  position: absolute;
  inset: 8px 6px 6px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(145deg, #6f47dc, #4e2a99);
  border: 4px solid white;
  box-shadow:
    0 8px 0 rgba(24, 8, 68, 0.38),
    0 16px 18px rgba(18, 8, 50, 0.32);
  z-index: 0;
}

.bottom-tabs .nav-icon::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 1px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 5, 42, 0.32);
  filter: blur(4px);
  z-index: -1;
}

.bottom-tabs img {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter:
    drop-shadow(0 5px 0 rgba(255, 255, 255, 0.88))
    drop-shadow(0 13px 8px rgba(19, 8, 48, 0.32))
    saturate(1.18)
    contrast(1.08);
}

.bottom-tabs b {
  margin-top: 0;
  padding-top: 28px;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(18, 7, 48, 0.42);
}

.bottom-tabs .active .nav-icon {
  color: #122033;
  background: transparent;
}

.bottom-tabs .discover-icon::before {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(145deg, #ffe45d, #ff8f41);
}

.bottom-tabs .resource-icon {
  width: 54px;
  height: 54px;
  top: -32px;
}

.bottom-tabs .resource-icon::after {
  left: 9px;
  right: 9px;
  bottom: 0;
  width: auto;
  height: 10px;
  transform: none;
  background: rgba(10, 4, 30, 0.38);
  z-index: -1;
}

.bottom-tabs .resource-icon::before {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(145deg, #ff2d80, #ff77a5);
}

.bottom-tabs .profile-icon::before {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(145deg, #28d2a4, #2376d9);
}

.bottom-tabs .profile-icon img {
  width: 44px;
  height: 44px;
}

.bottom-tabs .resource-icon img {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  transform: translateY(-4px) scale(1);
  filter:
    drop-shadow(0 5px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 18px 10px rgba(18, 8, 50, 0.38))
    saturate(1.2)
    contrast(1.1);
}

.bottom-tabs .study-tab b {
  color: white;
  font-weight: 1000;
}

.bottom-tabs .active b {
  color: white;
}

.resource-hub-screen {
  color: #f8fbff;
  font-family: "PingFang SC", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 82% 8%, rgba(96, 88, 238, 0.22), transparent 24%),
    radial-gradient(circle at 13% 38%, rgba(255, 218, 112, 0.13), transparent 30%),
    radial-gradient(circle at 78% 82%, rgba(24, 198, 163, 0.24), transparent 32%),
    linear-gradient(180deg, #151733 0%, #193055 49%, #08665f 100%);
}

.resource-hub-screen::before {
  background: #061326;
}

.resource-hub-screen .stage-nav {
  padding: 13px 20px 9px;
}

.resource-hub-screen .stage-nav strong {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-hub-screen .stage-nav span {
  min-width: 58px;
  text-align: center;
}

.resource-hub-scroll {
  height: calc(100% - 80px);
  overflow-y: auto;
  padding: 0 18px 34px;
  scrollbar-width: none;
}

.resource-hub-scroll::-webkit-scrollbar {
  display: none;
}

.resource-hub-hero {
  position: relative;
  min-height: 92px;
  padding: 14px 16px;
  overflow: hidden;
  border-radius: 26px;
  color: #12223f;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.92), transparent 22%),
    radial-gradient(circle at 84% 22%, rgba(139, 255, 222, 0.55), transparent 31%),
    linear-gradient(135deg, #fff7d9 0%, #e9fff8 52%, #d7f2ff 100%);
  border: 2px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.88),
    0 8px 0 rgba(4, 22, 45, 0.14),
    0 18px 24px rgba(4, 22, 45, 0.2);
  cursor: pointer;
}

.resource-hub-hero::after {
  content: "zzz";
  position: absolute;
  left: 16px;
  bottom: -8px;
  color: rgba(18, 34, 63, 0.06);
  font-size: 44px;
  font-weight: 1000;
  line-height: 1;
}

.resource-hub-hero > div {
  position: relative;
  z-index: 2;
  max-width: 252px;
}

.resource-hub-hero .eyebrow,
.hub-section-title span {
  color: #56f0dc;
}

.resource-hub-hero h2 {
  margin: 5px 0 5px;
  font-size: 26px;
  line-height: 0.98;
  font-weight: 1000;
}

.resource-hub-hero p:last-child {
  margin: 0;
  color: rgba(18, 34, 63, 0.66);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
}

.resource-hub-hero img {
  position: absolute;
  right: 10px;
  bottom: -6px;
  z-index: 2;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 12px 10px rgba(4, 22, 45, 0.2));
}

.resource-search-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 14px 0 22px;
  padding: 10px 12px;
  border-radius: 22px;
  color: #172342;
  background:
    linear-gradient(135deg, rgba(255, 255, 251, 0.97), rgba(237, 252, 244, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 7px 16px rgba(5, 18, 42, 0.18);
}

.resource-search-card span,
.hub-section-title span {
  display: block;
  font-size: 9px;
  font-weight: 900;
}

.resource-search-card span {
  color: #0a9795;
}

.resource-search-card strong {
  overflow: hidden;
  color: #15213d;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-search-card b {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.78), transparent 26%),
    linear-gradient(135deg, #1cc8bd, #4c73ff);
  font-size: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 7px 13px rgba(18, 40, 82, 0.2);
}

.resource-search-card b::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
}

.resource-search-card b::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  transform: translate(8px, 8px) rotate(-45deg);
}

.hub-primary-route {
  display: grid;
  gap: 10px;
}

.hub-age-card {
  position: relative;
  min-height: 76px;
  display: grid;
  grid-template-columns: 62px 1fr 48px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px 10px 10px;
  overflow: hidden;
  border-radius: 26px;
  color: #172342;
  text-align: left;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.92),
    0 8px 0 rgba(4, 22, 45, 0.14),
    0 18px 24px rgba(4, 22, 45, 0.15);
}

.hub-age-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 120px;
  height: 68px;
  border-radius: 999px 0 0 0;
  opacity: 0.32;
  background: linear-gradient(135deg, #ffe66f, #ff4f9b);
}

.hub-age-card.middle::before {
  background: linear-gradient(135deg, #5af0d9, #5a7bff);
}

.hub-age-card.teen::before {
  background: linear-gradient(135deg, #ff8b55, #9a5cff);
}

.hub-age-card i {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: white;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.74), transparent 30%),
    linear-gradient(145deg, #ffcf4f, #ff6e42);
  box-shadow: 0 8px 0 rgba(23, 35, 66, 0.14);
  font-size: 18px;
  font-weight: 1000;
  font-style: normal;
}

.hub-age-card.middle i {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.74), transparent 30%),
    linear-gradient(145deg, #24d7bf, #4565ff);
}

.hub-age-card.teen i {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.74), transparent 30%),
    linear-gradient(145deg, #ff4f90, #7b4dff);
}

.hub-age-card span,
.hub-age-card em {
  position: relative;
  z-index: 1;
}

.hub-age-card b {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 1;
  font-weight: 1000;
}

.hub-age-card small {
  display: block;
  margin: 0;
  color: rgba(23, 35, 66, 0.58);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 850;
}

.hub-age-card em {
  justify-self: end;
  min-width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: white;
  background: rgba(23, 35, 66, 0.88);
  font-size: 11px;
  font-weight: 1000;
  font-style: normal;
}

.hub-section-title {
  margin: 18px 0 9px;
}

.hub-section-title strong {
  display: block;
  margin-top: 3px;
  color: white;
  font-size: 19px;
  font-weight: 950;
}

.hub-level-rail .hub-section-title,
.hub-topic-strip .hub-section-title {
  margin-top: 16px;
}

.hub-level-rail {
  position: relative;
  margin: 0 -2px 12px;
  padding: 2px 0 4px;
  overflow: visible;
}

.hub-level-rail::before {
  content: none;
}

.hub-level-rail .hub-section-title {
  position: relative;
  z-index: 1;
  margin: 0 0 5px;
  padding-left: 2px;
}

.hub-level-rail .hub-section-title span {
  font-size: 9px;
  line-height: 1;
}

.hub-level-rail .hub-section-title strong {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1;
}

.hub-level-rail > div:last-child {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.hub-level-rail > div:last-child.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.hub-level-rail > div:last-child::-webkit-scrollbar {
  display: none;
}

.hub-level-rail button {
  position: relative;
  min-width: 80px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: 999px;
  color: #172342;
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.66), transparent 26%),
    linear-gradient(145deg, #f8ffff, #dff3f6);
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 10px rgba(5, 18, 42, 0.14);
  scroll-snap-align: start;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.hub-level-rail button::before {
  content: "";
  position: absolute;
  inset: 5px auto auto 10px;
  width: 38px;
  height: 9px;
  border-radius: 999px;
  opacity: 0.36;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), transparent);
  filter: blur(0.5px);
}

.hub-level-rail button:nth-child(3n + 1) {
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.66), transparent 26%),
    linear-gradient(145deg, #fff4cf, #ffe6eb);
}

.hub-level-rail button:nth-child(3n + 2) {
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.66), transparent 26%),
    linear-gradient(145deg, #e2fff8, #e7f4ff);
}

.hub-level-rail button.active {
  color: #fff;
  background:
    radial-gradient(ellipse at 28% 28%, rgba(255, 255, 255, 0.5), transparent 36%),
    radial-gradient(ellipse at 80% 105%, rgba(255, 229, 115, 0.22), transparent 42%),
    linear-gradient(135deg, #18c9bc 0%, #5068f2 72%, #8156ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 5px 12px rgba(6, 26, 60, 0.22);
  transform: none;
}

.hub-level-rail button.active b {
  color: #fff7a4;
}

.hub-level-rail button b,
.hub-level-rail button span {
  display: block;
}

.hub-level-rail button b {
  color: #ff2d80;
  font-size: 14px;
  line-height: 1;
  font-weight: 950;
}

.hub-level-rail button span {
  margin-top: 0;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 900;
}

.hub-topic-strip > div:last-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.hub-topic-strip button {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px 1fr 14px;
  grid-template-rows: auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border-radius: 20px;
  color: #172342;
  text-align: left;
  background:
    radial-gradient(circle at 93% 8%, rgba(255, 255, 255, 0.62), transparent 20%),
    linear-gradient(135deg, rgba(255, 255, 249, 0.97), rgba(231, 250, 239, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 18px rgba(5, 18, 42, 0.16);
}

.hub-topic-strip button::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  color: rgba(23, 35, 66, 0.34);
  font-size: 22px;
  font-weight: 700;
}

.hub-topic-strip button span {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: white;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 30%),
    linear-gradient(145deg, #22d4c7, #5569f4);
  font-size: 13px;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 5px 11px rgba(21, 33, 61, 0.15);
}

.hub-topic-strip button b,
.hub-topic-strip button small {
  display: block;
}

.hub-topic-strip button b {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  overflow: hidden;
  color: #16213e;
  font-size: 14px;
  line-height: 1.08;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-topic-strip button small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  overflow: hidden;
  color: rgba(23, 35, 66, 0.56);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-screen {
  scroll-margin-top: 24px;
  color: white;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(180deg, #16b99f 0%, #087aa3 100%);
}

.parent-center-screen {
  scroll-margin-top: 24px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 84% 9%, rgba(82, 228, 190, 0.3), transparent 24%),
    radial-gradient(circle at 12% 76%, rgba(94, 121, 255, 0.22), transparent 31%),
    linear-gradient(180deg, #0d2037 0%, #10263f 48%, #15274f 100%);
}

.parent-center-screen::after {
  background: rgba(255, 255, 255, 0.35);
}

.parent-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 8px;
}

.parent-nav button {
  width: 40px;
  height: 40px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(4, 12, 24, 0.2);
}

.parent-nav strong {
  font-size: 19px;
}

.parent-nav span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(47, 214, 174, 0.18);
  color: #79f0ce;
  font-size: 12px;
  font-weight: 1000;
}

.parent-scroll {
  height: calc(100% - 64px);
  overflow-y: auto;
  padding: 4px 20px 76px;
  scrollbar-width: none;
}

.parent-scroll::-webkit-scrollbar {
  display: none;
}

.parent-hero {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 10px;
  min-height: 170px;
  padding: 21px 18px 0;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 82% 22%, rgba(82, 228, 190, 0.36), transparent 28%),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(64, 104, 255, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 34px rgba(3, 10, 21, 0.24);
}

.parent-hero h2 {
  margin: 8px 0 10px;
  font-size: 30px;
  line-height: 1.08;
}

.parent-hero p {
  margin: 0;
  color: rgba(247, 251, 255, 0.72);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.48;
}

.parent-hero img {
  align-self: end;
  width: 112px;
  transform: translateY(8px);
  filter: drop-shadow(0 14px 14px rgba(3, 10, 21, 0.26));
}

.child-summary {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 13px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 14px 26px rgba(3, 10, 21, 0.14);
}

.child-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 21px;
  background: linear-gradient(145deg, #d7fbef, #e9f1ff);
}

.child-avatar img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.child-summary span,
.child-summary strong,
.child-summary p {
  display: block;
}

.child-summary span {
  color: #6b7887;
  font-size: 12px;
  font-weight: 900;
}

.child-summary strong {
  margin: 4px 0;
  font-size: 20px;
}

.child-summary p {
  margin: 0;
  color: #657284;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.parent-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.parent-trust-strip article {
  min-height: 88px;
  padding: 11px 9px;
  border-radius: 21px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.38), transparent 26%),
    rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.parent-trust-strip span,
.parent-trust-strip small {
  display: block;
  color: rgba(248, 251, 255, 0.7);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
}

.parent-trust-strip strong {
  display: block;
  margin: 7px 0 6px;
  color: white;
  font-size: 20px;
  line-height: 1;
  font-weight: 1000;
}

.child-summary button,
.parent-card-list button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  background: #102f4e;
  color: white;
  font-size: 13px;
  font-weight: 1000;
}

.parent-compass {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 126px;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 18px;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 94% 28%, rgba(47, 214, 174, 0.22), transparent 26%),
    linear-gradient(135deg, #f8fbff 0%, #e8f7ff 100%);
  color: var(--ink);
  box-shadow: 0 18px 32px rgba(3, 10, 21, 0.18);
}

.parent-open-card {
  width: calc(100% - 0px);
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.compass-copy span,
.weekly-rings span,
.parent-metrics span {
  display: block;
  color: #657284;
  font-size: 12px;
  font-weight: 1000;
}

.compass-copy strong {
  display: block;
  margin: 7px 0 8px;
  font-size: 21px;
  line-height: 1.1;
}

.compass-copy p,
.weekly-rings p {
  margin: 0;
  color: #607080;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.compass-orbit {
  position: relative;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
}

.compass-orbit .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -40deg, #2fd6ae 0 58%, #ffe374 58% 73%, #dfe7f0 73% 100%);
  box-shadow: inset 0 0 0 13px white, 0 14px 24px rgba(18, 47, 78, 0.16);
}

.compass-orbit .needle {
  position: absolute;
  left: 57px;
  top: 22px;
  width: 5px;
  height: 42px;
  border-radius: 999px;
  background: #ff6c75;
  transform: rotate(42deg);
  transform-origin: bottom center;
  box-shadow: 0 4px 10px rgba(255, 108, 117, 0.35);
}

.compass-orbit b {
  position: relative;
  z-index: 1;
  color: #102f4e;
  font-size: 28px;
  font-weight: 1000;
}

.compass-orbit span {
  position: absolute;
  bottom: 19px;
  z-index: 1;
  color: #0f8e74;
  font-size: 11px;
  font-weight: 1000;
}

.parent-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.parent-metrics article {
  min-height: 92px;
  padding: 12px 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.parent-metrics strong {
  display: block;
  margin-top: 8px;
  color: white;
  font-size: 24px;
  line-height: 1;
}

.parent-metrics small {
  display: block;
  margin-top: 7px;
  color: rgba(247, 251, 255, 0.66);
  font-size: 11px;
  font-weight: 800;
}

.weekly-rings {
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 16px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 207, 46, 0.32), transparent 24%),
    #fff8ea;
  color: var(--ink);
  border: 0;
  text-align: left;
  font: inherit;
}

.weekly-rings strong {
  display: block;
  margin: 5px 0;
  font-size: 31px;
}

.ring-stack {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
}

.ring-stack i {
  position: absolute;
  border-radius: 50%;
}

.ring-video {
  inset: 0;
  background: conic-gradient(#2fd6ae 0 76%, #e7ecf2 76% 100%);
}

.ring-audio {
  inset: 12px;
  background: conic-gradient(#4068ff 0 64%, #e7ecf2 64% 100%);
}

.ring-review {
  inset: 24px;
  background: conic-gradient(#ffcf2e 0 52%, #e7ecf2 52% 100%);
}

.ring-stack::after {
  content: "";
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  background: #fff8ea;
}

.ring-stack b {
  position: relative;
  z-index: 1;
  color: #102f4e;
  font-size: 24px;
  font-weight: 1000;
}

.parent-evidence-card {
  margin-top: 12px;
  padding: 15px;
  border-radius: 27px;
  background:
    radial-gradient(circle at 86% 16%, rgba(82, 228, 190, 0.16), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #eef8ff 100%);
  color: var(--ink);
  box-shadow: 0 16px 30px rgba(3, 10, 21, 0.17);
}

.evidence-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.evidence-head span {
  color: #657284;
  font-size: 11px;
  font-weight: 1000;
}

.evidence-head b {
  color: #102f4e;
  font-size: 16px;
  font-weight: 1000;
}

.evidence-row {
  display: grid;
  grid-template-columns: 72px 1fr 48px;
  gap: 9px;
  align-items: center;
  min-height: 31px;
}

.evidence-row span,
.evidence-row b {
  color: #5d6b78;
  font-size: 11px;
  font-weight: 1000;
}

.evidence-row b {
  text-align: right;
  color: #102f4e;
}

.evidence-row i {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe8f0;
}

.evidence-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fd6ae, #4068ff);
}

.parent-card-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.parent-card-list article {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 90px;
  padding: 12px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 13px 24px rgba(3, 10, 21, 0.12);
}

.parent-card-list img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.parent-card-list strong,
.parent-card-list span {
  display: block;
}

.parent-card-list strong {
  margin-bottom: 5px;
  font-size: 16px;
}

.parent-card-list span {
  color: #657284;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.parent-panel-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: rgba(3, 10, 21, 0.46);
  backdrop-filter: blur(8px);
}

.parent-panel-layer[hidden] {
  display: none;
}

.parent-detail-panel {
  position: relative;
  width: 100%;
  max-height: 72%;
  overflow-y: auto;
  padding: 22px 18px 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 8%, rgba(47, 214, 174, 0.2), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f1fbf8 100%);
  color: var(--ink);
  box-shadow: 0 -18px 40px rgba(3, 10, 21, 0.3);
  scrollbar-width: none;
}

.parent-detail-panel::-webkit-scrollbar {
  display: none;
}

.parent-panel-close {
  position: absolute;
  right: 15px;
  top: 13px;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: #102f4e;
  color: white;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.parent-panel-kicker {
  display: block;
  color: #0f8e74;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.parent-detail-panel h3 {
  margin: 7px 42px 8px 0;
  font-size: 26px;
  line-height: 1.08;
}

.parent-detail-panel p {
  margin: 0;
  color: #5d6b78;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.parent-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.parent-panel-note {
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 18px;
  background: #ecf8ff;
  color: #4f6173;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 850;
  border: 1px solid rgba(64, 104, 255, 0.1);
}

.parent-panel-grid article,
.parent-panel-list article {
  padding: 13px;
  border-radius: 19px;
  background: #f7fafc;
  border: 1px solid rgba(16, 24, 32, 0.08);
}

.parent-panel-grid span,
.parent-panel-list span {
  display: block;
  color: #667586;
  font-size: 12px;
  font-weight: 1000;
}

.parent-panel-grid strong,
.parent-panel-list strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.parent-panel-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.parent-toggle-row {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.parent-toggle-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 13px;
  border-radius: 18px;
  background: #f7fafc;
  border: 1px solid rgba(16, 24, 32, 0.08);
  color: #253342;
  font-weight: 900;
}

.parent-toggle-row input {
  width: 22px;
  height: 22px;
  accent-color: #0f8e74;
}

.parent-panel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

.parent-panel-actions button {
  min-height: 46px;
  border-radius: 17px;
  color: white;
  background: #102f4e;
  font-weight: 1000;
}

.parent-panel-actions button:first-child {
  color: #102f4e;
  background: #e7f7f1;
}

.stage-screen::before {
  background: #07090d;
}

.stage-screen .status {
  text-shadow: 0 2px 8px rgba(16, 6, 44, 0.28);
}

.stage-screen .stage-nav {
  position: relative;
  z-index: 3;
  height: 52px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 0 20px;
}

.level-detail-screen .stage-nav,
.film-library-screen .stage-nav {
  position: relative;
  z-index: 3;
  height: 52px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 0 20px;
  color: white;
}

.stage-nav button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #251348;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 8px 0 rgba(21, 9, 58, 0.22),
    0 16px 20px rgba(16, 6, 44, 0.22);
  font-size: 28px;
  font-weight: 900;
}

.stage-nav strong {
  font-size: 19px;
  font-weight: 1000;
  text-align: center;
}

.stage-nav span {
  min-width: 62px;
  padding: 8px 12px;
  border-radius: 999px;
  color: white;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.stage-nav .level-switch-trigger {
  width: auto;
  min-width: 78px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px rgba(16, 6, 44, 0.12);
  font-size: 12px;
  font-weight: 1000;
  touch-action: manipulation;
}

.stage-nav .level-switch-trigger span {
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.stage-nav .level-switch-trigger svg {
  width: 16px;
  height: 16px;
}

.stage-nav .level-switch-trigger path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.level-switch-layer {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 5, 27, 0.58);
  backdrop-filter: blur(12px);
}

.level-switch-layer[hidden] { display: none; }

.level-switch-dialog {
  width: min(420px, 100%);
  padding: 22px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  color: #241244;
  background:
    radial-gradient(circle at 86% 0%, rgba(154, 247, 218, 0.72), transparent 30%),
    linear-gradient(145deg, #fff, #f6efff 58%, #e8fffb);
  box-shadow: 0 28px 64px rgba(4, 2, 18, 0.42);
}

.level-switch-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.level-switch-dialog header span {
  color: #0b99a4;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.level-switch-dialog h2 {
  margin: 3px 0 0;
  font-size: 25px;
}

.level-switch-dialog header > button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #241244;
  background: rgba(255, 255, 255, 0.82);
  font-size: 24px;
  font-weight: 1000;
}

.level-switch-dialog > p {
  margin: 14px 0 16px;
  color: #6f6485;
  font-size: 13px;
  font-weight: 800;
}

.level-switch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.level-switch-grid button {
  min-height: 50px;
  border: 1px solid rgba(84, 53, 130, 0.12);
  border-radius: 17px;
  color: #352450;
  background: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(42, 20, 80, 0.08);
}

.level-switch-grid button:first-child { grid-column: span 3; }

.level-switch-grid button.current {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff4f90, #7656e8);
  box-shadow: 0 10px 22px rgba(118, 86, 232, 0.28);
}

.stage-scroll {
  position: relative;
  z-index: 2;
  height: calc(100% - 94px);
  padding: 8px 20px 88px;
  overflow: auto;
}

.stage-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.stage-hero {
  position: relative;
  min-height: 196px;
  display: grid;
  grid-template-columns: 1fr 114px;
  align-items: end;
  gap: 8px;
  padding: 24px 18px 20px;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.56), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08));
  border: 2px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    0 12px 0 rgba(16, 6, 44, 0.16),
    0 26px 34px rgba(16, 6, 44, 0.22);
}

.stage-hero::before {
  content: "meow";
  position: absolute;
  left: -8px;
  bottom: -24px;
  color: rgba(255, 255, 255, 0.12);
  font-size: 76px;
  font-weight: 1000;
  transform: rotate(-8deg);
}

.stage-hero .eyebrow {
  color: #ffe65d;
}

.stage-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 190px;
  margin: 8px 0 10px;
  color: white;
  font-size: 34px;
  line-height: 0.98;
  text-shadow: 0 4px 10px rgba(21, 9, 58, 0.22);
}

.stage-hero p:last-child {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.stage-hero img {
  position: relative;
  z-index: 1;
  width: 124px;
  height: 124px;
  object-fit: contain;
  filter:
    drop-shadow(0 6px 0 rgba(255, 255, 255, 0.8))
    drop-shadow(0 20px 18px rgba(16, 6, 44, 0.28));
}

.stage-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 18px 0;
}

.stage-summary article {
  min-height: 76px;
  padding: 13px 8px 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  color: #21143f;
  text-align: center;
  box-shadow:
    0 8px 0 rgba(16, 6, 44, 0.12),
    0 14px 20px rgba(16, 6, 44, 0.18);
}

.stage-summary b,
.stage-summary span {
  display: block;
}

.stage-summary b {
  margin-bottom: 6px;
  font-size: 20px;
  line-height: 1;
  font-weight: 1000;
}

.stage-summary span {
  color: rgba(33, 20, 63, 0.62);
  font-size: 11px;
  font-weight: 900;
}

.level-stack {
  display: grid;
  gap: 12px;
}

.level-card {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 106px;
  padding: 13px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.96);
  color: #21143f;
  text-align: left;
  box-shadow:
    0 9px 0 rgba(16, 6, 44, 0.12),
    0 18px 24px rgba(16, 6, 44, 0.18);
}

button.level-card {
  cursor: pointer;
}

button.level-card:active {
  transform: translateY(3px);
  box-shadow:
    0 6px 0 rgba(16, 6, 44, 0.12),
    0 12px 18px rgba(16, 6, 44, 0.16);
}

.level-code {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: white;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffcf2e, #ff7c48);
  box-shadow:
    0 6px 0 rgba(33, 20, 63, 0.16),
    0 12px 18px rgba(33, 20, 63, 0.18);
  font-size: 19px;
  font-weight: 1000;
}

.level-card b,
.level-card p,
.level-card small {
  display: block;
}

.level-card b {
  margin-bottom: 5px;
  font-size: 19px;
  line-height: 1.1;
  font-weight: 1000;
}

.level-card p {
  margin: 0 0 6px;
  color: rgba(33, 20, 63, 0.66);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.level-card small {
  color: #1b9d89;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 900;
}

.level-content-card {
  align-items: start;
  min-height: auto;
  padding: 14px;
}

.level-content-card .level-code {
  position: sticky;
  top: 0;
}

.series-mini-list {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(33, 20, 63, 0.1);
}

.series-mini-list span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #13b995, #0b9fca);
  font-size: 10px;
  font-weight: 1000;
}

.series-mini-list strong {
  display: block;
  margin-top: 4px;
  color: #21143f;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 1000;
}

.series-mini-list small {
  margin-bottom: 3px;
  color: rgba(33, 20, 63, 0.6);
}

.stage-note {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.stage-note img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(16, 6, 44, 0.22));
}

.stage-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.stage-young {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 230, 93, 0.62), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(255, 94, 136, 0.42), transparent 26%),
    linear-gradient(180deg, #13b995 0%, #087fc0 100%);
}

.stage-middle {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 229, 82, 0.58), transparent 25%),
    radial-gradient(circle at 82% 18%, rgba(69, 101, 255, 0.48), transparent 28%),
    linear-gradient(180deg, #c81b5d 0%, #7b2aa4 52%, #45217a 100%);
}

.stage-middle .level-code {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ff2d80, #7b4dff);
}

.stage-middle .level-card small {
  color: #f20f7a;
}

.stage-teen {
  background:
    radial-gradient(circle at 13% 10%, rgba(69, 101, 255, 0.58), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(255, 207, 46, 0.28), transparent 24%),
    linear-gradient(180deg, #321b68 0%, #17113f 54%, #0d1538 100%);
}

.stage-teen .stage-hero {
  background:
    radial-gradient(circle at 76% 12%, rgba(255, 207, 46, 0.38), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
}

.stage-teen .level-code {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #4565ff, #1ec6d6);
}

.stage-teen .level-card small {
  color: #4565ff;
}

.level-detail-screen {
  scroll-margin-top: 24px;
  color: white;
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 230, 93, 0.5), transparent 24%),
    radial-gradient(circle at 90% 18%, rgba(255, 79, 154, 0.38), transparent 28%),
    linear-gradient(180deg, #12b98f 0%, #0c7fbe 100%);
}

.level-detail-screen::before {
  background: #07090d;
}

.level-scroll {
  position: relative;
  z-index: 2;
  height: calc(100% - 94px);
  padding: 8px 20px 88px;
  overflow: auto;
}

.level-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.level-hero {
  min-height: 178px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: center;
  padding: 22px 16px;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.52), transparent 25%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  border: 2px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    0 12px 0 rgba(16, 6, 44, 0.16),
    0 26px 34px rgba(16, 6, 44, 0.22);
}

.level-hero .level-code {
  width: 70px;
  height: 70px;
  border-radius: 24px;
  font-size: 24px;
}

.level-hero .eyebrow {
  color: #ffe65d;
}

.level-hero h2 {
  margin: 8px 0 8px;
  color: white;
  font-size: 28px;
  line-height: 1.04;
  text-shadow: 0 4px 10px rgba(21, 9, 58, 0.22);
}

.level-hero p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
}

.category-stack {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.category-stack article {
  min-height: 98px;
  padding: 16px;
  border-radius: 26px;
  color: #21143f;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 8px 0 rgba(16, 6, 44, 0.12),
    0 16px 22px rgba(16, 6, 44, 0.16);
}

.category-stack b {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 1000;
}

.category-stack small {
  display: block;
  margin-bottom: 8px;
  color: #0f9a8b;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 900;
}

.category-stack p {
  margin: 0;
  color: rgba(33, 20, 63, 0.66);
  font-size: 12px;
  line-height: 1.42;
  font-weight: 800;
}

.level-middle {
  background:
    radial-gradient(circle at 13% 8%, rgba(255, 229, 82, 0.5), transparent 25%),
    radial-gradient(circle at 82% 20%, rgba(69, 101, 255, 0.48), transparent 28%),
    linear-gradient(180deg, #c81b5d 0%, #7b2aa4 52%, #45217a 100%);
}

.level-middle .level-code {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ff2d80, #7b4dff);
}

.level-teen {
  background:
    radial-gradient(circle at 13% 10%, rgba(69, 101, 255, 0.58), transparent 26%),
    radial-gradient(circle at 84% 18%, rgba(255, 207, 46, 0.28), transparent 24%),
    linear-gradient(180deg, #321b68 0%, #17113f 54%, #0d1538 100%);
}

.level-teen .level-code {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #4565ff, #1ec6d6);
}

.level-library-screen {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 227, 92, 0.58), transparent 25%),
    radial-gradient(circle at 88% 8%, rgba(90, 238, 211, 0.38), transparent 27%),
    radial-gradient(circle at 50% 86%, rgba(255, 68, 139, 0.25), transparent 34%),
    linear-gradient(180deg, #27135f 0%, #113f62 46%, #078a82 100%);
}

.level-library-screen::before,
.film-library-screen::before {
  background: #071425;
}

.library-hero {
  position: relative;
  min-height: 210px;
  padding: 22px 18px;
  overflow: hidden;
  border-radius: 36px;
  color: white;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.34), transparent 22%),
    radial-gradient(circle at 82% 26%, rgba(255, 227, 92, 0.28), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    0 12px 0 rgba(7, 13, 48, 0.2),
    0 28px 34px rgba(7, 13, 48, 0.24);
}

.library-hero::after {
  content: "meow";
  position: absolute;
  left: 16px;
  bottom: -18px;
  color: rgba(255, 255, 255, 0.08);
  font-size: 76px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0;
}

.library-hero > div {
  position: relative;
  z-index: 2;
  max-width: 230px;
}

.library-chip {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 24px;
  color: white;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(145deg, #ffcf4f, #ff6e42);
  font-size: 23px;
  font-weight: 1000;
  box-shadow: 0 11px 0 rgba(15, 8, 46, 0.18);
}

.library-hero .eyebrow,
.film-hero .eyebrow {
  color: #ffe55f;
}

.library-hero h2 {
  margin: 8px 0 8px;
  font-size: 42px;
  line-height: 0.96;
  font-weight: 1000;
}

.library-hero p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 850;
}

.library-hero img {
  position: absolute;
  right: -14px;
  bottom: -2px;
  z-index: 2;
  width: 136px;
  height: 136px;
  object-fit: contain;
  filter: drop-shadow(0 20px 18px rgba(7, 13, 48, 0.28));
}

.library-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 18px;
}

.library-stats article {
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 12px 8px;
  border-radius: 24px;
  color: #201245;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 0 rgba(7, 13, 48, 0.15);
}

.library-stats b,
.library-stats span {
  display: block;
  text-align: center;
}

.library-stats b {
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
}

.library-stats span {
  margin-top: 7px;
  color: rgba(32, 18, 69, 0.58);
  font-size: 11px;
  font-weight: 900;
}

.folder-stack {
  display: grid;
  gap: 14px;
}

.category-folder {
  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 14px;
  overflow: hidden;
  border-radius: 30px;
  color: #201245;
  text-align: left;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.62), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #eefbff 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    0 10px 0 rgba(7, 13, 48, 0.14),
    0 22px 24px rgba(7, 13, 48, 0.16);
}

.category-folder::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 108px;
  height: 20px;
  border-radius: 0 0 18px 18px;
  background: rgba(255, 255, 255, 0.52);
}

.category-folder::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(32, 18, 69, 0.3);
  font-size: 26px;
  font-weight: 1000;
}

.category-folder div,
.category-folder .folder-index {
  position: relative;
  z-index: 2;
}

.folder-index {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: white;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ff2d80, #7b4dff);
  box-shadow: 0 9px 0 rgba(38, 16, 82, 0.15);
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
}

.category-folder b {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.05;
  font-weight: 1000;
}

.category-folder p {
  margin: 0;
  color: rgba(32, 18, 69, 0.62);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.folder-abc {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #fff9d7 0%, #dffcff 100%);
}

.folder-number {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #e7ffbf 0%, #def5ff 100%);
}

.folder-song {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #ffe4f0 0%, #f0e4ff 100%);
}

.folder-words {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #fff0bf 0%, #e7fff0 100%);
}

.l1-library-screen {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 222, 78, 0.55), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(255, 97, 139, 0.5), transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(130, 101, 255, 0.32), transparent 34%),
    linear-gradient(180deg, #6a226c 0%, #b13b62 42%, #f08f4b 100%);
}

.l1-library-screen .library-chip,
.l1-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffcc4d, #ff5d6c 52%, #8c54ff 100%);
}

.l1-library-screen .library-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.3), transparent 24%),
    radial-gradient(circle at 82% 26%, rgba(255, 214, 85, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.l1-folder-home {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #fff1c8 0%, #ffe0e9 100%);
}

.l1-folder-emotion {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #ffe3f0 0%, #eee2ff 100%);
}

.l1-folder-friends {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #e7ffdc 0%, #ffefc5 100%);
}

.l1-folder-task {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #e6f3ff 0%, #ffe5d0 100%);
}

.l2-library-screen {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 230, 105, 0.48), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(111, 180, 255, 0.45), transparent 27%),
    radial-gradient(circle at 44% 90%, rgba(255, 116, 104, 0.3), transparent 34%),
    linear-gradient(180deg, #26317b 0%, #4356b1 42%, #6db9d7 100%);
}

.l2-library-screen .library-chip,
.l2-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffe15d, #5fb7ff 48%, #7b5dff 100%);
}

.l2-library-screen .library-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.3), transparent 24%),
    radial-gradient(circle at 82% 26%, rgba(255, 232, 122, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.l2-folder-story {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #fff3bd 0%, #e4f1ff 100%);
}

.l2-folder-book {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #eee8ff 0%, #fff1c9 100%);
}

.l2-folder-adventure {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #dff8ff 0%, #ffe1dd 100%);
}

.l2-folder-knowledge {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #e9ffd7 0%, #e6eaff 100%);
}

.l3-library-screen {
  background:
    radial-gradient(circle at 14% 10%, rgba(127, 255, 188, 0.42), transparent 24%),
    radial-gradient(circle at 84% 14%, rgba(93, 113, 255, 0.52), transparent 27%),
    radial-gradient(circle at 50% 90%, rgba(255, 211, 91, 0.26), transparent 34%),
    linear-gradient(180deg, #151a5c 0%, #26399a 42%, #06a99b 100%);
}

.l3-library-screen .library-chip,
.l3-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #b8ff63, #35d8d0 48%, #5265ff 100%);
}

.l3-library-screen .library-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(184, 255, 99, 0.22), transparent 26%),
    radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
}

.l4-library-screen {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 240, 91, 0.5), transparent 24%),
    radial-gradient(circle at 82% 11%, rgba(255, 118, 90, 0.4), transparent 27%),
    radial-gradient(circle at 52% 90%, rgba(88, 225, 255, 0.34), transparent 34%),
    linear-gradient(180deg, #063a59 0%, #08768f 43%, #12b68b 100%);
}

.l4-library-screen .library-chip,
.l4-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffe15d, #ff7a4f 50%, #13c4b2 100%);
}

.l4-library-screen .library-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 225, 93, 0.22), transparent 26%),
    radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.23), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.l5-library-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 88, 150, 0.45), transparent 25%),
    radial-gradient(circle at 84% 12%, rgba(255, 210, 74, 0.36), transparent 27%),
    radial-gradient(circle at 48% 88%, rgba(93, 114, 255, 0.32), transparent 35%),
    linear-gradient(180deg, #34156e 0%, #7a2ca0 45%, #e95263 100%);
}

.l5-library-screen .library-chip,
.l5-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffdf54, #ff4c84 48%, #7a55ff 100%);
}

.l5-library-screen .library-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 218, 83, 0.22), transparent 26%),
    radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
}

.l6-library-screen {
  background:
    radial-gradient(circle at 14% 10%, rgba(0, 220, 255, 0.38), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(255, 62, 140, 0.32), transparent 27%),
    linear-gradient(180deg, #081331 0%, #132468 48%, #5b2d94 100%);
}

.l6-library-screen .library-chip,
.l6-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #00e5ff, #5868ff 50%, #ff4e9a 100%);
}

.l6-library-screen .library-hero {
  background:
    radial-gradient(circle at 18% 16%, rgba(0, 229, 255, 0.2), transparent 27%),
    radial-gradient(circle at 84% 28%, rgba(255, 78, 154, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055));
}

.l7-library-screen {
  background:
    radial-gradient(circle at 15% 11%, rgba(255, 214, 83, 0.44), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(88, 238, 188, 0.34), transparent 27%),
    linear-gradient(180deg, #173018 0%, #24714e 45%, #0a9f8f 100%);
}

.l7-library-screen .library-chip,
.l7-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #fff05c, #46d982 50%, #00a9c7 100%);
}

.l7-library-screen .library-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 240, 92, 0.2), transparent 26%),
    radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
}

.l8-library-screen {
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 66, 127, 0.42), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(255, 210, 88, 0.36), transparent 27%),
    radial-gradient(circle at 46% 92%, rgba(91, 224, 255, 0.28), transparent 34%),
    linear-gradient(180deg, #19072f 0%, #391069 44%, #891f72 100%);
}

.l8-library-screen .library-chip,
.l8-library-screen .folder-index {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, #ffde59, #ff3d7f 48%, #8a55ff 100%);
}

.l8-library-screen .library-hero {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 222, 89, 0.2), transparent 26%),
    radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.055));
}

.l3-library-screen .category-folder,
.l4-library-screen .category-folder,
.l5-library-screen .category-folder,
.l6-library-screen .category-folder,
.l7-library-screen .category-folder,
.l8-library-screen .category-folder {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #e8fbff 100%);
}

.l3-library-screen .category-folder:nth-child(2n),
.l4-library-screen .category-folder:nth-child(2n),
.l5-library-screen .category-folder:nth-child(2n),
.l6-library-screen .category-folder:nth-child(2n),
.l7-library-screen .category-folder:nth-child(2n),
.l8-library-screen .category-folder:nth-child(2n) {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, #fff7d6 0%, #eef0ff 100%);
}

.film-library-screen {
  scroll-margin-top: 24px;
  color: #123047;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 222, 78, 0.6), transparent 20%),
    radial-gradient(circle at 86% 12%, rgba(255, 88, 150, 0.42), transparent 22%),
    linear-gradient(180deg, #10b9a5 0%, #07917f 45%, #0d6f68 100%);
}

.l1-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 230, 93, 0.55), transparent 21%),
    radial-gradient(circle at 84% 12%, rgba(255, 112, 158, 0.45), transparent 23%),
    linear-gradient(180deg, #a72d74 0%, #c94b5e 42%, #e88945 100%);
}

.l1-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, #421f72 0%, #c94468 54%, #ef8d49 100%);
}

.l2-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 230, 105, 0.5), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(116, 190, 255, 0.42), transparent 24%),
    linear-gradient(180deg, #29317b 0%, #485ab4 42%, #5da9cb 100%);
}

.l2-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, #26317b 0%, #5f67c9 54%, #39a9c8 100%);
}

.l3-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(127, 255, 188, 0.42), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(93, 113, 255, 0.45), transparent 24%),
    linear-gradient(180deg, #151a5c 0%, #26399a 42%, #06a99b 100%);
}

.l3-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.26), transparent 28%),
    linear-gradient(135deg, #111950 0%, #365fd8 52%, #08b9a3 100%);
}

.l4-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 240, 91, 0.5), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 118, 90, 0.38), transparent 24%),
    linear-gradient(180deg, #063a59 0%, #08768f 43%, #12b68b 100%);
}

.l4-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.27), transparent 28%),
    linear-gradient(135deg, #063a59 0%, #0f9c93 52%, #ff8a4a 100%);
}

.l5-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 88, 150, 0.45), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 210, 74, 0.36), transparent 24%),
    linear-gradient(180deg, #34156e 0%, #7a2ca0 45%, #e95263 100%);
}

.l5-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.25), transparent 28%),
    linear-gradient(135deg, #2b115f 0%, #8e33bd 50%, #ff5570 100%);
}

.l6-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(0, 220, 255, 0.34), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 62, 140, 0.3), transparent 24%),
    linear-gradient(180deg, #081331 0%, #132468 48%, #5b2d94 100%);
}

.l6-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, #081331 0%, #1e3c93 52%, #7a38a4 100%);
}

.l7-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 214, 83, 0.42), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(88, 238, 188, 0.32), transparent 24%),
    linear-gradient(180deg, #173018 0%, #24714e 45%, #0a9f8f 100%);
}

.l7-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(135deg, #173018 0%, #2e8e54 52%, #00a9c7 100%);
}

.l8-film-screen {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 66, 127, 0.42), transparent 22%),
    radial-gradient(circle at 84% 12%, rgba(255, 210, 88, 0.34), transparent 24%),
    linear-gradient(180deg, #19072f 0%, #391069 44%, #891f72 100%);
}

.l8-film-screen .film-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.23), transparent 28%),
    linear-gradient(135deg, #19072f 0%, #58149c 52%, #db2f75 100%);
}

.film-scroll {
  position: relative;
  z-index: 2;
  height: calc(100% - 94px);
  padding: 8px 20px 88px;
  overflow: auto;
}

.film-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.film-hero {
  position: relative;
  min-height: 172px;
  padding: 22px 150px 20px 20px;
  overflow: hidden;
  border-radius: 34px 34px 46px 22px;
  color: white;
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, #32206f 0%, #168e92 100%);
  box-shadow:
    0 11px 0 rgba(6, 64, 72, 0.22),
    0 24px 28px rgba(6, 64, 72, 0.24);
}

.film-hero h2 {
  margin: 8px 0 8px;
  font-size: 33px;
  line-height: 1.02;
  font-weight: 1000;
}

.film-hero p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 850;
}

.film-hero img {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: 146px;
  height: 146px;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(5, 38, 58, 0.3));
}

.film-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-top: 16px;
  padding-bottom: 28px;
}

.film-card {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 14px;
  color: #201245;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(6, 64, 72, 0.16);
  clip-path: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.film-card:hover,
.film-card:focus-visible {
  transform: translateY(-3px);
  filter: saturate(1.08);
  outline: none;
}

.film-card::before {
  content: none;
}

.film-card span,
.film-card img,
.film-card b,
.film-card p {
  position: relative;
}

.film-card span {
  display: none;
}

.film-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.02);
  background: linear-gradient(145deg, #70f0d6, #8b5cf6);
}

.film-card b {
  display: -webkit-box;
  min-height: 0;
  margin: 9px 10px 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #201245;
  font-size: 14px;
  line-height: 1.18;
  font-weight: 1000;
  text-shadow: none;
}

.film-card p {
  display: none;
  margin: 5px 10px 12px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: rgba(32, 18, 69, 0.55);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 850;
  text-shadow: none;
}

.cover-teal {
  background: linear-gradient(145deg, #70f0d6 0%, #37c0db 46%, #5b73ff 100%);
}

.cover-pink {
  background: linear-gradient(145deg, #ffd6e7 0%, #ff6aa7 48%, #a85cf0 100%);
}

.cover-yellow {
  background: linear-gradient(145deg, #fff1a6 0%, #ffb35d 52%, #ff6d78 100%);
}

.cover-blue {
  background: linear-gradient(145deg, #c8f5ff 0%, #58bfff 48%, #6f63ff 100%);
}

.cover-purple {
  background: linear-gradient(145deg, #e8d2ff 0%, #9b6dff 48%, #5c35cc 100%);
}

.cover-green {
  background: linear-gradient(145deg, #eaff9f 0%, #74e18f 48%, #0ea995 100%);
}

.cover-orange {
  background: linear-gradient(145deg, #ffe2a3 0%, #ff9a54 48%, #ff4f75 100%);
}

.headline {
  padding: 16px 24px 6px;
}

.headline h2 {
  margin: 8px 0 12px;
  font-size: 48px;
  line-height: 0.96;
  letter-spacing: 0;
}

.subcopy,
.journey-card p,
.story-world p,
.word-preview span,
.coach span,
.line p,
.sleep-stage p,
.audio-card span,
.unlock-note span,
.component-list span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.journey-card {
  position: relative;
  min-height: 244px;
  margin: 16px 22px;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 18%, rgba(201, 242, 220, 0.95), transparent 32%),
    linear-gradient(145deg, #ffffff, #eef6ff);
  border: 1px solid rgba(47, 128, 237, 0.12);
}

.journey-copy {
  position: relative;
  z-index: 2;
  width: 58%;
  padding: 24px 0 0 22px;
}

.journey-copy span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.journey-copy strong {
  display: block;
  margin: 8px 0 6px;
  font-size: 29px;
  line-height: 1.06;
}

.journey-card img {
  position: absolute;
  right: -8px;
  bottom: -18px;
  width: 190px;
  height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(16, 24, 32, 0.12));
}

.progress,
.thin-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(16, 24, 32, 0.08);
}

.progress {
  width: 142px;
  margin-top: 22px;
}

.progress i,
.thin-progress i {
  display: block;
  width: 48%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #83d279);
}

.learning-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 22px 0;
}

.learning-lanes button {
  height: 126px;
  padding: 12px 8px;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 22px rgba(16, 24, 32, 0.06);
}

.learning-lanes img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.learning-lanes span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
}

.lesson-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 0;
}

.title-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #f0ecff;
}

.title-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.lesson-top h2 {
  margin: 5px 0 0;
  font-size: 31px;
}

.thin-progress {
  margin: 26px 24px 0;
}

.story-world {
  margin: 22px 20px 0;
  overflow: hidden;
  border-radius: 36px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(16, 24, 32, 0.08);
}

.painted-scene {
  position: relative;
  height: 392px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.92) 100%),
    linear-gradient(180deg, #dcecf8, #edf5e9 70%, #f8fbf7);
}

.painted-scene .sun {
  position: absolute;
  right: 46px;
  top: 34px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 227, 116, 0.9);
  filter: blur(1px);
}

.mountain {
  position: absolute;
  bottom: 118px;
  width: 240px;
  height: 190px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #b8cee0, #f4f7f8);
}

.m1 {
  left: -24px;
}

.m2 {
  right: -22px;
  bottom: 96px;
  background: linear-gradient(180deg, #9fbdd4, #eef4f5);
}

.river {
  position: absolute;
  left: 92px;
  bottom: 0;
  width: 118px;
  height: 270px;
  transform: skewX(-15deg);
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(102, 180, 217, 0.34), #5ea7c8);
}

.tower {
  position: absolute;
  right: 18px;
  bottom: 80px;
  width: 108px;
  height: 112px;
  border-radius: 16px 16px 8px 8px;
  background:
    linear-gradient(45deg, transparent 45%, #26343d 46% 54%, transparent 55%) center 18px / 80px 28px no-repeat,
    linear-gradient(180deg, #f6f1db, #becad0);
  box-shadow: inset 0 0 0 4px rgba(45, 65, 80, 0.14);
}

.painted-scene img {
  position: absolute;
  right: -16px;
  bottom: -18px;
  width: 208px;
  height: 208px;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgba(16, 24, 32, 0.16));
}

.world-copy {
  padding: 18px 22px 22px;
}

.world-copy h3 {
  margin: 0 0 8px;
  font-size: 35px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.word-preview {
  margin: 12px 20px;
  padding: 17px;
  border-radius: 26px;
  background: #eef7f0;
}

.word-preview div {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.word-preview b {
  padding: 10px 12px;
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
}

.video-screen {
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 4%, rgba(252, 93, 154, 0.42), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(32, 214, 202, 0.3), transparent 34%),
    linear-gradient(155deg, #182b6f 0%, #122a58 46%, #073e55 100%);
}

.video-screen.landscape-mode {
  width: min(844px, calc(100vw - 32px));
  height: min(390px, calc(100vh - 56px));
  z-index: 30;
}

.video-screen.landscape-mode::before,
.video-screen.landscape-mode::after {
  display: none;
}

.video-head {
  display: grid;
  grid-template-columns: 48px 1fr 54px;
  align-items: center;
  gap: 10px;
  height: 82px;
  padding: 18px 18px 10px;
  color: white;
  background: linear-gradient(180deg, rgba(9, 16, 44, 0.78), rgba(9, 16, 44, 0));
}

.video-head button {
  box-shadow: none;
}

.video-head > button:first-child {
  width: 46px;
  height: 46px;
  color: #291548;
  background: rgba(255, 255, 255, 0.92);
}

.video-head div {
  min-width: 0;
}

.video-head span {
  display: block;
  color: #ffdf69;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.video-head strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  font-size: 23px;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-caption-badge {
  width: 50px;
  height: 40px;
  border-radius: 18px;
  color: #241244;
  background: #fff;
  font-size: 15px;
  font-weight: 1000;
}

.video-caption-badge.active {
  background: linear-gradient(135deg, #fff46b, #ff70b0 58%, #8b5cff);
  color: #fff;
}

.cat-toggle {
  width: 58px;
  height: 32px;
  padding: 3px;
  border-radius: 999px;
  background: #d7dde2;
}

.cat-toggle span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 42%, #fff 0 28%, transparent 30%),
    radial-gradient(circle at 63% 42%, #fff 0 28%, transparent 30%),
    linear-gradient(#fff, #fff);
  box-shadow: 0 5px 12px rgba(16, 24, 32, 0.18);
}

.cat-toggle.active {
  background: var(--green);
}

.cat-toggle.active span {
  transform: translateX(26px);
}

.cat-toggle.violet.active {
  background: var(--violet);
}

.video-scroll {
  height: calc(100% - 82px);
  overflow-y: auto;
  padding: 0 18px 24px;
  scrollbar-width: none;
}

.video-screen.landscape-mode .video-head,
.video-screen.landscape-mode .player-top,
.video-screen.landscape-mode .video-quick-actions,
.video-screen.landscape-mode .speed-popover,
.video-screen.landscape-mode .caption-control,
.video-screen.landscape-mode .video-word-dock,
.video-screen.landscape-mode .caption-focus {
  display: none;
}

.video-screen.landscape-mode .video-scroll {
  height: 100%;
  padding: 12px;
  overflow: hidden;
}

.video-screen.landscape-mode .video-player-card {
  height: 100%;
  padding: 0;
  border-radius: 28px;
}

.video-screen.landscape-mode .player-screen {
  height: 100%;
  border-radius: 26px;
}

.video-scroll::-webkit-scrollbar {
  display: none;
}

.video-player-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(11, 21, 55, 0.56);
  box-shadow: 0 24px 44px rgba(2, 8, 31, 0.35);
}

.player-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 900;
}

.player-top span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-top b,
.caption-reading-toggle {
  flex: 0 0 auto;
  color: #ffdf69;
}

.caption-reading-toggle {
  padding: 2px 7px;
  border: 1px solid rgba(255, 223, 105, 0.42);
  border-radius: 999px;
  background: rgba(255, 223, 105, 0.08);
  font: inherit;
  cursor: pointer;
}

.caption-reading-toggle:not(.active) {
  color: rgba(255, 255, 255, 0.68);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.player-screen {
  position: relative;
  overflow: hidden;
  height: 232px;
  border-radius: 24px;
  background: #081527;
}

.player-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.08);
}

.video-active-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 38px;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.video-active-caption[hidden] { display: none; }

.video-active-caption strong,
.video-active-caption p {
  width: fit-content;
  max-width: 94%;
  margin: 0;
  padding: 3px 8px;
  border-radius: 8px;
  color: #fff;
  background: rgba(3, 8, 22, 0.58);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(5px);
}

.video-active-caption strong {
  font-size: clamp(13px, 3.5vw, 18px);
  line-height: 1.2;
}

.video-active-caption p {
  font-size: clamp(11px, 3vw, 15px);
  font-weight: 850;
  line-height: 1.2;
}

.video-screen.hide-en .video-active-caption strong,
.video-screen.hide-zh .video-active-caption p,
.video-screen.hide-en .fullscreen-caption-current strong,
.video-screen.hide-zh .fullscreen-caption-current p,
.player-screen.hide-en .video-active-caption strong,
.player-screen.hide-zh .video-active-caption p,
.player-screen.hide-en .fullscreen-caption-current strong,
.player-screen.hide-zh .fullscreen-caption-current p { display: none; }

/* Source captions are pixels in the video and cannot be switched off by the web player.
   Suppress only the matching DOM overlay so the same language is never painted twice. */
.video-screen.burned-in-en .video-active-caption strong { display: none; }

.video-screen.burned-in-zh .video-active-caption p { display: none; }

.video-screen.burned-in-en [data-caption-toggle="en"]:disabled,
.video-screen.burned-in-zh [data-caption-toggle="zh"]:disabled,
.video-screen.burned-in-en.burned-in-zh [data-caption-toggle="all"]:disabled {
  opacity: 0.82;
  cursor: default;
}

.fullscreen-caption-dock {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  z-index: 32;
  display: none;
  align-items: center;
  gap: 8px;
  width: min(330px, calc(100vw - 86px));
  transform: translateY(-50%);
  color: #fff;
  pointer-events: auto;
  touch-action: manipulation;
}

.fullscreen-caption-handle,
.fullscreen-caption-panel {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(3, 8, 22, 0.58);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.fullscreen-caption-handle {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
}

.fullscreen-caption-panel {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
}

.fullscreen-caption-panel header,
.fullscreen-caption-panel nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fullscreen-caption-panel header {
  justify-content: space-between;
  margin-bottom: 9px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.fullscreen-caption-panel header:active { cursor: grabbing; }

.fullscreen-caption-panel header strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fullscreen-caption-panel header strong i {
  width: 18px;
  height: 10px;
  border-top: 2px solid rgba(255, 255, 255, 0.68);
  border-bottom: 2px solid rgba(255, 255, 255, 0.68);
}

.fullscreen-caption-panel header > button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.fullscreen-caption-panel nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.fullscreen-caption-panel nav button {
  min-height: 32px;
  padding: 0 5px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
  font-weight: 900;
}

.fullscreen-caption-panel nav button.active {
  color: #241244;
  background: linear-gradient(135deg, #fff46b, #9af7da);
}

.fullscreen-caption-current {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.fullscreen-caption-current strong,
.fullscreen-caption-current p {
  margin: 0;
  color: #fff;
  font-size: clamp(13px, 1.8vw, 19px);
  line-height: 1.28;
}

.fullscreen-caption-current p {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(12px, 1.5vw, 17px);
  font-weight: 800;
}

.fullscreen-caption-dock.collapsed {
  width: auto;
}

.fullscreen-caption-dock.collapsed .fullscreen-caption-panel { display: none; }

.player-screen:fullscreen,
.player-screen:-webkit-full-screen,
.player-screen.fullscreen-fallback {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  background: #000;
}

.player-screen:fullscreen video,
.player-screen:-webkit-full-screen video,
.player-screen.fullscreen-fallback video {
  object-fit: contain;
  filter: none;
}

.player-screen:fullscreen .fullscreen-caption-dock,
.player-screen:-webkit-full-screen .fullscreen-caption-dock,
.player-screen.fullscreen-fallback .fullscreen-caption-dock {
  display: flex;
}

.player-screen:fullscreen .video-active-caption,
.player-screen:-webkit-full-screen .video-active-caption,
.player-screen.fullscreen-fallback .video-active-caption {
  display: none;
}

.player-screen.fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 1000;
  isolation: isolate;
}

body.video-player-fullscreen-fallback {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

.player-screen.fullscreen-fallback video {
  pointer-events: none;
}

.player-screen.fullscreen-fallback button,
.player-screen.fullscreen-fallback .video-progress,
.player-screen.fullscreen-fallback .fullscreen-caption-dock {
  pointer-events: auto;
  touch-action: manipulation;
}

/* Runtime information architecture: real categories always precede level content. */
.level-category-panel {
  margin: 14px 0 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 245, 120, 0.28), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(230, 255, 250, 0.94));
  box-shadow: 0 14px 24px rgba(13, 22, 66, 0.22);
}

.level-category-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.level-category-head span,
.level-category-head strong,
.level-category-head p { display: block; margin: 0; }
.level-category-head span { color: #0b9f96; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.level-category-head strong { margin-top: 4px; color: #21114f; font-size: 18px; line-height: 1.15; }
.level-category-head p { max-width: 45%; color: #6b6b83; font-size: 11px; line-height: 1.35; text-align: right; }

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

.level-category-choice {
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(80, 69, 130, 0.12);
  border-radius: 17px;
  color: #241450;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 12px rgba(31, 19, 83, 0.09);
  text-align: left;
  touch-action: manipulation;
}

.level-category-choice span {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #ff3e8a, #7f43ec);
  font-size: 11px;
  font-weight: 950;
}

.level-category-choice strong {
  align-self: end;
  overflow: hidden;
  display: -webkit-box;
  min-height: 30px;
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.level-category-choice b { align-self: start; color: #7a768e; font-size: 10px; }
.level-category-choice[aria-pressed="true"] { border-color: transparent; color: #fff; background: linear-gradient(135deg, #24104e, #55349e); }
.level-category-choice[aria-pressed="true"] b { color: rgba(255,255,255,.72); }
.level-category-choice[aria-pressed="true"] span { color: #23134d; background: linear-gradient(145deg, #fff56c, #89f5d4); }

.level-load-more {
  width: calc(100% - 36px);
  min-height: 48px;
  margin: 12px 18px 4px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #e93687, #6c36c8);
  font-weight: 950;
}

.level-content-empty { margin: 12px 18px; color: rgba(255,255,255,.78); text-align: center; }
.level-category-loading { min-height: 96px; }

/* Resource hub has one stable order: search, level, category, continue, featured, optional shelves, bedtime. */
.resource-search-card label { min-width: 0; flex: 1; }
.resource-search-card label span { margin-bottom: 3px; }
.resource-search-card input {
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #15213d;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}
.resource-search-card input::placeholder { color: #71798b; opacity: .82; }
.resource-search-card > button { width: 32px; height: 32px; border-radius: 50%; color: #23124f; background: rgba(35,18,79,.08); font-size: 20px; }

.hub-topic-strip #hubCategoryList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hub-topic-strip #hubCategoryList button { min-height: 62px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 10px 14px; }
.hub-topic-strip #hubCategoryList button::after { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.hub-topic-strip #hubCategoryList button strong {
  max-width: calc(100% - 22px);
  overflow: hidden;
  display: -webkit-box;
  color: #21114f;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hub-topic-strip #hubCategoryList button span { width: auto; height: auto; display: block; color: #7e778f; background: none; box-shadow: none; font-size: 10px; }

.hub-runtime-mount:empty { display: none; }
.hub-disclosure {
  margin: 12px 18px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  color: #fff;
  background: rgba(25, 29, 76, .28);
}
.hub-disclosure summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 950; }
.hub-disclosure summary b { color: rgba(255,255,255,.66); font-size: 11px; }
.hub-disclosure > section { padding-bottom: 12px; }
.resource-hub-hero-compact { min-height: 94px; margin-top: 16px; }
.resource-hub-hero-compact img { max-height: 82px; }
.hub-search-empty { margin: 10px 18px; padding: 22px; border-radius: 20px; color: #25154f; background: rgba(255,255,255,.94); text-align: center; }
.hub-search-empty p { margin: 6px 0 0; color: #777386; font-size: 12px; }

.subtitle-load-warning {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 209, 77, .68);
  border-radius: 13px;
  color: #3c2a00;
  background: #fff5bf;
  font-size: 12px;
  font-weight: 850;
}
.subtitle-load-warning button { margin-left: 8px; padding: 6px 10px; border-radius: 10px; color: #fff; background: #5a31b5; font-weight: 900; }

@media (min-width: 720px) {
  .level-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-topic-strip #hubCategoryList { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.video-fullscreen-exit {
  position: absolute;
  left: max(14px, env(safe-area-inset-left));
  top: max(14px, env(safe-area-inset-top));
  z-index: 40;
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 13px 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 8, 22, 0.58);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  font-weight: 900;
}

.video-fullscreen-exit svg {
  width: 20px;
  height: 20px;
}

.video-fullscreen-exit path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player-screen:fullscreen .video-fullscreen-exit,
.player-screen:-webkit-full-screen .video-fullscreen-exit,
.player-screen.fullscreen-fallback .video-fullscreen-exit { display: inline-flex; }

.player-screen .play,
.player-screen .video-progress,
.player-screen .video-time,
.player-screen .video-orientation-toggle {
  transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.player-screen.controls-hidden .play,
.player-screen.controls-hidden .video-progress,
.player-screen.controls-hidden .video-time,
.player-screen.controls-hidden .video-orientation-toggle {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.player-screen.controls-hidden .play {
  transform: translate(-50%, -50%) scale(0.92);
}

.video-mini-player {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  /* Leave the fixed learning navigation and its raised icons tappable. */
  bottom: calc(116px + env(safe-area-inset-bottom));
  z-index: 180;
  width: min(48vw, 230px);
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: rgba(11, 18, 43, 0.9);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
}

@media (max-height: 500px) and (orientation: landscape) {
  .video-mini-player { width: min(32vw, 180px); }
}

.video-mini-player[hidden] { display: none; }

.video-mini-player-stage .player-screen {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
}

.video-mini-player-stage .video-orientation-toggle,
.video-mini-player-stage .video-active-caption,
.video-mini-player-stage .fullscreen-caption-dock,
.video-mini-player-stage .video-time { display: none; }

.video-mini-player-stage .video-progress {
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
}

.video-mini-player-stage .play {
  width: 44px;
  height: 44px;
}

.video-mini-player-controls {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 6px;
  margin-top: 5px;
}

.video-mini-player-controls button {
  min-height: 36px;
  border-radius: 11px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 900;
}

.player-screen .play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, 0.42), transparent 27%),
    linear-gradient(145deg, rgba(255, 79, 144, 0.96), rgba(118, 86, 232, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 14px 32px rgba(25, 11, 66, 0.4),
    0 0 0 7px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

.player-screen .play svg {
  width: 40px;
  height: 40px;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(32, 12, 68, 0.28));
}

.player-screen .play path,
.player-screen .play rect { fill: currentColor; }

.player-screen .play[data-state="paused"] .pause-shape,
.player-screen .play[data-state="playing"] .play-shape { display: none; }

.player-screen .play[data-state="paused"] .play-shape,
.player-screen .play[data-state="playing"] .pause-shape { display: block; }

.player-screen .play[data-state="paused"] .play-shape { transform: translateX(1px); }

.player-screen .play:active {
  transform: translate(-50%, -50%) scale(0.94);
}

.video-progress {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 7px;
  overflow: visible;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  touch-action: none;
}

.video-progress::before {
  content: "";
  position: absolute;
  inset: -14px 0;
}

.video-progress i {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff46b, #22d5ce, #ff63a5);
}

.video-progress i::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: #22d5ce;
  box-shadow: 0 3px 10px rgba(2, 8, 31, 0.38);
}

.video-time {
  position: absolute;
  right: 18px;
  top: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 12, 33, 0.58);
  font-size: 11px;
  font-weight: 900;
}

.video-orientation-toggle {
  position: absolute;
  right: 18px;
  bottom: 38px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.34), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(23, 37, 76, 0.56));
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 12px 22px rgba(2, 8, 31, 0.32);
}

.video-orientation-toggle svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.video-orientation-toggle rect,
.video-orientation-toggle circle,
.video-orientation-toggle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.video-orientation-toggle path {
  stroke: currentColor;
}

.video-screen.landscape-mode .video-orientation-toggle {
  right: 16px;
  bottom: 16px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.38), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(23, 37, 76, 0.48));
}

.video-screen.landscape-mode .video-progress {
  left: 22px;
  right: 78px;
  bottom: 22px;
}

.video-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.video-quick-actions button {
  min-height: 40px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 1000;
  box-shadow: none;
}

.video-quick-actions button.active {
  color: #241244;
  background: linear-gradient(135deg, #fff46b, #9af7da);
}

.speed-popover {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.speed-popover[hidden] {
  display: none;
}

.speed-popover button {
  min-height: 32px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.11);
  font-size: 12px;
  font-weight: 1000;
  box-shadow: none;
}

.speed-popover button.selected {
  color: #241244;
  background: linear-gradient(135deg, #fff46b, #9af7da);
}

.caption-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.caption-control button {
  min-height: 39px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 900;
  box-shadow: none;
}

.caption-control .active {
  color: #251447;
  background: #fff;
  border-color: transparent;
}

.video-word-dock {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.video-word-dock.spotlight {
  border-color: rgba(255, 244, 107, 0.8);
  background: rgba(255, 244, 107, 0.18);
  box-shadow:
    0 0 0 4px rgba(255, 244, 107, 0.12),
    0 16px 30px rgba(2, 8, 31, 0.2);
  transform: translateY(-2px);
}

.video-word-dock span {
  padding: 0 2px;
  color: #ffdf69;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.video-word-dock button {
  min-width: 0;
  min-height: 34px;
  border-radius: 14px;
  color: #251447;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 1000;
  box-shadow: none;
}

.caption-focus {
  margin: 0;
  padding: 10px 14px;
  border: 2px solid rgba(170, 205, 232, 0.48);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 8%, rgba(255, 244, 107, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(132, 165, 190, 0.42), rgba(47, 86, 121, 0.42));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -24px 54px rgba(8, 27, 54, 0.22),
    0 20px 38px rgba(2, 8, 31, 0.22);
  backdrop-filter: blur(14px);
}

.caption-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 1px 8px;
}

.caption-focus-head div {
  min-width: 0;
}

.caption-focus-head strong,
.caption-focus-head span {
  display: block;
}

.caption-focus-head strong {
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
}

.caption-focus-head span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
}

.caption-focus-head button {
  flex: 0 0 auto;
  min-width: 54px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.caption-focus.is-collapsed .caption-focus-head {
  padding-bottom: 2px;
}

.caption-focus.is-collapsed .subtitle-track {
  display: none;
}

.caption-panel-head {
  display: block;
  margin-bottom: 10px;
}

.coach {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.coach img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.coach span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.subtitle-track {
  position: relative;
  height: 248px;
  overflow-y: auto;
  padding: 2px 0 74px;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
}

.subtitle-track::-webkit-scrollbar {
  display: none;
}

.line {
  display: block;
  width: 100%;
  color: #1d153f;
  text-align: left;
  margin: 0;
  padding: 4px 2px 5px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0.38;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.line.current {
  opacity: 1;
  background: transparent;
}

.line > span {
  display: block;
  margin-bottom: 2px;
  color: rgba(69, 243, 236, 0.68);
  font-size: 10px;
  font-weight: 900;
}

.line.current > span {
  color: #38f3ee;
}

.line strong {
  display: block;
  margin: 1px 0 2px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12.5px;
  line-height: 1.12;
}

.line.current strong {
  color: #fff;
}

.caption-word {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 0 2px;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease, text-shadow 0.16s ease;
}

.caption-word.word-past {
  color: rgba(84, 241, 236, 0.62);
}

.caption-word.word-active {
  color: #241244;
  background: linear-gradient(135deg, #f0ff7c, #9af7da);
  transform: translateY(-1px);
  text-shadow: none;
  box-shadow: 0 8px 16px rgba(255, 244, 107, 0.16);
}

.line p {
  margin: 1px 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.14;
}

.line.current p {
  color: rgba(255, 255, 255, 0.88);
}

.video-finish-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(8, 11, 31, 0.46);
  backdrop-filter: blur(12px);
}

.video-follow-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  align-items: end;
  padding: 16px;
  background: rgba(8, 11, 31, 0.42);
  backdrop-filter: blur(8px);
}

.video-follow-layer[hidden] {
  display: none;
}

.video-follow-sheet {
  display: grid;
  gap: 10px;
  max-height: calc(100% - 20px);
  overflow-y: auto;
  padding: 18px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px 28px 18px 18px;
  color: #21123d;
  background: linear-gradient(145deg, #ffffff, #e9fffb 58%, #f7ecff);
  box-shadow: 0 26px 54px rgba(2, 8, 31, 0.38);
}

.video-follow-sheet header,
.mobile-follow-access,
.mobile-follow-score,
.mobile-follow-metrics,
.video-follow-sheet nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.video-follow-sheet header div {
  display: grid;
  gap: 2px;
}

.video-follow-sheet header span {
  color: #0b99a4;
  font-size: 10px;
  font-weight: 1000;
}

.video-follow-sheet h2 {
  margin: 0;
  font-size: 24px;
}

.video-follow-sheet header button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #291548;
  background: #fff;
  font-size: 22px;
  box-shadow: none;
}

.mobile-follow-access {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(52, 127, 255, 0.1);
  color: #5c5572;
  font-size: 10px;
  font-weight: 850;
}

.mobile-follow-access b {
  color: #347fff;
  white-space: nowrap;
}

.mobile-follow-modes,
.mobile-follow-actions {
  display: grid;
  gap: 8px;
}

.mobile-follow-modes {
  grid-template-columns: repeat(2, 1fr);
}

.mobile-follow-actions {
  grid-template-columns: 0.8fr 1.2fr 0.7fr;
}

.video-follow-sheet button {
  min-height: 40px;
  border-radius: 14px;
  color: #352450;
  background: #f0f4fb;
  font-weight: 1000;
  box-shadow: none;
}

.video-follow-sheet button:disabled {
  opacity: 0.42;
}

.mobile-follow-modes button.active {
  color: #fff;
  background: #201245;
}

.mobile-follow-actions button.record {
  color: #fff;
  background: linear-gradient(135deg, #ff4f90, #8b5cff);
}

.mobile-follow-actions button.stop.active {
  color: #fff;
  background: linear-gradient(135deg, #ff356f, #c51954);
  box-shadow: 0 8px 18px rgba(197, 25, 84, 0.22);
}

.mobile-follow-target {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-left: 4px solid #ff4f90;
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, 0.82);
}

.mobile-follow-target small {
  color: #ff4f90;
  font-size: 10px;
  font-weight: 1000;
}

.mobile-follow-target strong {
  color: #1c1640;
  font-size: 16px;
  line-height: 1.35;
}

.mobile-follow-target p {
  margin: 0;
  color: #665b7e;
  font-size: 12px;
  font-weight: 850;
}

.video-follow-sheet audio {
  width: 100%;
  height: 36px;
}

.mobile-follow-recording {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(52, 127, 255, 0.18);
  border-radius: 14px;
  background: rgba(238, 246, 255, 0.78);
}

.mobile-follow-recording > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mobile-follow-recording button {
  min-height: 34px;
  padding: 4px 6px;
  font-size: 9px;
  line-height: 1.2;
}

.mobile-follow-result {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(13, 165, 139, 0.2);
  border-radius: 14px;
  background: rgba(224, 252, 246, 0.8);
}

.mobile-follow-score strong {
  color: #0d9d86;
  font-size: 32px;
}

.mobile-follow-score span {
  color: #4a425e;
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.mobile-follow-metrics span {
  flex: 1;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  color: #7a718c;
  font-size: 9px;
  text-align: center;
}

.mobile-follow-metrics b {
  display: block;
  color: #21123d;
  font-size: 13px;
}

.mobile-follow-words {
  line-height: 1.9;
}

.mobile-follow-words i {
  display: inline-block;
  padding: 0 5px;
  border-radius: 5px;
  color: #5d6677;
  background: #e5e9ef;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.mobile-follow-words i.correct,
.mobile-follow-words i.good {
  color: #087e71;
  background: #c9f6ef;
}

.mobile-follow-words i.close,
.mobile-follow-words i.almost {
  color: #996600;
  background: #fff0bd;
}

.mobile-follow-words i.incorrect,
.mobile-follow-words i.missing,
.mobile-follow-words i.needs-work,
.mobile-follow-words i.omitted {
  color: #bd2854;
  background: #ffe0e8;
  text-decoration: underline;
}

.mobile-follow-result small,
.video-follow-sheet footer {
  color: #7b718d;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

.mobile-follow-warning {
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  color: #875b00;
  background: #fff5d4;
  font-size: 10px;
  font-weight: 850;
}

.video-follow-sheet nav span {
  color: #6c6380;
  font-size: 11px;
  font-weight: 1000;
}

.video-follow-sheet nav button {
  min-height: 34px;
  padding: 0 14px;
}

.video-word-card-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  align-items: end;
  padding: 22px;
  background: rgba(8, 11, 31, 0.22);
  backdrop-filter: blur(6px);
}

.video-word-card-layer[hidden] {
  display: none;
}

.video-word-card {
  position: relative;
  padding: 22px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 30px;
  color: #21123d;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 244, 107, 0.76), transparent 28%),
    linear-gradient(145deg, #ffffff, #dcfffb 54%, #f6e9ff);
  box-shadow: 0 24px 46px rgba(2, 8, 31, 0.32);
}

.word-card-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #291548;
  background: rgba(255, 255, 255, 0.76);
  font-size: 22px;
  font-weight: 1000;
  box-shadow: none;
}

.video-word-card span {
  display: block;
  color: #0b99a4;
  font-size: 12px;
  font-weight: 1000;
}

.video-word-card h3 {
  margin: 6px 0 4px;
  font-size: 34px;
  line-height: 1;
}

.video-word-card p {
  margin: 0;
  color: #604b82;
  font-size: 18px;
  font-weight: 1000;
}

.video-word-card em {
  display: block;
  margin-top: 9px;
  color: rgba(33, 18, 61, 0.78);
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.45;
}

.video-word-card small {
  display: block;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  color: rgba(33, 18, 61, 0.72);
  background: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.video-word-card i {
  display: block;
  margin-top: 6px;
  color: rgba(33, 18, 61, 0.38);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
  line-height: 1.3;
}

.video-word-card [data-save-word] {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff4f90, #8b5cff);
  font-weight: 1000;
}

.video-word-card [data-save-word].saved {
  color: #241244;
  background: linear-gradient(135deg, #fff46b, #9af7da);
}

.video-finish-layer[hidden] {
  display: none;
}

.video-finish-dialog {
  width: 100%;
  padding: 26px 22px 22px;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 34px;
  color: #21123d;
  text-align: center;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 244, 107, 0.86), transparent 30%),
    linear-gradient(145deg, #fff, #dffcff 52%, #f6e9ff);
  box-shadow: 0 30px 60px rgba(3, 9, 34, 0.38);
}

.video-finish-dialog img {
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(44, 20, 82, 0.2));
}

.video-finish-dialog span {
  display: block;
  margin-top: 4px;
  color: #0b99a4;
  font-size: 13px;
  font-weight: 1000;
}

.video-finish-dialog h2 {
  margin: 8px 0 10px;
  font-size: 29px;
  line-height: 1.08;
}

.video-finish-dialog p {
  margin: 0;
  color: rgba(33, 18, 61, 0.68);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
}

.video-finish-dialog div {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.video-finish-dialog button {
  min-height: 52px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #ff4f90, #8b5cff);
  font-size: 16px;
  font-weight: 1000;
  box-shadow: 0 12px 20px rgba(42, 18, 100, 0.22);
}

.video-finish-dialog button:last-child {
  color: #382554;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.unlock-game-screen {
  color: #fff;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 228, 106, 0.32), transparent 30%),
    radial-gradient(circle at 84% 10%, rgba(255, 80, 148, 0.38), transparent 34%),
    linear-gradient(155deg, #351273 0%, #14347e 52%, #078083 100%);
}

.unlock-game-nav {
  color: #fff;
}

.unlock-game-nav button {
  color: #31194b;
  background: rgba(255, 255, 255, 0.94);
}

.unlock-game-nav span {
  background: rgba(255, 255, 255, 0.2);
}

.unlock-game-hero {
  display: grid;
  grid-template-columns: 1fr 118px;
  align-items: center;
  gap: 10px;
  margin: 12px 22px 16px;
  padding: 22px 18px;
  border-radius: 32px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 244, 107, 0.42), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 22px 42px rgba(3, 8, 31, 0.28);
}

.unlock-game-hero h2 {
  margin: 4px 0 8px;
  font-size: 34px;
  line-height: 1.02;
}

.unlock-game-hero p:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
}

.unlock-game-hero img {
  width: 124px;
  height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(4, 12, 30, 0.26));
}

.unlock-game-progress {
  margin: 0 22px 16px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.14);
}

.unlock-game-progress span {
  display: block;
  margin-bottom: 8px;
  color: #ffdf69;
  font-size: 14px;
  font-weight: 1000;
}

.unlock-game-progress div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.unlock-game-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fff46b, #21d5cd, #ff63a5);
}

.unlock-game-board {
  margin: 0 22px;
  padding: 16px;
  border-radius: 30px;
  color: #241244;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 36px rgba(2, 9, 30, 0.22);
}

.cat-bowl {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.cat-bowl img {
  grid-row: span 2;
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.cat-bowl strong {
  font-size: 19px;
  font-weight: 1000;
}

.cat-bowl p {
  color: #0b99a4;
  font-size: 14px;
  font-weight: 1000;
}

.word-feed-grid {
  display: grid;
  gap: 10px;
}

.word-feed-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #ff4f90, #8b5cff);
  font-size: 18px;
  font-weight: 1000;
  box-shadow: 0 10px 0 rgba(67, 20, 125, 0.18);
}

.word-feed-grid button span {
  font-size: 13px;
  opacity: 0.82;
}

.word-feed-grid button.fed {
  color: #241244;
  background: linear-gradient(135deg, #fff46b, #b9f3c9);
}

.unlock-game-complete {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 22px 0;
  padding: 16px;
  border-radius: 26px;
  color: #241244;
  background: #fff;
}

.unlock-game-complete[hidden] {
  display: none;
}

.unlock-game-complete img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.unlock-game-complete strong {
  display: block;
  font-size: 18px;
  font-weight: 1000;
}

.unlock-game-complete p {
  margin-top: 4px;
  color: #6d627e;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.sleep-screen {
  color: #f7fbff;
  overflow-y: auto;
  scrollbar-width: none;
  background:
    radial-gradient(circle at 80% 9%, rgba(154, 125, 255, 0.34), transparent 27%),
    radial-gradient(circle at 18% 74%, rgba(74, 221, 190, 0.18), transparent 34%),
    linear-gradient(180deg, #191638 0%, #142344 52%, #071725 100%);
  font-family: "PingFang SC", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.sleep-screen::-webkit-scrollbar {
  display: none;
}

.sleep-screen .status {
  color: white;
}

.sleep-nav {
  height: 60px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 22px 0;
}

.sleep-nav button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #211443;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 20px rgba(4, 9, 24, 0.22);
  font-size: 28px;
  font-weight: 1000;
}

.sleep-nav strong {
  color: white;
  font-size: 20px;
  font-weight: 950;
}

.sleep-nav span {
  padding: 7px 11px;
  border-radius: 999px;
  color: #cbfff2;
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: 900;
}

.sleep-stage {
  position: relative;
  min-height: 148px;
  display: grid;
  grid-template-columns: 1fr 118px;
  align-items: end;
  gap: 8px;
  margin: 12px 22px 14px;
  padding: 18px 16px 14px;
  overflow: hidden;
  border-radius: 30px;
  color: #111c36;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.88), transparent 25%),
    radial-gradient(circle at 88% 24%, rgba(215, 191, 255, 0.42), transparent 32%),
    linear-gradient(135deg, #fff7d8 0%, #e9fff8 54%, #d8e7ff 100%);
  border: 2px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.82),
    0 18px 30px rgba(3, 8, 24, 0.28);
}

.sleep-stage::after {
  content: "zzz";
  position: absolute;
  left: 14px;
  bottom: -9px;
  color: rgba(17, 28, 54, 0.06);
  font-size: 54px;
  line-height: 1;
  font-weight: 1000;
}

.sleep-stage > div,
.sleep-stage img {
  position: relative;
  z-index: 1;
}

.sleep-stage .eyebrow {
  margin: 0 0 6px;
  color: #7960e8;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.sleep-stage h2 {
  margin: 0 0 8px;
  font-size: 29px;
  line-height: 0.98;
  font-weight: 1000;
}

.sleep-stage p:last-child {
  margin: 0;
  color: rgba(17, 28, 54, 0.62);
  font-size: 11px;
  line-height: 1.38;
  font-weight: 850;
}

.sleep-stage img {
  justify-self: end;
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 15px 14px rgba(5, 12, 33, 0.2));
}

.sleep-filter-row {
  display: flex;
  gap: 8px;
  margin: 0 22px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sleep-filter-row::-webkit-scrollbar {
  display: none;
}

.sleep-filter-row button {
  min-width: max-content;
  height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 900;
}

.sleep-filter-row button.selected {
  color: #111c36;
  background: linear-gradient(135deg, #fff2a7, #d8fff7);
  border-color: rgba(255, 255, 255, 0.6);
}

.sleep-library-list {
  margin: 0 22px;
}

.sleep-audio-item {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 11px;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px 10px 10px;
  border-radius: 23px;
  color: #14213d;
  text-align: left;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.66), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 251, 0.96), rgba(230, 249, 242, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 11px 20px rgba(3, 8, 24, 0.17);
}

.sleep-audio-item.active {
  outline: 2px solid rgba(99, 240, 227, 0.55);
  background: linear-gradient(135deg, #fff7d2, #dffff7);
}

.sleep-audio-item b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: white;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 30%),
    linear-gradient(145deg, #24d2c6, #7366f3);
  font-size: 13px;
  font-weight: 950;
}

.sleep-audio-item strong,
.sleep-audio-item small {
  display: block;
}

.sleep-audio-item strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sleep-audio-item small {
  margin-top: 5px;
  color: rgba(20, 33, 61, 0.58);
  font-size: 10px;
  font-weight: 850;
}

.sleep-audio-item em {
  padding: 7px 10px;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(50, 216, 198, 0.14);
  font-size: 10px;
  font-weight: 950;
  font-style: normal;
}

.sleep-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 16px 22px 0;
}

.sleep-theme-grid button {
  min-height: 62px;
  padding: 12px;
  border-radius: 22px;
  color: #f8fbff;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sleep-theme-grid strong,
.sleep-theme-grid span {
  display: block;
}

.sleep-theme-grid strong {
  font-size: 13px;
  font-weight: 950;
}

.sleep-theme-grid span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 850;
}

.sleep-player-screen {
  background:
    radial-gradient(circle at 50% 18%, rgba(171, 147, 255, 0.34), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(45, 216, 196, 0.13), transparent 38%),
    linear-gradient(180deg, #171437 0%, #0d1730 100%);
}

.sleep-player-hero {
  margin: 18px 22px 18px;
  text-align: center;
}

.sleep-player-hero img {
  width: 168px;
  height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.22));
}

.sleep-player-hero p,
.sleep-player-hero h2,
.sleep-player-hero span {
  display: block;
  margin: 0;
}

.sleep-player-hero p {
  color: #63f0e3;
  font-size: 11px;
  font-weight: 950;
}

.sleep-player-hero h2 {
  margin-top: 8px;
  color: white;
  font-size: 25px;
  line-height: 1.08;
  font-weight: 1000;
}

.sleep-player-hero span {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 850;
}

.audio-card {
  margin: 0 22px;
  padding: 16px;
  border-radius: 30px;
  color: #101b35;
  background:
    radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 251, 0.98), rgba(230, 249, 241, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 16px 28px rgba(4, 10, 28, 0.24);
}

.simple-audio-card {
  margin-top: 0;
  padding: 18px 16px 16px;
  text-align: center;
}

.simple-audio-card .moon-disc {
  margin: 0 auto 16px;
}

.simple-audio-card small {
  display: block;
  margin: -5px 0 14px;
  color: rgba(16, 27, 53, 0.58);
  font-size: 11px;
  font-weight: 850;
}

.sleep-player-top {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 12px;
}

.moon-disc {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(145deg, #ffe58d, #8e74ff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 9px 16px rgba(32, 25, 82, 0.18);
}

.moon-disc span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255, 255, 245, 0.96);
  box-shadow: 8px -3px 0 rgba(255, 229, 142, 0.9);
}

.sleep-player-top small,
.sleep-player-top strong,
.sleep-player-top span {
  display: block;
}

.sleep-player-top small {
  color: #0c9b93;
  font-size: 10px;
  font-weight: 950;
}

.sleep-player-top strong {
  margin-top: 3px;
  font-size: 17px;
  line-height: 1.1;
  font-weight: 1000;
}

.sleep-player-top span {
  margin-top: 4px;
  color: rgba(16, 27, 53, 0.58);
  font-size: 11px;
  font-weight: 850;
}

.sleep-progress {
  height: 9px;
  margin: 16px 0 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(21, 35, 72, 0.12);
}

.sleep-progress i {
  width: 42%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffe979, #39d9c7, #8b63ff);
}

.sleep-player-actions {
  display: grid;
  grid-template-columns: 1fr 58px 1fr;
  align-items: center;
  gap: 10px;
}

.sleep-player-actions button {
  min-height: 42px;
  border-radius: 18px;
  color: #f8fbff;
  background: #25375f;
  font-size: 12px;
  font-weight: 950;
}

.sleep-player-actions .sleep-play-button {
  width: 58px;
  height: 58px;
  min-height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff7db1, #8d61ff);
  box-shadow: 0 12px 20px rgba(79, 62, 179, 0.28);
  font-size: 20px;
}

.sleep-player-actions .sleep-play-button.playing {
  background: linear-gradient(145deg, #22d3c7, #596dff);
}

.timer-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 22px 0;
}

.timer-row button {
  height: 38px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 900;
}

.timer-row .selected {
  color: #111c36;
  background: #fff0a6;
  border-color: rgba(255, 255, 255, 0.55);
}

.sleep-switches {
  display: grid;
  gap: 8px;
  margin: 14px 22px 0;
}

.sleep-player-screen .sleep-switches {
  grid-template-columns: 1fr;
}

.sleep-switches label {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.sleep-switches input {
  width: 38px;
  height: 22px;
  accent-color: #35d7c8;
}

.sleep-queue {
  margin: 18px 22px 0;
}

.sleep-section-title span,
.sleep-section-title strong {
  display: block;
}

.sleep-section-title span {
  color: #63f0e3;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.sleep-section-title strong {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 1000;
}

.sleep-queue button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 9px;
  padding: 10px;
  border-radius: 20px;
  color: #14213d;
  text-align: left;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 9px 18px rgba(3, 8, 24, 0.16);
}

.sleep-queue button.active {
  background: linear-gradient(135deg, #fff8d7, #dbfff7);
  outline: 2px solid rgba(99, 240, 227, 0.5);
}

.sleep-queue b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  background: linear-gradient(145deg, #26d0c6, #6f64f4);
  font-size: 13px;
  font-weight: 950;
}

.sleep-queue strong,
.sleep-queue small {
  display: block;
}

.sleep-queue strong {
  font-size: 13px;
  line-height: 1.15;
  font-weight: 1000;
}

.sleep-queue small {
  margin-top: 4px;
  color: rgba(20, 33, 61, 0.58);
  font-size: 10px;
  font-weight: 850;
}

.sleep-review-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  margin: 14px 22px 28px;
  padding: 14px;
  border-radius: 24px;
  color: #16213e;
  background: linear-gradient(135deg, #fff6d0, #f2f4ff);
  box-shadow: 0 12px 22px rgba(3, 8, 24, 0.18);
}

.sleep-review-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(119, 74, 12, 0.18));
}

.sleep-review-card strong,
.sleep-review-card p {
  display: block;
  margin: 0;
}

.sleep-review-card strong {
  font-size: 14px;
  font-weight: 1000;
}

.sleep-review-card p {
  margin-top: 4px;
  color: rgba(22, 33, 62, 0.62);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
}

.book-reader-screen {
  color: #14213d;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 219, 94, 0.42), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(74, 210, 229, 0.28), transparent 28%),
    linear-gradient(180deg, #fff6d9 0%, #eaf9ff 42%, #fff7fb 100%);
}

.book-reader-nav {
  position: relative;
  z-index: 3;
  height: 60px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 22px 0;
}

.book-reader-nav button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #24154b;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 18px rgba(80, 65, 132, 0.18);
  font-size: 28px;
  font-weight: 950;
}

.book-reader-nav strong {
  overflow: hidden;
  color: #24154b;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 1000;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-reader-nav span {
  min-width: 48px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #fff;
  background: #5a59ee;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.book-reader-hero {
  margin: 16px 24px 12px;
}

.book-reader-hero p,
.book-reader-hero h2 {
  margin: 0;
}

.book-reader-hero p {
  color: #0ba69d;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.book-reader-hero h2 {
  margin-top: 7px;
  color: #181842;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 1000;
}

.book-page-card {
  margin: 0 22px;
  padding: 16px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 22px 36px rgba(83, 61, 131, 0.18);
}

.book-page-image {
  height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 226, 102, 0.62), transparent 24%),
    linear-gradient(145deg, #dffbff, #fff4c7 48%, #ffe4f0 100%);
}

.book-page-image img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(39, 54, 91, 0.16));
}

.book-page-copy {
  margin-top: 16px;
  padding: 15px 16px;
  border-radius: 20px;
  background: #f7fbff;
}

.book-page-copy strong,
.book-page-copy p {
  display: block;
  margin: 0;
}

.book-page-copy strong {
  color: #14133f;
  font-size: 24px;
  line-height: 1.12;
  font-weight: 1000;
}

.book-page-copy p {
  margin-top: 8px;
  color: rgba(20, 33, 61, 0.62);
  font-size: 15px;
  line-height: 1.38;
  font-weight: 850;
}

.book-reader-tools,
.book-reader-turns {
  display: grid;
  gap: 10px;
  margin: 14px 22px 0;
}

.book-reader-tools {
  grid-template-columns: repeat(3, 1fr);
}

.book-reader-turns {
  grid-template-columns: 1fr 1fr;
}

.book-reader-tools button,
.book-reader-turns button {
  min-height: 46px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #17c7bb, #5a70ff);
  box-shadow: 0 10px 18px rgba(52, 82, 170, 0.2);
  font-size: 13px;
  font-weight: 950;
}

.book-reader-turns button {
  background: linear-gradient(145deg, #ff4d91, #704df3);
}

.book-reader-turns button:disabled {
  opacity: 0.45;
}

.game-screen {
  background:
    linear-gradient(180deg, #f7f8fb 0 47%, #e9f5ee 47% 100%);
}

.game-hero {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 28px 24px 10px;
}

.game-hero h2,
.system-head h2 {
  margin: 8px 0 0;
  font-size: 42px;
  line-height: 0.98;
}

.star-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 10px 22px rgba(16, 24, 32, 0.08);
}

.star-pill img {
  width: 27px;
  height: 27px;
}

.cat-arena {
  position: relative;
  height: 382px;
  margin: 14px 22px;
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 227, 116, 0.64), transparent 35%),
    linear-gradient(180deg, #ffffff, #dff2e5);
  border: 1px solid rgba(111, 186, 102, 0.18);
}

.prompt {
  width: 235px;
  margin: 20px auto 0;
  padding: 13px;
  border-radius: 22px;
  background: white;
  text-align: center;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(16, 24, 32, 0.08);
}

.cat-arena img {
  position: absolute;
  left: 50%;
  top: 92px;
  width: 220px;
  height: 220px;
  object-fit: contain;
  transform: translateX(-50%);
}

.bowl {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 152px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border-radius: 16px 16px 36px 36px;
  color: white;
  background: #111820;
  font-weight: 900;
}

.word-fish {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 22px 14px;
}

.word-fish button {
  height: 52px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--line);
  color: #2e4455;
  font-weight: 900;
}

.word-fish .right {
  color: white;
  background: var(--blue);
}

.unlock-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 22px;
  padding: 14px;
  border-radius: 24px;
  background: white;
  border: 1px solid var(--line);
}

.unlock-note img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.unlock-note strong,
.unlock-note span {
  display: block;
}

.system-screen {
  background: #f7f8fb;
}

.system-head {
  padding: 30px 24px 10px;
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px 24px 18px;
}

.palette i {
  height: 58px;
  border-radius: 19px;
  border: 1px solid var(--line);
}

.palette .ink {
  background: var(--ink);
}

.palette .blue {
  background: var(--blue);
}

.palette .green {
  background: var(--green);
}

.palette .violet {
  background: var(--violet);
}

.palette .paper {
  background: var(--paper);
}

.component-list {
  display: grid;
  gap: 12px;
  padding: 0 20px;
}

.component-list article {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 16px;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line);
}

.component-list img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.component-list strong,
.component-list span {
  display: block;
}

.component-list strong {
  margin-bottom: 5px;
}

.hidden {
  display: none !important;
}

.assessment-l-screen {
  color: var(--ink);
  overflow-y: auto;
  scrollbar-width: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 227, 116, 0.42), transparent 19%),
    radial-gradient(circle at 12% 78%, rgba(92, 220, 203, 0.34), transparent 26%),
    linear-gradient(180deg, #effcff 0%, #dcf4ed 48%, #eef3ff 100%);
}

.assessment-l-screen::-webkit-scrollbar {
  display: none;
}

.assessment-l-screen:not(.testing):not(.result-ready) .assessment-level-map {
  display: none;
}

.assessment-l-screen::after {
  background: rgba(31, 84, 112, 0.22);
}

.assessment-l-screen .status.light {
  color: #123047;
}

.assessment-l-screen .status.light i {
  filter: none;
}

.assessment-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 8px;
}

.assessment-nav button {
  width: 38px;
  height: 38px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #123047;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.assessment-nav strong {
  font-size: 18px;
}

.assessment-nav span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17, 185, 137, 0.14);
  color: #08725e;
  font-size: 12px;
  font-weight: 900;
}

.assessment-intro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 106px;
  gap: 8px;
  margin: 8px 24px 14px;
  padding: 20px 16px 0;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 36%, rgba(255, 227, 116, 0.72), transparent 28%),
    radial-gradient(circle at 14% 8%, rgba(76, 216, 197, 0.26), transparent 24%),
    linear-gradient(135deg, #ffffff 0%, #e8fbf6 52%, #edf5ff 100%);
  color: var(--ink);
  box-shadow: 0 22px 44px rgba(18, 86, 111, 0.15);
}

.assessment-l-screen:not(.testing):not(.result-ready) .assessment-intro {
  margin-top: 52px;
}

.assessment-intro.compact {
  grid-template-columns: 1fr 88px;
  padding-top: 13px;
  border-width: 3px;
}

.assessment-intro.compact p:not(.eyebrow) {
  display: none;
}

.assessment-intro.compact .assessment-profile,
.assessment-intro.compact .assessment-start-point {
  display: none;
}

.assessment-intro h2 {
  margin: 8px 0 10px;
  font-size: 29px;
  line-height: 1.08;
}

.assessment-intro.compact h2 {
  margin-bottom: 10px;
  font-size: 21px;
}

.assessment-intro p {
  margin: 0 0 14px;
  color: #657284;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.assessment-intro img {
  align-self: end;
  width: 110px;
  transform: translateY(8px);
}

.assessment-intro.compact img {
  width: 92px;
}

.assessment-profile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 8px 0 10px;
}

.assessment-profile label {
  display: grid;
  gap: 5px;
}

.assessment-profile .full {
  grid-column: 1 / -1;
}

.assessment-profile span {
  color: #5f6d7d;
  font-size: 12px;
  font-weight: 1000;
}

.assessment-profile select {
  width: 100%;
  min-height: 39px;
  border: 1px solid rgba(16, 24, 32, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 10px;
}

.assessment-start-point {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 10px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(17, 185, 137, 0.13);
  color: #08725e;
  font-size: 13px;
  font-weight: 1000;
}

.assessment-primary,
.assessment-secondary {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 18px;
  color: white;
  background: linear-gradient(135deg, #00b894, #2b7cff);
  font-size: 18px;
  font-weight: 1000;
  box-shadow: 0 12px 18px rgba(28, 132, 184, 0.23);
}

.assessment-primary:disabled {
  cursor: not-allowed;
  background: #b7c1cf;
  box-shadow: none;
}

.assessment-secondary {
  color: #123047;
  background: #ffffff;
  box-shadow: none;
}

.assessment-level-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 24px 14px;
}

.assessment-l-screen.testing .assessment-level-map {
  display: none;
}

.assessment-l-screen.testing .assessment-card {
  margin-top: 14px;
}

.assessment-level-chip {
  min-height: 56px;
  padding: 9px 10px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(14, 112, 137, 0.12);
  color: var(--ink);
}

.assessment-level-chip span,
.assessment-row span,
.assessment-metrics span {
  display: block;
  color: #657284;
  font-size: 12px;
  font-weight: 1000;
}

.assessment-level-chip strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.1;
}

.assessment-level-chip.passed {
  background: #e4fff4;
  border-color: #59d5a6;
}

.assessment-level-chip.current {
  background: #fff4bd;
  border-color: #ffe374;
}

.assessment-card,
.assessment-result-card {
  margin: 0 24px 64px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 20px 40px rgba(18, 86, 111, 0.14);
}

.assessment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assessment-row b {
  color: #08725e;
  font-size: 13px;
}

.assessment-mission {
  margin: 8px 0 0;
  color: #5f6d7d;
  font-size: 13px;
  font-weight: 900;
}

.assessment-track {
  height: 9px;
  margin: 12px 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5ebf2;
}

.assessment-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00b894, #2b7cff);
  transition: width 180ms ease;
}

.assessment-card h2,
.assessment-result-card h2 {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.18;
}

.assessment-passage {
  margin: -2px 0 12px;
  padding: 12px;
  border-radius: 16px;
  background: #f0fbf7;
  color: #4c5a6a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.assessment-options {
  display: grid;
  gap: 9px;
  margin-bottom: 14px;
}

.assessment-option {
  min-height: 52px;
  padding: 11px 13px;
  border-radius: 17px;
  background: #f7f9fc;
  border: 1px solid rgba(16, 24, 32, 0.1);
  color: var(--ink);
  text-align: left;
  font-size: 15px;
  font-weight: 900;
}

.assessment-option.active {
  color: #063f44;
  background: #ddfbf3;
  border-color: #00b894;
}

.assessment-result-card {
  text-align: center;
}

.assessment-result-level {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 30px;
  background: linear-gradient(145deg, #00b894, #2b7cff);
  color: white;
  font-size: 38px;
  font-weight: 1000;
  box-shadow: 0 16px 26px rgba(28, 132, 184, 0.22);
}

.assessment-result-card > p {
  margin: 0;
  color: #657284;
  font-weight: 800;
  line-height: 1.5;
}

.assessment-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.assessment-metrics article {
  padding: 12px;
  border-radius: 19px;
  background: #f7f9fc;
  border: 1px solid rgba(16, 24, 32, 0.09);
}

.assessment-metrics strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
}

.assessment-recommend {
  padding: 14px;
  border-radius: 20px;
  background: #f0fbf7;
  text-align: left;
  color: #4c5a6a;
  line-height: 1.45;
}

.assessment-recommend strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
}

.assessment-recommend p {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}

.assessment-recommend p:last-child {
  margin-bottom: 0;
}

.assessment-plan-card {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  background: #fff6df;
  color: #102033;
}

.assessment-plan-card strong,
.assessment-plan-card p {
  color: #102033;
}

.assessment-plan-card .assessment-primary {
  margin-top: 4px;
}

.assessment-plan-detail {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.assessment-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 1250px) {
  .screen-grid {
    grid-template-columns: repeat(2, 390px);
  }
}

@media (max-width: 880px) {
  .design-board {
    width: min(430px, calc(100vw - 24px));
  }

  .brief {
    display: block;
  }

  .brief h1 {
    font-size: 36px;
  }

  .asset-strip {
    margin-top: 18px;
    overflow: auto;
  }

  .screen-grid {
    grid-template-columns: 1fr;
  }

  .phone {
    width: min(390px, 100%);
  }
}

/* Production mobile runtime: one real screen, not a horizontally scrolling mockup board. */
body.single-screen-runtime .design-board {
  width: min(430px, calc(100vw - 24px));
  padding-top: 20px;
}

body.single-screen-runtime .brief {
  display: none;
}

body.single-screen-runtime .screen-grid {
  display: block;
}

body.single-screen-runtime .screen-grid > .phone {
  display: none;
  margin: 0 auto;
}

body.single-screen-runtime .screen-grid > .phone.active-screen {
  display: block;
}

body.single-screen-runtime .screen-grid > .phone.screen-entering {
  animation: none;
}

body.single-screen-runtime .status {
  display: none !important;
}

body.single-screen-runtime .phone > .status + nav {
  margin-top: env(safe-area-inset-top);
}

body.single-screen-runtime .home-screen > .status + .daily-quote {
  padding-top: max(24px, env(safe-area-inset-top));
}

@keyframes suzy-screen-enter {
  from { opacity: 0.72; transform: translate3d(0, 6px, 0) scale(0.995); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.single-screen-runtime .screen-grid > .phone.screen-entering {
    animation: none;
  }
}

/* Real login controls. The illustration is rebuilt as responsive layers so controls never drift. */
.login-register-screen {
  color: #fff;
  background: #160b70;
}

.login-visual-shell {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(270px, 1fr) auto auto auto 44px;
  gap: 10px;
  overflow: hidden;
  padding: max(18px, env(safe-area-inset-top)) 28px max(14px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 20% 7%, rgba(255, 40, 178, 0.92), transparent 25%),
    radial-gradient(circle at 88% 74%, rgba(20, 216, 229, 0.27), transparent 28%),
    linear-gradient(145deg, #2e0c82 0%, #100779 48%, #1023a2 100%);
}

.login-visual-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(circle at 50% 38%, rgba(108, 54, 255, 0.48), transparent 38%);
}

.login-orbit {
  position: absolute;
  z-index: -2;
  width: 125%;
  aspect-ratio: 1.8;
  border: 2px solid rgba(190, 176, 255, 0.22);
  border-radius: 50%;
  transform: rotate(-18deg);
  pointer-events: none;
}

.orbit-one { left: -28%; top: 6%; }
.orbit-two { right: -74%; bottom: 7%; transform: rotate(24deg); }

.login-shape {
  position: absolute;
  z-index: -1;
  line-height: 1;
  filter: drop-shadow(0 8px 8px rgba(5, 2, 38, 0.42));
  pointer-events: none;
}

.shape-star {
  color: #ffd51f;
  -webkit-text-stroke: 2px #ffad12;
}

.star-one { left: 5%; top: 17%; font-size: 58px; transform: rotate(-12deg); }
.star-two { right: 7%; bottom: 8%; font-size: 42px; transform: rotate(13deg); }
.shape-moon { right: 8%; top: 18%; color: #ffd828; font-size: 46px; text-shadow: -12px -1px 0 #140879; }
.shape-dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(145deg, #67fff2, #06a5bd); }
.dot-one { left: 8%; bottom: 24%; }
.dot-two { right: 8%; top: 48%; }

.login-real-back {
  position: absolute;
  left: 18px;
  top: max(18px, env(safe-area-inset-top));
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 5px;
  border-radius: 50%;
  color: #2d147c;
  background: #fff;
  box-shadow: 0 10px 22px rgba(7, 2, 42, 0.34);
  font-size: 45px;
  line-height: 1;
  cursor: pointer;
}

.login-brand {
  position: relative;
  z-index: 2;
  align-self: end;
  text-align: center;
}

.login-cat-icon {
  width: clamp(118px, 38vw, 158px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.35);
  border-radius: 31%;
  background: linear-gradient(145deg, #ff3aad, #6a2eff 60%, #13b7fa);
  box-shadow: 0 18px 32px rgba(5, 2, 47, 0.48), 0 0 22px rgba(255, 42, 188, 0.28);
}

.login-cat-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-brand h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 12vw, 58px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -4px;
  text-shadow: 0 5px 0 #641181, 0 11px 18px rgba(4, 1, 44, 0.58);
}

.login-brand h1 span {
  margin-right: 6px;
  letter-spacing: -3px;
}

.login-brand p {
  margin: 12px 0 0;
  font-size: clamp(18px, 5vw, 23px);
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 4px 12px rgba(5, 2, 42, 0.52);
}

.login-real-actions {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 12px;
}

.login-main-button {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 58px;
  padding: 0 16px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 3px 7px rgba(255,255,255,0.52), 0 10px 18px rgba(3, 1, 39, 0.34);
}

.login-main-button.wechat { background: linear-gradient(180deg, #4be861, #0dbc36); }
.login-main-button.phone-auth { background: linear-gradient(180deg, #31dcf7, #049dce); }
.login-main-button.session-resume { background: linear-gradient(180deg, #ff5fb1, #ef1775); }
.login-main-button[hidden],
.login-real-back[hidden] { display: none !important; }
.login-main-button b { grid-column: 2; font-size: 22px; font-weight: 900; }
.wechat-mark,
.phone-mark,
.resume-mark {
  position: relative;
  grid-column: 1;
  display: block;
  color: transparent;
  font-size: 0;
}

.wechat-mark {
  width: 42px;
  height: 34px;
}

.wechat-mark::before,
.wechat-mark::after {
  content: none;
  display: none;
}

.wechat-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #fff;
  filter: drop-shadow(0 3px 3px rgba(9, 69, 25, 0.22));
}

.wechat-mark .wechat-eye { fill: #18b936; }

.phone-mark {
  width: 23px;
  height: 34px;
  margin-left: 5px;
  border: 3px solid #fff;
  border-radius: 5px;
}

.phone-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.login-main-button:active,
.login-minor-actions button:active,
.login-real-back:active {
  transform: translateY(1px) scale(0.995);
}

.login-minor-actions {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  min-height: 38px;
}

.login-minor-actions button {
  padding: 8px 2px;
  color: #fff;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.login-minor-actions button span { font-size: 24px; vertical-align: -2px; }
.login-minor-actions i { width: 1px; height: 20px; background: rgba(255,255,255,0.66); }

.login-permission-note {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 224, 75, 0.3);
  border-radius: 14px;
  color: #fff;
  background: rgba(18, 7, 94, 0.42);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.login-permission-note strong { color: #ffe64f; }
.login-permission-note span { color: rgba(255,255,255,0.86); }

.login-consent-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
}

.login-consent-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: transparent;
  background: rgba(8, 4, 66, 0.38);
  cursor: pointer;
}

.login-consent-check span {
  display: block;
  transform: translateY(-1px);
  font-size: 18px;
  font-weight: 1000;
  line-height: 1;
}

.login-register-screen.terms-accepted .login-consent-check {
  border-color: #ffe333;
  color: #160b70;
  background: #ffe333;
  box-shadow: 0 0 0 3px rgba(255, 227, 51, 0.16);
}

.login-consent-row p {
  margin: 2px 0 0;
  color: rgba(255,255,255,0.88);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.65;
}

.login-consent-row a {
  color: #ffe230;
  text-decoration: none;
  white-space: nowrap;
}

.login-waves {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
}

.login-waves i {
  position: absolute;
  bottom: -55px;
  width: 72%;
  height: 112px;
  border-radius: 50% 50% 0 0;
}

.login-waves i:first-child { left: -18%; background: linear-gradient(145deg, #ff39bb, #df087c); transform: rotate(6deg); }
.login-waves i:last-child { right: -20%; background: linear-gradient(145deg, #42e6e5, #08aebd); transform: rotate(-6deg); }

.login-sheet button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.profile-save-message {
  min-height: 18px;
  margin: 0 4px 8px;
  color: #6b5e7d;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.profile-save-message.ok { color: #008d75; }
.profile-save-message.error { color: #c82961; }

.parent-account-card {
  margin-top: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 90% 8%, rgba(117, 236, 206, 0.24), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  box-shadow: 0 16px 28px rgba(3, 10, 21, 0.18);
}

.parent-account-loading,
.parent-account-message {
  color: rgba(248, 251, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.parent-account-head,
.parent-account-device-head,
.parent-account-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.parent-account-head > div,
.parent-account-device > div { min-width: 0; }

.parent-account-eyebrow {
  display: block;
  color: #79f0ce;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-account-head strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  line-height: 1.2;
}

.parent-membership-badge {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  color: #173b39;
  background: #79f0ce;
  font-size: 11px;
  font-weight: 1000;
}

.parent-account-rules {
  margin: 10px 0 12px;
  color: rgba(248, 251, 255, 0.74);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.parent-account-child-select {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  color: #f8fbff;
  font-size: 12px;
  font-weight: 850;
}

.parent-account-child-select select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 12px;
  color: #213049;
  background: #fff;
  font: inherit;
}

.parent-center-screen.report-pending .parent-trust-strip,
.parent-center-screen.report-pending .parent-compass,
.parent-center-screen.report-pending .parent-metrics,
.parent-center-screen.report-pending .weekly-rings,
.parent-center-screen.report-pending .parent-evidence-card,
.parent-center-screen.report-pending .mvp-parent-summary,
.parent-center-screen.report-pending .mvp-parent-report,
.parent-center-screen.report-pending .mvp-parent-deep-report {
  display: none;
}

.parent-account-device-head {
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.parent-account-device-head strong { font-size: 13px; }
.parent-account-device-head span { color: rgba(248, 251, 255, 0.68); font-size: 11px; font-weight: 850; }

.parent-account-device-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.parent-account-device {
  min-height: 54px;
  padding: 9px 10px;
  border-radius: 16px;
  background: rgba(3, 19, 42, 0.28);
}

.parent-account-device strong,
.parent-account-device small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-account-device strong { font-size: 12px; }
.parent-account-device small { margin-top: 3px; color: rgba(248, 251, 255, 0.62); font-size: 10px; font-weight: 750; }

.parent-account-device button,
.parent-account-logout,
.parent-profile-form button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 12px;
  color: #281547;
  background: #f7fbff;
  font-size: 11px;
  font-weight: 1000;
}

.parent-account-device button:disabled { color: rgba(248, 251, 255, 0.66); background: rgba(255, 255, 255, 0.12); }

.parent-account-logout {
  width: 100%;
  margin-top: 12px;
  color: #fff;
  background: rgba(255, 71, 128, 0.8);
}

.parent-profile-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.parent-profile-form label { display: grid; gap: 5px; color: #657284; font-size: 11px; font-weight: 900; }
.parent-profile-form input,
.parent-profile-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d9e5ee;
  border-radius: 13px;
  color: #251747;
  background: #fff;
  font: inherit;
  font-weight: 850;
}

.parent-profile-form .parent-profile-grid { display: grid; grid-template-columns: 0.72fr 1fr; gap: 8px; }
.parent-profile-form [data-child-profile-save] { width: 100%; color: #fff; background: linear-gradient(135deg, #ff3d8a, #7048e8); }

@media (max-width: 880px) {
  body.single-screen-runtime {
    min-height: 100dvh;
    background: #160b70;
  }

  body.single-screen-runtime .design-board {
    width: 100%;
    padding: 0;
  }

  body.single-screen-runtime .phone {
    width: 100%;
    height: 100dvh;
    min-height: 560px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.single-screen-runtime .phone::before,
  body.single-screen-runtime .phone::after {
    display: none;
  }
}

.home-episode-challenge {
  display: flex;
  width: calc(100% - 40px);
  min-height: 86px;
  align-items: center;
  gap: 14px;
  margin: 14px 20px 0;
  padding: 15px 17px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, #6d43da, #e33887);
  box-shadow: 0 13px 28px rgba(72, 40, 151, 0.24);
}

.home-episode-challenge span { display: grid; flex: 1; gap: 3px; min-width: 0; }
.home-episode-challenge small { color: #ffe36b; font-size: 10px; font-weight: 1000; letter-spacing: .04em; }
.home-episode-challenge strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.home-episode-challenge em { color: rgba(255, 255, 255, .78); font-size: 10px; font-style: normal; font-weight: 750; }
.home-episode-challenge b { font-size: 22px; }

.home-learning-overview {
  margin: 0 20px 16px;
  padding: 15px;
  border-radius: 25px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}
.home-learning-overview > header { display: grid; gap: 3px; margin-bottom: 11px; color: #fff; }
.home-learning-overview > header span { color: #ffe36b; font-size: 9px; font-weight: 1000; letter-spacing: .08em; }
.home-learning-overview > header strong { font-size: 19px; }
.home-learning-grid { display: grid; gap: 9px; }
.home-learning-slot:empty { display: none; }
.home-learning-slot > small { display: block; margin: 0 0 5px 4px; color: #ffe36b; font-size: 9px; font-weight: 1000; }
.home-learning-slot .film-card {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 78px !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  overflow: hidden !important;
  border-radius: 19px !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(18, 8, 48, .2) !important;
}
.home-learning-slot .film-card .media-cover-visual { grid-column: 1 !important; grid-row: 1 / 3 !important; width: 70px !important; height: 62px !important; overflow: hidden !important; border-radius: 14px !important; }
.home-learning-slot .film-card .media-cover-visual img { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; }
.home-learning-slot .film-card > span { display: none !important; }
.home-learning-slot .film-card > b { grid-column: 2 !important; grid-row: 1 !important; align-self: end; min-width: 0; margin: 0 !important; overflow: hidden; padding: 0 8px; color: #211447; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-learning-slot .film-card > p { display: block !important; grid-column: 2 !important; grid-row: 2 !important; align-self: start; min-width: 0; margin: 2px 8px 0 !important; overflow: hidden; color: #756d87; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-learning-slot .mvp-playlist-toggle { display: none !important; }
.home-learning-action {
  display: grid;
  grid-template-columns: 52px 1fr 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 0;
  border-radius: 19px;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, #6d43da, #e33887);
  box-shadow: 0 10px 22px rgba(18, 8, 48, .2);
}
.home-learning-action.library { background: linear-gradient(135deg, #109e9e, #2a74c9); }
.home-learning-action img { width: 50px; height: 50px; object-fit: contain; }
.home-learning-action span { display: grid; min-width: 0; gap: 2px; }
.home-learning-action small { color: #ffe36b; font-size: 8px; font-weight: 1000; letter-spacing: .05em; }
.home-learning-action strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-learning-action em { color: rgba(255,255,255,.78); font-size: 9px; font-style: normal; line-height: 1.35; }
.home-learning-action > b { font-size: 19px; }

body.single-screen-runtime .home-flow-screen,
body.suzy-home-entry .home-flow-screen { overflow-y: auto; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.single-screen-runtime .home-flow-screen .bottom-tabs {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  width: auto;
  margin: 0;
  z-index: 160;
}

/* Xiaozhidao: one clear continuation on the first phone screen. */
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen .home-learning-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeContinueQuick {
  grid-column: 1;
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeContinueQuick .film-card {
  min-height: 132px !important;
  grid-template-columns: 100px minmax(0,1fr) !important;
  padding: 14px !important;
  background: #fff !important;
  border: 2px solid #dcebe9 !important;
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeContinueQuick .film-card .media-cover-visual {
  width: 100px !important;
  height: 100px !important;
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeContinueQuick .film-card > b {
  font-size: 16px;
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeContinueQuick .film-card > p {
  font-size: 12px;
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeRecommendQuick { order: 3; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeEpisodeChallenge {
  order: 2;
  width: 100%;
  min-height: 104px;
  grid-template-columns: 58px minmax(0,1fr) 18px;
  gap: 12px;
  padding: 14px;
  background: #f4fffb;
  border: 2px solid #d3eae2;
  color: #1d3b40;
  box-shadow: 0 8px 18px rgba(10,35,45,.08);
}
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeEpisodeChallenge img { width: 56px; height: 56px; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeEpisodeChallenge small { color: #11756e; font-size: 10px; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeEpisodeChallenge strong { color: #21374a; font-size: 15px; line-height: 1.4; white-space: normal; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen #homeEpisodeChallenge em { display:block; color:#647588; font-size:11px; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen .home-quick-tools { grid-template-columns: 1fr; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen .bottom-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); padding-left: 8px; padding-right: 8px; }
body:is(.single-screen-runtime,.suzy-home-entry) .home-flow-screen .bottom-tabs b { font-size: 11px; }

/* The production phone home keeps only the five decisions a child needs:
   continue, recommendation, challenge, library and assessment. */
body.single-screen-runtime .home-flow-screen .daily-quote {
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 10px;
  padding: max(16px, env(safe-area-inset-top)) 18px 10px;
}
body.single-screen-runtime .home-flow-screen .daily-quote h2 { margin: 2px 0 4px; font-size: 25px; }
body.single-screen-runtime .home-flow-screen .daily-quote .subcopy { margin: 0; font-size: 11px; }
body.single-screen-runtime .home-flow-screen .quote-chip { display: none; }
body.single-screen-runtime .home-flow-screen .talking-cat { width: 62px; height: 70px; border-radius: 23px; }
body.single-screen-runtime .home-flow-screen .talking-cat img { top: 3px; width: 58px; height: 58px; }
body.single-screen-runtime .home-flow-screen .talking-cat small { bottom: 3px; font-size: 8px; }
body.single-screen-runtime .home-flow-screen .real-mouth { top: 35px; }
body.single-screen-runtime .home-learning-overview {
  margin: 0 14px 10px;
  padding: 12px;
  border-radius: 23px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.09));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 16px 28px rgba(23,8,52,.14);
}
body.single-screen-runtime .home-learning-overview > header { margin-bottom: 9px; }
body.single-screen-runtime .home-learning-overview > header strong { font-size: 17px; }
body.single-screen-runtime .home-learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
body.single-screen-runtime .home-learning-slot > small { margin-left: 3px; font-size: 8px; }
body.single-screen-runtime #homeContinueQuick { grid-column: 1 / -1; }
body.single-screen-runtime #homeContinueQuick .film-card {
  min-height: 94px !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  grid-template-rows: 1fr 1fr !important;
  padding: 8px !important;
  border-radius: 19px !important;
  background: linear-gradient(135deg,#fff,#f4efff) !important;
}
body.single-screen-runtime #homeContinueQuick .film-card .media-cover-visual {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 78px !important;
  height: 78px !important;
  border-radius: 15px !important;
}
body.single-screen-runtime #homeContinueQuick .film-card > b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end;
  padding: 0 9px;
  color: #211447;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}
body.single-screen-runtime #homeContinueQuick .film-card > p {
  display: block !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start;
  margin: 4px 9px 0 !important;
  color: #756d87;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.single-screen-runtime #homeRecommendQuick .film-card {
  min-height: 88px !important;
  grid-template-columns: 55px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  padding: 8px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg,#fff,#effaff) !important;
}
body.single-screen-runtime #homeRecommendQuick .film-card .media-cover-visual {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 55px !important;
  height: 70px !important;
  border-radius: 13px !important;
}
body.single-screen-runtime #homeRecommendQuick .film-card > b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center;
  padding: 0 6px;
  color: #211447;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
body.single-screen-runtime #homeRecommendQuick .film-card > p,
body.single-screen-runtime .home-learning-slot .mvp-card-challenge { display: none !important; }
body.single-screen-runtime .home-learning-grid .home-episode-challenge {
  min-height: 88px;
  grid-template-columns: 46px minmax(0, 1fr) 12px;
  gap: 7px;
  padding: 9px;
  border-radius: 18px;
  background: linear-gradient(145deg,#ff3d88,#7b43d8);
}
body.single-screen-runtime .home-learning-grid .home-episode-challenge img { width: 45px; height: 45px; }
body.single-screen-runtime .home-learning-grid .home-episode-challenge strong { font-size: 11px; line-height: 1.35; white-space: normal; }
body.single-screen-runtime .home-learning-grid .home-episode-challenge small { font-size: 7px; }
body.single-screen-runtime .home-learning-grid .home-episode-challenge em { display: none; }
body.single-screen-runtime .home-learning-grid .home-episode-challenge > b { font-size: 15px; }
body.single-screen-runtime .home-quick-tools {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 9px;
  margin: 0 14px 10px;
}
body.single-screen-runtime .home-quick-tools .home-learning-action.library {
  min-height: 96px;
  grid-template-columns: 43px minmax(0,1fr) 10px;
  gap: 6px;
  padding: 9px;
  border-radius: 20px;
  background: linear-gradient(145deg,#0eb6a7,#2677cf);
}
body.single-screen-runtime .home-quick-tools .home-learning-action img { width: 42px; height: 42px; }
body.single-screen-runtime .home-quick-tools .home-learning-action strong { font-size: 11px; line-height: 1.3; white-space: normal; }
body.single-screen-runtime .home-quick-tools .home-learning-action small { font-size: 7px; }
body.single-screen-runtime .home-quick-tools .home-learning-action em { display: none; }
body.single-screen-runtime .home-quick-tools .home-learning-action > b { font-size: 14px; }
body.single-screen-runtime .home-quick-tools .placement-card {
  min-height: 96px;
  grid-template-columns: minmax(0, 1fr) 39px;
  gap: 5px;
  margin: 0;
  padding: 10px;
  border-width: 2px;
  border-radius: 20px;
  box-shadow: 0 10px 0 rgba(29,12,71,.1),0 15px 22px rgba(19,8,48,.18);
}
body.single-screen-runtime .home-quick-tools .placement-card span { font-size: 8px; }
body.single-screen-runtime .home-quick-tools .placement-card strong { margin: 2px 0; font-size: 14px; }
body.single-screen-runtime .home-quick-tools .placement-card p { font-size: 9px; }
body.single-screen-runtime .home-quick-tools .placement-card button { height: 27px; margin-top: 4px; padding: 0 11px; font-size: 9px; }
body.single-screen-runtime .home-quick-tools .grade-badge { width: 39px; height: 39px; padding: 4px; font-size: 9px; line-height: 1.05; text-align: center; }
body.single-screen-runtime .home-learning-loop {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 10px;
  margin: 0 14px 12px;
  padding: 10px 13px;
  border-radius: 19px;
  color: #fff;
  background: rgba(30,18,73,.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
body.single-screen-runtime .home-learning-loop > span { grid-row: 1 / 3; color: #ffe36b; font-size: 9px; font-weight: 1000; }
body.single-screen-runtime .home-learning-loop > div { display: flex; align-items: center; gap: 5px; font-size: 11px; }
body.single-screen-runtime .home-learning-loop b { font-weight: 950; }
body.single-screen-runtime .home-learning-loop i { color: #65e4d7; font-style: normal; }
body.single-screen-runtime .home-learning-loop small { color: rgba(255,255,255,.68); font-size: 8px; }

.home-learning-grid .home-episode-challenge {
  display: grid;
  width: 100%;
  min-height: 80px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 19px;
}

.mvp-card-challenge {
  position: absolute;
  z-index: 5;
  right: 9px;
  bottom: 9px;
  min-height: 29px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff2d86, #6c3fca);
  box-shadow: 0 7px 16px rgba(61, 29, 126, .26);
  font-size: 9px;
  font-weight: 1000;
}
.mvp-card-challenge[hidden] { display: none !important; }
.home-learning-slot .mvp-card-challenge { right: 8px; bottom: 7px; min-height: 25px; padding-inline: 8px; font-size: 8px; }

@media (max-height: 700px) and (max-width: 880px) {
  .login-visual-shell {
    grid-template-rows: minmax(210px, 1fr) auto auto auto 22px;
    gap: 5px;
    padding-inline: 24px;
  }

  .login-cat-icon { width: 105px; margin-bottom: 4px; }
  .login-brand h1 { font-size: 40px; }
  .login-brand p { margin-top: 6px; font-size: 16px; }
  .login-real-actions { gap: 7px; }
  .login-main-button { min-height: 50px; }
  .login-main-button b { font-size: 19px; }
  .login-minor-actions { min-height: 30px; }
  .login-permission-note { padding-block: 5px; }
  .login-consent-row p { font-size: 9px; }
}

/* The same skill level can belong to a teenager. Age changes presentation only. */
#homeFlowScreen[data-age-band="teen"] {
  background: linear-gradient(165deg, #15253c 0%, #1b3750 62%, #183f4a 100%);
}
#homeFlowScreen[data-age-band="teen"] .home-ambient { display: none; }
#homeFlowScreen[data-age-band="teen"] .home-learning-overview {
  border: 1px solid rgba(190, 218, 231, .22);
  border-radius: 17px;
  background: rgba(10, 31, 50, .55);
  box-shadow: none;
}
#homeFlowScreen[data-age-band="teen"] .home-learning-action {
  grid-template-columns: minmax(0, 1fr) 18px;
  border: 1px solid rgba(167, 216, 227, .24);
  border-radius: 14px;
  background: #245d72;
  box-shadow: none;
}
#homeFlowScreen[data-age-band="teen"] .home-learning-action.library { background: #1b5264; }
#homeFlowScreen[data-age-band="teen"] .home-learning-action img { display: none; }
#homeFlowScreen[data-age-band="teen"] #homeEpisodeChallenge {
  grid-template-columns: minmax(0, 1fr) 18px;
  border-radius: 14px;
  background: #ecf6f5;
}
#homeFlowScreen[data-age-band="teen"] #homeEpisodeChallenge img { display: none; }
#homeFlowScreen[data-age-band="teen"] .bottom-tabs {
  height: 58px;
  align-items: center;
  border: 1px solid rgba(189, 222, 236, .28);
  border-radius: 15px;
  background: #142a40;
  box-shadow: 0 6px 22px rgba(4, 16, 31, .3);
}
#homeFlowScreen[data-age-band="teen"] .bottom-tabs::before,
#homeFlowScreen[data-age-band="teen"] .bottom-tabs .nav-icon { display: none; }
#homeFlowScreen[data-age-band="teen"] .bottom-tabs button,
#homeFlowScreen[data-age-band="teen"] .bottom-tabs button:first-child,
#homeFlowScreen[data-age-band="teen"] .bottom-tabs button:last-child { transform: none; }
#homeFlowScreen[data-age-band="teen"] .bottom-tabs b { padding-top: 0; font-size: 12px; text-shadow: none; }