/* Calm, reference-led white surfaces with plum accents. */
:root {
  --primary: #60314f;
  --primary-2: #784363;
  --primary-3: #eee8ef;
  --bg: #f6f7f9;
  --surface: #fff;
  --surface-2: #f0f1f4;
  --ink: #192431;
  --muted: #66707d;
  --line: #e5e6ea;
  --gold: #60314f;
  --gold-soft: #f0e9ee;
  --navy: #60314f;
  --shadow-sm: 0 12px 34px rgba(25,34,48,.045);
}
html { scroll-padding-bottom: 110px; }
body { background: #f6f7f9; color: #192431; }
.app-shell { padding-left: 0; }
.side-nav { display: none !important; }
.view { min-height: 100dvh; padding: 34px 28px 130px; }
.view:focus { outline: none; }
.page { max-width: 980px; }
.btn, .btn--gold { background: #60314f; color: white; box-shadow: none; }
.btn:hover, .btn--gold:hover { background: #754062; box-shadow: 0 8px 18px rgba(96,49,79,.13); }
.btn--ghost, .btn--soft { background: #eee8ef; color: #60314f; }
.btn--ghost:hover, .btn--soft:hover { background: #e6dce7; }
.eyebrow, .link-btn, .xp { color: #60314f; }
.brand-mark { background: #60314f; }
.home-brand, .discovery-brand { color: #121721; }
.streak-pill { background: #fff; border: 1px solid #e4e6ea; color: #3f4858; box-shadow: none; }
.streak-pill .icon { color: #586172; }
.chip, .search { color: #596271; background: #fff; border-color: #e2e5ea; }
.chip.is-active { color: #fff; background: #60314f; border-color: #60314f; }
.label--solid { color: #60314f; background: #eee8ef; border: 1px solid #dfd1de; }
.course-card, .catalog-card, .ranked-card, .mode-card, .domain-card, .stat-card, .settings-list, .weekly-card, .extra-disclosure { background: white; border-color: #e5e6ea; box-shadow: var(--shadow-sm); }
.profile-identity-card { background: white; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.profile-identity-card h2 { color: var(--ink); }
.profile-identity-card__copy p, .profile-curiosity { color: #60314f; }
.profile-identity-card__copy p span, .profile-level-progress small { color: var(--muted); }
.profile-rank-ring { background: conic-gradient(#60314f var(--profile-progress),#e7e7ed 0); }
.profile-rank-ring::before { background: white; }
.profile-rank-ring .avatar { background: #eee8ef; color: #60314f; }
.profile-level-progress > span { background: #e6e7eb; }
.profile-level-progress i { background: #60314f; }
.reader-head { background: rgba(246,247,249,.94); }
.reader__lead, .reader__body, .extra-disclosure__inner p { color: #3e4857; }
.reader-actions--sticky { background: linear-gradient(180deg,transparent,rgba(246,247,249,.98) 28%); }
.mini-progress, .reader-linear-progress, .featured-progress > span { background: #e5e7eb; }
.mini-progress span, .reader-linear-progress span, .featured-progress i { background: #60314f; }
.placement-invite, .mode-hero, .knowledge-overview { background: #60314f; box-shadow: none; }
.game-profile-hero { background: #60314f; box-shadow: var(--shadow-sm); }

/* Floating frosted navigation: content remains visible through the glass. */
.bottom-nav {
  display: grid;
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(15px + env(safe-area-inset-bottom,0px));
  transform: translateX(-50%);
  width: min(720px,calc(100% - 28px));
  min-height: 78px;
  padding: 7px;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 2px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: linear-gradient(140deg,rgba(255,255,255,.75),rgba(255,255,255,.37));
  box-shadow: inset 0 0 0 1px rgba(190,193,201,.24),inset 0 2px 5px rgba(255,255,255,.8),0 8px 25px rgba(37,42,53,.09);
  backdrop-filter: blur(24px) saturate(1.65);
  -webkit-backdrop-filter: blur(24px) saturate(1.65);
  z-index: 45;
}
.bottom-nav .nav-item { min-width: 0; min-height: 62px; border-radius: 999px; padding: 6px 3px; gap: 5px; color: #121318; font-size: 11px; line-height: 1.1; font-weight: 600; }
.bottom-nav .nav-item .icon { width: 29px; height: 29px; flex: 0 0 29px; }
.bottom-nav .nav-item.is-active { background: rgba(109,81,107,.11); color: #60314f; }
.bottom-nav .nav-item:hover { background: rgba(255,255,255,.5); }
.bottom-nav .nav-item span { white-space: nowrap; }
.is-immersive .bottom-nav { display: none; }
.is-game { background: #f6f7f9; }
.is-game .view { height: calc(100dvh - 105px - env(safe-area-inset-bottom,0px)); padding: 8px; min-height: 0; }
.is-game .game-frame-shell { border-radius: 24px; }
.is-auth #game-countdown-root { display: none; }

/* A small, quiet feed instead of the full library. */
.discovery-page { width: min(100%,660px); }
.discovery-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.discovery-brand { display: inline-flex; align-items: center; gap: 9px; }
.discovery-brand strong { font-size: 25px; letter-spacing: -.055em; font-weight: 850; }
.discovery-brand .brand-mark { width: 32px; height: 36px; flex-basis: 32px; border-radius: 12px; }
.discovery-header .streak-pill { min-height: 43px; gap: 7px; padding: 7px 15px; border-radius: 999px; }
.discovery-header .streak-pill .icon { width: 18px; height: 18px; }
.discovery-header .streak-pill small { font-size: 10px; font-weight: 450; }
.discovery-intro { margin: 62px 4px 27px; }
.discovery-intro > span { font-size: 10px; letter-spacing: .15em; color: #979ca5; }
.discovery-intro h1 { margin: 8px 0; font-size: 26px; letter-spacing: -.045em; }
.discovery-intro p { margin: 0; color: #7c838e; font-size: 12px; }
.discovery-feed { display: grid; gap: clamp(55px,12vh,115px); }
.discovery-card { padding: 24px; background: #fff; border: 1px solid #e3e5e9; border-radius: 30px; box-shadow: 0 18px 40px rgba(31,41,56,.045); }
.discovery-card__image { position: relative; overflow: hidden; aspect-ratio: 1.92; border-radius: 22px; background: #eff0f3; border: 1px solid #e8e8eb; }
.discovery-card__image > img { width: 100%; height: 100%; object-fit: cover; }
.discovery-bookmark { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid rgba(222,224,233,.8); border-radius: 50%; color: #656476; background: rgba(255,255,255,.52); backdrop-filter: blur(12px); cursor: pointer; }
.discovery-bookmark .icon { width: 20px; height: 20px; }
.discovery-bookmark.is-saved { background: #60314f; color: white; }
.discovery-bookmark.is-saved .icon { fill: currentColor; }
.discovery-card__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin: 19px 0 14px; }
.discovery-card__meta > span { display: inline-flex; align-items: center; gap: 5px; max-width: 80%; padding: 5px 10px; border: 1px solid #d9cddd; border-radius: 99px; background: #f0ebf2; color: #60314f; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.discovery-card__meta .icon { width: 12px; height: 12px; flex: none; }
.discovery-card__meta small { display: inline-flex; align-items: center; gap: 4px; color: #9298a4; font-size: 10px; }
.discovery-card h2 { margin: 0 0 13px; color: #1b2635; font-size: clamp(21px,3vw,28px); line-height: 1.25; letter-spacing: -.035em; }
.discovery-card p { margin: 0 0 22px; color: #646d7a; font-size: 16px; line-height: 1.6; }
.discovery-start { width: 100%; min-height: 59px; gap: 10px; font-size: 17px; font-weight: 500; }
.discovery-start .icon { width: 17px; fill: currentColor; }
.discovery-card.will-reveal { opacity: .15; transform: translateY(25px); transition: opacity 600ms ease,transform 700ms cubic-bezier(.2,.7,.2,1); }
.discovery-card.is-in-view { opacity: 1; transform: none; }
.discovery-end { display: grid; justify-items: center; gap: 14px; margin: 70px 0 20px; text-align: center; }
.discovery-end > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #ece7ef; color: #60314f; }
.discovery-end h2 { font-size: 22px; margin: 0; }
.discovery-end p { max-width: 320px; font-size: 13px; margin: 0 0 5px; color: var(--muted); }

/* Collections are made from actual published lessons. */
.learning-collections { width: min(100%,760px); }
.collection-page-title { margin: 12px 0 30px; }
.collection-page-title > span { color: #9299a4; font-size: 10px; letter-spacing: .15em; }
.collection-page-title h1 { margin-top: 8px; font-size: 34px; color: #1b2635; }
.collection-page-title p { color: #727b87; font-size: 14px; margin: 12px 0 0; }
.collection-page-title > small { display: block; color: var(--muted); margin-top: 12px; }
.learning-feature { overflow: hidden; border: 1px solid #e4e5e9; background: white; border-radius: 29px; box-shadow: 0 16px 40px rgba(31,41,56,.045); }
.learning-feature > img { width: 100%; aspect-ratio: 2.08; object-fit: cover; }
.learning-feature__body { padding: 24px; }
.learning-feature .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.learning-feature h2 { margin: 15px 0 12px; font-size: 27px; font-weight: 650; color: #1b2635; }
.learning-feature p { font-size: 16px; color: #66707d; line-height: 1.5; margin-bottom: 20px; }
.learning-progress { width: 100%; height: 6px; overflow: hidden; border-radius: 99px; background: #e5e6e9; }
.learning-progress span { display: block; height: 100%; border-radius: inherit; background: #60314f; transition: width 500ms ease; }
.learning-feature__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; color: #646d7a; }
.learning-feature__footer small { font-size: 12px; }
.learning-feature__footer .link-btn { font-size: 12px; font-weight: 550; }
.learning-feature__footer .icon { width: 15px; }
.collection-list-heading { margin: 34px 0 21px; color: #999fa7; letter-spacing: .12em; font-size: 11px; font-weight: 500; }
.learning-collection-list { display: grid; gap: 18px; }
.learning-collection-row { display: grid; grid-template-columns: 98px minmax(0,1fr) 19px; align-items: center; gap: 18px; width: 100%; padding: 17px; border: 1px solid #e4e5e9; border-radius: 24px; background: #fff; text-align: left; box-shadow: 0 14px 34px rgba(31,41,56,.035); cursor: pointer; transition: transform 180ms ease,box-shadow 180ms ease; }
.learning-collection-row:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(31,41,56,.07); }
.learning-collection-row > img { width: 98px; aspect-ratio: 1; object-fit: cover; border: 1px solid #e5e6eb; border-radius: 16px; }
.learning-collection-row h3 { color: #1b2635; font-size: 18px; font-weight: 550; letter-spacing: -.035em; margin: 0 0 10px; }
.learning-collection-row p { margin: 9px 0 0; color: #67717f; font-size: 13px; line-height: 1.3; }
.learning-collection-row > .icon { color: #969ea8; width: 19px; height: 19px; }
.collection-back { margin-bottom: 22px; }
.tour-replay { margin-top: 26px; font-size: 12px; }
.collection-lesson small { display: block; color: #949aa4; font-size: 9px; margin-bottom: 6px; letter-spacing: .1em; }
.collection-lesson.is-locked { opacity: .7; }
.collection-page-title .learning-progress { margin-top: 22px; }

/* Fixed to the edge, not a blocking popup. */
.kelam-edge-timer { position: fixed; z-index: 48; right: 0; top: 46%; display: grid; justify-items: center; gap: 4px; width: 72px; padding: 14px 7px 13px 12px; border: 1px solid rgba(255,255,255,.2); border-right: 0; border-radius: 23px 0 0 23px; background: #60314f; color: white; box-shadow: -5px 10px 28px rgba(74,39,67,.22); cursor: pointer; font-variant-numeric: tabular-nums; }
.kelam-edge-timer > .icon { width: 21px; height: 21px; margin-bottom: 3px; }
.edge-grip { position: absolute; left: 4px; top: 39%; color: rgba(255,255,255,.4); font-size: 18px; }
.edge-title { font-size: 9px; letter-spacing: .11em; }
.kelam-edge-timer small { color: rgba(255,255,255,.7); font-size: 6px; letter-spacing: .04em; }
.kelam-edge-timer strong { font-size: 11px; letter-spacing: -.02em; }
.game-nudge { display: none; }

/* Guided first visit: highlights the actual interface. */
.has-product-tour { overflow-x: hidden; }
#product-tour-root { position: relative; z-index: 200; }
.tour-backdrop { position: fixed; inset: 0; z-index: 200; background: transparent; }
.tour-spotlight { position: fixed; z-index: 201; pointer-events: none; border: 2px solid rgba(255,255,255,.95); border-radius: 23px; box-shadow: 0 0 0 9999px rgba(25,21,33,.55),0 0 0 5px rgba(255,255,255,.2); transition: top 220ms ease,left 220ms ease,width 220ms ease,height 220ms ease; }
.product-tour-card { position: fixed; z-index: 202; width: min(365px,calc(100vw - 24px)); padding: 22px; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: #fff; box-shadow: 0 25px 80px rgba(24,15,30,.24); }
.tour-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-card-top > span { font-size: 9px; color: #826579; letter-spacing: .1em; }
.tour-card-top button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f4f1f5; color: #746579; cursor: pointer; }
.tour-card-top .icon { width: 15px; height: 15px; }
.tour-steps { display: flex; gap: 5px; margin: 12px 0 20px; }
.tour-steps i { height: 3px; width: 22px; border-radius: 99px; background: #e9e7ec; }
.tour-steps i.is-current { background: #60314f; }
.product-tour-card h2 { font-size: 23px; line-height: 1.2; margin-bottom: 11px; color: #1b2635; }
.product-tour-card p { font-size: 13px; line-height: 1.7; color: #6a7180; margin-bottom: 23px; }
.product-tour-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-tour-card footer > span { font-size: 10px; color: #9e96a0; }
.product-tour-card footer .btn { min-height: 42px; padding: 9px 14px; font-size: 11px; }
.product-tour-card footer .btn .icon { width: 14px; }
.product-tour-card footer .link-btn { font-size: 11px; }
@media (max-width: 720px) {
  .view { padding: 24px 17px 118px; }
  .bottom-nav { bottom: calc(13px + env(safe-area-inset-bottom,0px)); width: calc(100% - 24px); min-height: 70px; padding: 5px; }
  .bottom-nav .nav-item { min-height: 57px; font-size: 8px; gap: 5px; }
  .bottom-nav .nav-item .icon { width: 24px; height: 24px; flex-basis: 24px; }
  .discovery-header { padding: 0 2px; }
  .discovery-brand strong { font-size: 24px; }
  .discovery-intro { margin: 46px 3px 25px; }
  .discovery-intro h1 { font-size: 22px; }
  .discovery-intro p { font-size: 11px; }
  .discovery-card { padding: 16px; border-radius: 25px; }
  .discovery-card__image { border-radius: 17px; }
  .discovery-card__meta { margin: 15px 0 13px; }
  .discovery-card__meta > span { font-size: 8px; padding: 4px 7px; }
  .discovery-card__meta small { font-size: 8px; }
  .discovery-card h2 { font-size: 22px; padding-right: 13px; }
  .discovery-card p { font-size: 14px; line-height: 1.6; margin-bottom: 19px; padding-right: 12px; }
  .discovery-start { min-height: 50px; font-size: 15px; }
  .discovery-feed { gap: 70px; }
  .kelam-edge-timer { width: 55px; border-radius: 18px 0 0 18px; padding: 11px 4px 11px 8px; }
  .kelam-edge-timer strong { font-size: 9px; }
  .kelam-edge-timer > .icon { width: 18px; height: 18px; }
  .edge-title { font-size: 8px; }
  .kelam-edge-timer small { font-size: 5px; }
  .learning-feature { border-radius: 25px; }
  .learning-feature__body { padding: 19px; }
  .learning-feature h2 { font-size: 23px; }
  .learning-feature p { font-size: 14px; }
  .learning-feature__footer small, .learning-feature__footer .link-btn { font-size: 10px; }
  .learning-collection-row { grid-template-columns: 72px minmax(0,1fr) 14px; gap: 12px; padding: 12px; border-radius: 21px; }
  .learning-collection-row > img { width: 72px; border-radius: 12px; }
  .learning-collection-row h3 { font-size: 15px; margin-bottom: 8px; }
  .learning-collection-row p { font-size: 11px; }
  .collection-list-heading { margin-top: 27px; }
  .learning-collection-list { gap: 14px; }
  .collection-page-title { margin-top: 4px; }
  .collection-page-title h1 { font-size: 29px; }
  .collection-page-title p { font-size: 12px; }
  .is-game .view { height: calc(100dvh - 94px - env(safe-area-inset-bottom,0px)); padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .view, .discovery-card, .learning-collection-row, .tour-spotlight { animation: none !important; transition: none !important; transform: none; }
  .discovery-card.will-reveal { opacity: 1; }
}