@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --frame-fill: #0B0F13;
  --frame-border: #313841;
  --frame-border-width: 0.5px;
  --frame-radius: 16px;

  --nav-active: #00E676;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  background: #0b0f13;
}

body {
  overflow: hidden;
}


/* ==================================================
   LEARNING SCREEN
================================================== */

#learning-screen {
  position: relative;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  overflow: hidden;

  background-color: #0b0f13;

  background-image: url("./assets/learning-bg.png");
  background-repeat: no-repeat;
  background-size: 121.794872vw auto;
  background-position: -11.025641vw top;
}


/* ==================================================
   LOGO — SAME GEOMETRY AS MAIN
================================================== */

#logo-main {
  position: absolute;

  left: 50%;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 4.710793vw
  );

  width: 91.282051%;
  height: auto;

  transform: translateX(-50%);

  display: block;

  z-index: 1;

  pointer-events: none;
}


/* ==================================================
   BOTTOM NAV FRAME — SAME GEOMETRY AS MAIN
================================================== */

#bottom-nav-frame {
  position: absolute;

  left: 3vw;
  top: 85.071090vh;

  width: 94vw;
  height: 9.004739vh;

  z-index: 5;

  pointer-events: none;

  background: var(--frame-fill);

  border:
    var(--frame-border-width)
    solid
    var(--frame-border);

  border-radius: var(--frame-radius);
}


/* ==================================================
   BOTTOM NAV ICONS
================================================== */

#bottom-nav-icons {
  position: absolute;

  left: 3vw;
  top: 85.071090vh;

  width: 94vw;
  height: 9.004739vh;

  z-index: 6;

  pointer-events: auto;
}

.bottom-nav-icon {
  position: absolute;

  top: 5.263158%;

  width: 9.230769vw;
  height: 9.230769vw;

  transform: translateX(-50%);

  color: #313841;

  pointer-events: auto;

  cursor: pointer;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;
}

.bottom-nav-icon svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.bottom-nav-icon:link,
.bottom-nav-icon:visited,
.bottom-nav-icon:hover,
.bottom-nav-icon:active {
  color: #313841;
  text-decoration: none;
}

#nav_home_icon {
  left: 12.5%;
}

#nav_learning_icon {
  left: 37.5%;
}

#nav_signals_icon {
  left: 62.5%;
}

#nav_profile_icon {
  left: 87.5%;
}


/* ==================================================
   BOTTOM NAV LABELS
================================================== */

#bottom-nav-labels {
  position: absolute;

  left: 3vw;
  top: 85.071090vh;

  width: 94vw;
  height: 9.004739vh;

  z-index: 6;

  pointer-events: auto;
}

.bottom-nav-label {
  position: absolute;

  top: 57.894737%;

  width: 25%;
  height: 14px;

  color: #9A9A9A;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 11px;
  font-weight: 400;
  line-height: 14px;

  letter-spacing: 0;

  text-align: center;
  white-space: nowrap;

  pointer-events: auto;

  cursor: pointer;

  text-decoration: none;

  -webkit-tap-highlight-color: transparent;

  touch-action: manipulation;
}

.bottom-nav-label:link,
.bottom-nav-label:visited,
.bottom-nav-label:hover,
.bottom-nav-label:active {
  color: #9A9A9A;
  text-decoration: none;
}

#nav_home_label {
  left: 0;
}

#nav_learning_label {
  left: 25%;
}

#nav_signals_label {
  left: 50%;
}

#nav_profile_label {
  left: 75%;
}


/* ==================================================
   LEARNING ACTIVE STATE
================================================== */

#nav_learning_icon,
#nav_learning_icon:link,
#nav_learning_icon:visited,
#nav_learning_icon:hover,
#nav_learning_icon:active {
  color: var(--nav-active);
}

#nav_learning_icon svg {
  filter:
    drop-shadow(
      0 0 4px
      rgba(0, 230, 118, 0.75)
    )
    drop-shadow(
      0 0 10px
      rgba(0, 230, 118, 0.35)
    );
}

#nav_learning_label,
#nav_learning_label:link,
#nav_learning_label:visited,
#nav_learning_label:hover,
#nav_learning_label:active {
  color: var(--nav-active);
}

/* ==================================================
   LEARNING INFO CARD — FIGMA 390x844
================================================== */

#learning_info_card {
  position: absolute;

  left: 67.435897vw;
  top: calc(var(--tg-content-safe-area-inset-top, 0px) + 30.351819vw);

  width: 26.666667vw;
  height: 10vw;

  background: rgba(11, 15, 19, 0.80);

  border: 0.5px solid #313841;
  border-radius: 10px;
}

#learning_info_icon_wrap {
  position: absolute;

  left: 8.653846%;
  top: 17.948718%;

  width: 24.038462%;
  height: 64.102564%;

  background: rgba(0, 166, 85, 0.12);

  border-radius: 8px;
}

#learning_info_icon {
  position: absolute;

  left: 4%;
  top: 4%;

  width: 96%;
  height: 96%;
}


/* ==================================================
   LEARNING HEADER — FIGMA 390x844
================================================== */

#learning-title {
  position: absolute;

  left: 7.435897vw;

  top: calc(var(--tg-content-safe-area-inset-top, 0px) + 29.326178vw);

  width: 26.923077vw;
  height: 7.179487vw;

  margin: 0;

  color: #FFFFFF;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 5.384615vw;
  font-weight: 700;
  line-height: 7.179487vw;
  letter-spacing: 0;

  white-space: nowrap;

  z-index: 2;
  pointer-events: none;
}

#learning-subtitle {
  position: absolute;

  left: 7.435897vw;

  top: calc(var(--tg-content-safe-area-inset-top, 0px) + 35.480024vw);

  width: 53.846154vw;
  height: 5.128205vw;

  margin: 0;

  color: #9A9A9A;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 3.076923vw;
  font-weight: 400;
  line-height: 5.128205vw;
  letter-spacing: 0;

  white-space: nowrap;

  z-index: 2;
  pointer-events: none;
}


#learning_info_value {
  position: absolute;
  left: 43.269231%;
  top: 15.384615%;
  width: 48.076923%;
  height: 30.769231%;

  color: #FFFFFF;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.564103vw;
  font-weight: 500;
  line-height: 3.076923vw;
  letter-spacing: 0;
}

#learning_info_caption {
  position: absolute;
  left: 38.461538%;
  top: 56.410256%;
  width: 57.692308%;
  height: 25.641026%;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.307692vw;
  font-weight: 500;
  line-height: 2.564103vw;
  letter-spacing: 0;
}

/* ==================================================
   LEARNING PLAYER FRAME — FIGMA 390x844
================================================== */

#learning_player_frame {
  position: absolute;

  left: 4.615385vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 42.146691vw
  );

  width: 91.282051vw;
  height: 51.282051vw;

  background: rgba(255, 255, 255, 0.10);

  border: none;
  border-radius: 2.564103vw;

}

#learning_player_meta {
  position: absolute;

  left: 4.615385vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 95.480024vw
  );

  width: 91.282051vw;
  height: 18.461538vw;

  background: transparent;
  border: none;
  border-radius: 2.564103vw;
}

#learning_player_youtube_button {
  position: absolute;

  left: 63.846154vw;
  top: 5.897436vw;

  width: 23.333333vw;
  height: 7.692308vw;

  background: #00E676;

  border: 0.5px solid #313841;
  border-radius: 2.051282vw;
}

#learning_player_youtube_icon {
  visibility: hidden;

  left: 58.205128vw;
  top: 11.538462vw;

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_youtube_text {
  position: absolute;

  left: 67.948718vw;
  top: 7.692308vw;

  width: 15.128205vw;
  height: 4.102564vw;

  color: #06110D;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 3.076923vw;
  font-weight: 500;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}

#learning_player_title {
  position: absolute;

  left: 3.076923vw;
  top: 1.538462vw;

  width: 55.897436vw;
  height: 5.641026vw;

  color: #FFFFFF;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 4.102564vw;
  font-weight: 600;
  line-height: 5.641026vw;
  letter-spacing: 0;
}

#learning_player_subtitle {
  position: absolute;

  left: 3.076923vw;
  top: 7.179487vw;

  width: 56.923077vw;
  height: 4.615385vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.564103vw;
  font-weight: 600;
  line-height: 4.615385vw;
  letter-spacing: 0;
}

#learning_player_duration_icon {
  position: absolute;

  left: 3.076923vw;
  top: 13.076923vw;

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_duration_text {
  position: absolute;

  left: 8.717949vw;
  top: 13.076923vw;

  width: 11.282051vw;
  height: 4.102564vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.820513vw;
  font-weight: 400;
  line-height: 4.102564vw;
  letter-spacing: 0;
}

#learning_player_access_icon {
  position: absolute;

  left: 24.102564vw;
  top: 13.076923vw;

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_access_text {
  position: absolute;

  left: 29.743590vw;
  top: 13.076923vw;

  width: 13.589744vw;
  height: 4.102564vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.820513vw;
  font-weight: 400;
  line-height: 4.102564vw;
  letter-spacing: 0;
}

#learning_player_meta_svg {
  position: absolute;

  left: 4.615385vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 95.480024vw
  );

  width: 91.282051vw;
  height: 18.461538vw;
}


#learning_player_meta_svg_2 {
  position: absolute;

  left: 4.615385vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 115.992845vw
  );

  width: 91.282051vw;
  height: 18.461538vw;
}


#learning_player_youtube_button_1 {
  position: absolute;

  left: 68.461539vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 121.377460vw
  );

  width: 23.333333vw;
  height: 7.692308vw;

  background: #00E676;

  border: 0.5px solid #313841;
  border-radius: 2.051282vw;
}


#learning_player_youtube_text_1 {
  position: absolute;

  left: 72.564103vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 123.172332vw
  );

  width: 15.128205vw;
  height: 4.102564vw;

  color: #06110D;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 3.076923vw;
  font-weight: 500;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_title_2 {
  position: absolute;

  left: 7.692308vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 117.531307vw
  );

  width: 43.333333vw;
  height: 5.641026vw;

  color: #FFFFFF;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 4.102564vw;
  font-weight: 600;
  line-height: 5.641026vw;
  letter-spacing: 0;

  white-space: nowrap;
}

#learning_player_subtitle_2 {
  position: absolute;

  left: 7.692308vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 122.915922vw
  );

  width: 51.794872vw;
  height: 4.615385vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.564103vw;
  font-weight: 600;
  line-height: 4.615385vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_duration_icon_2 {
  position: absolute;

  left: 7.692308vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 128.556948vw
  );

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_duration_text_2 {
  position: absolute;

  left: 13.333334vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 128.556948vw
  );

  width: 11.282051vw;
  height: 4.102564vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.820513vw;
  font-weight: 400;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_access_icon_2 {
  position: absolute;

  left: 28.717949vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 128.556948vw
  );

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_access_text_2 {
  position: absolute;

  left: 34.358975vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 128.556948vw
  );

  width: 13.589744vw;
  height: 4.102564vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.820513vw;
  font-weight: 400;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_meta_svg_3 {
  position: absolute;

  left: 4.615385vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 136.505666vw
  );

  width: 91.282051vw;
  height: 18.461538vw;
}


#learning_player_title_3 {
  position: absolute;

  left: 7.692308vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 138.044128vw
  );

  width: 45.641026vw;
  height: 5.641026vw;

  color: #FFFFFF;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 4.102564vw;
  font-weight: 600;
  line-height: 5.641026vw;
  letter-spacing: 0;

  white-space: nowrap;
}

#learning_player_subtitle_3 {
  position: absolute;

  left: 7.692308vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 143.428743vw
  );

  width: 53.333333vw;
  height: 4.615385vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.564103vw;
  font-weight: 600;
  line-height: 4.615385vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_duration_icon_3 {
  position: absolute;

  left: 7.692308vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 149.069769vw
  );

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_duration_text_3 {
  position: absolute;

  left: 13.333334vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 149.069769vw
  );

  width: 11.282051vw;
  height: 4.102564vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.820513vw;
  font-weight: 400;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_access_icon_3 {
  position: absolute;

  left: 28.717949vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 149.069769vw
  );

  width: 4.102564vw;
  height: 4.102564vw;
}

#learning_player_access_text_3 {
  position: absolute;

  left: 34.358975vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 149.069769vw
  );

  width: 13.589744vw;
  height: 4.102564vw;

  color: #9A9A9A;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 2.820513vw;
  font-weight: 400;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}


#learning_player_youtube_button_3 {
  position: absolute;

  left: 68.461539vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 141.890281vw
  );

  width: 23.333333vw;
  height: 7.692308vw;

  background: #00E676;

  border: 0.5px solid #313841;
  border-radius: 2.051282vw;
}

#learning_player_youtube_text_3 {
  position: absolute;

  left: 72.564103vw;

  top: calc(
    var(--tg-content-safe-area-inset-top, 0px)
    + 143.685153vw
  );

  width: 15.128205vw;
  height: 4.102564vw;

  color: #06110D;

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 3.076923vw;
  font-weight: 500;
  line-height: 4.102564vw;
  letter-spacing: 0;

  white-space: nowrap;
}


/* ==================================================
   LEARNING_GLOBAL_NOWRAP_FIX_V1

   Global content-behaviour fix:
   these designed single-line texts must not be
   reflowed differently by different viewport widths.
================================================== */

#learning_info_value,
#learning_info_caption,
#learning_player_subtitle {
  white-space: nowrap;
}



/* ==================================================
   LEARNING_COMPONENT_LOCAL_GEOMETRY_V1

   The outer cards keep their existing page geometry.

   Their children are now positioned relative to the
   parent component instead of relative to viewport.

   INFO CARD parent:
     #learning_info_card

   LESSON 1 parent:
     #learning_player_meta
================================================== */


/* ==================================================
   +3 УРОКА — LOCAL COMPONENT GEOMETRY
================================================== */

#learning_info_card {
  position: absolute;
}

/*
  Icon was already calculated relative to the card.
  Keep the same parent-relative geometry.
*/
#learning_info_icon_wrap {
  position: absolute;

  left: 8.653846%;
  top: 17.948718%;

  width: 24.038462%;
  height: 64.102564%;
}

/*
  Text column now uses the available space inside
  learning_info_card itself.

  It is not allowed to create extra lines.
*/
#learning_info_value {
  position: absolute;

  left: 38.461538%;
  right: 3.846154%;
  top: 15.384615%;

  width: auto;
  height: 30.769231%;

  white-space: nowrap;
}

#learning_info_caption {
  position: absolute;

  left: 38.461538%;
  right: 3.846154%;
  top: 56.410256%;

  width: auto;
  height: 25.641026%;

  white-space: nowrap;
}


/* ==================================================
   LESSON 1 — LOCAL COMPONENT GEOMETRY

   Existing outer parent:
     width  = 91.282051vw
     height = 18.461538vw

   Existing child vw coordinates were converted
   mathematically into percentages of this parent.
================================================== */

#learning_player_meta {
  position: absolute;
}


/* TITLE
   old:
     left 3.076923vw
     top  1.538462vw
*/
#learning_player_title {
  position: absolute;

  left: 3.370787%;
  top: 8.333333%;

  width: 61.235955%;
  height: 30.555556%;

  white-space: nowrap;
}


/* DESCRIPTION
   old:
     left  3.076923vw
     top   7.179487vw
     width 56.923077vw
*/
#learning_player_subtitle {
  position: absolute;

  left: 3.370787%;
  top: 38.888889%;

  width: 63.000000%;
  height: 25%;

  white-space: nowrap;
}


/* DURATION ICON
   old:
     left 3.076923vw
     top  13.076923vw
*/
#learning_player_duration_icon {
  position: absolute;

  left: 3.370787%;
  top: 70.833333%;

  width: 4.494382%;
  height: 22.222222%;
}


/* 70 МИН */
#learning_player_duration_text {
  position: absolute;

  left: 9.550562%;
  top: 70.833333%;

  width: 12.359551%;
  height: 22.222222%;

  white-space: nowrap;
}


/* ACCESS ICON */
#learning_player_access_icon {
  position: absolute;

  left: 26.404494%;
  top: 70.833333%;

  width: 4.494382%;
  height: 22.222222%;
}


/* ДОСТУПЕН */
#learning_player_access_text {
  position: absolute;

  left: 32.584270%;
  top: 70.833333%;

  width: 14.887640%;
  height: 22.222222%;

  white-space: nowrap;
}


/* WATCH BUTTON
   remains inside lesson 1 parent
*/
#learning_player_youtube_button {
  position: absolute;

  left: 69.943820%;
  top: 31.944444%;

  width: 25.561798%;
  height: 41.666667%;
}


/* WATCH TEXT */
#learning_player_youtube_text {
  position: absolute;

  left: 74.438202%;
  top: 41.666667%;

  width: 16.573034%;
  height: 22.222222%;

  white-space: nowrap;
}



/* ================================================================
   LEARNING_RESPONSIVE_FLOW_V1

   GLOBAL MODEL

   Telegram provides the usable viewport / safe area.
   Main page content lives in normal vertical flow.
   Short viewports scroll.
   Tall viewports simply show more content.
   Bottom navigation remains outside the scroll container.

   No device-specific breakpoint is used.
================================================================ */


/* ================================================================
   SCREEN / TELEGRAM VIEWPORT
================================================================ */

#learning-screen {
  position: relative;

  width: 100%;

  height: var(
    --tg-viewport-stable-height,
    100dvh
  );

  min-height: var(
    --tg-viewport-stable-height,
    100dvh
  );

  overflow: hidden;
}


/* ================================================================
   MAIN SCROLLABLE CONTENT

   This is the global fix for:
   - small iPhones
   - large iPhones
   - Android
   - Telegram Desktop / macOS
   - arbitrary resized desktop window
================================================================ */

#learning-flow {
  position: absolute;

  left: 0;
  right: 0;

  top: var(
    --tg-content-safe-area-inset-top,
    0px
  );

  bottom: 0;

  box-sizing: border-box;

  overflow-x: hidden;
  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  /*
    Allows the last lesson to scroll completely above the
    persistent bottom navigation.
  */
  padding-bottom:
    calc(
      9.004739vh
      + 8vh
      + var(
          --tg-content-safe-area-inset-bottom,
          0px
        )
    );

  scrollbar-width: none;
}

#learning-flow::-webkit-scrollbar {
  display: none;
}


/* ================================================================
   HEADER
================================================================ */

#learning-header {
  position: relative;

  width: 100%;

  box-sizing: border-box;

  padding-top: 4.710793vw;
}


/*
  Same accepted logo width as Main / existing Learning,
  but now the logo is a normal-flow element.
*/
#learning-header #logo-main {
  position: relative;

  left: auto;
  top: auto;

  width: 91.282051%;
  height: auto;

  margin: 0 auto;

  transform: none;

  display: block;

  z-index: auto;
}


/* ================================================================
   TITLE + INFO CARD ROW
================================================================ */

#learning-heading-row {
  position: relative;

  width: 85.128206%;

  margin:
    1.794872vw
    auto
    0;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 3vw;

  box-sizing: border-box;
}

#learning-heading-copy {
  position: relative;

  flex: 1 1 auto;

  min-width: 0;
}


/* Title no longer has global screen Y. */
#learning-heading-copy #learning-title {
  position: relative;

  left: auto;
  top: auto;

  width: auto;
  height: auto;

  margin: 0;

  font-size: 5.384615vw;
  line-height: 7.179487vw;

  white-space: nowrap;
}


/* Subtitle follows title in document flow. */
#learning-heading-copy #learning-subtitle {
  position: relative;

  left: auto;
  top: auto;

  width: max-content;
  max-width: 100%;
  height: auto;

  margin: -1.025641vw 0 0;

  font-size: 3.076923vw;
  line-height: 5.128205vw;

  white-space: nowrap;
}


/* ================================================================
   +3 LESSONS COMPONENT
================================================================ */

#learning-heading-row #learning_info_card {
  position: relative;

  left: auto;
  top: auto;

  flex: 0 0 31.309905%;

  width: auto;
  height: auto;

  aspect-ratio: 104 / 39;

  box-sizing: border-box;
}


/*
  Children stay local to the component.
*/
#learning_info_icon_wrap {
  position: absolute;

  left: 8.653846%;
  top: 17.948718%;

  width: 24.038462%;
  height: 64.102564%;
}

#learning_info_value {
  position: absolute;

  left: 38.461538%;
  right: 2%;
  top: 15.384615%;

  width: auto;
  height: auto;

  white-space: nowrap;
}

#learning_info_caption {
  position: absolute;

  left: 38.461538%;
  right: 2%;
  top: 56.410256%;

  width: auto;
  height: auto;

  white-space: nowrap;
}


/* ================================================================
   VIDEO

   It follows the header. No screen-level Y coordinate.
================================================================ */

#learning-player-section {
  position: relative;

  width: 91.282051%;

  margin:
    1.538462vw
    auto
    0;
}

#learning-player-section #learning_player_frame {
  position: relative;

  left: auto;
  top: auto;

  width: 100%;
  height: auto;

  aspect-ratio: 356 / 200;

  display: block;

  border: 0;

  border-radius: 2.564103vw;
}


/* ================================================================
   LESSON LIST

   Cards now follow one another.
   No lesson has a Y coordinate measured from the screen.
================================================================ */

#learning-lessons {
  position: relative;

  width: 91.282051%;

  margin:
    2.051282vw
    auto
    0;

  display: flex;
  flex-direction: column;

  gap: 2.051282vw;
}

.learning-lesson {
  position: relative;

  width: 100%;

  aspect-ratio: 356 / 72;

  flex: 0 0 auto;
}


/* All three SVG shells fill their own lesson parent. */
#learning_lesson_1 #learning_player_meta_svg,
#learning_lesson_2 #learning_player_meta_svg_2,
#learning_lesson_3 #learning_player_meta_svg_3 {
  position: absolute;

  inset: 0;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  display: block;

  pointer-events: none;
}


/* ================================================================
   LESSON 1

   Existing inner component is retained.
================================================================ */

#learning_lesson_1 #learning_player_meta {
  position: absolute;

  inset: 0;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  background: transparent;
  border: 0;
}


/* local Figma coordinates inside 356 × 72 */

#learning_lesson_1 #learning_player_title {
  left: 3.370787%;
  top: 8.333333%;

  width: 61.235955%;
  height: 30.555556%;
}

#learning_lesson_1 #learning_player_subtitle {
  left: 3.370787%;
  top: 38.888889%;

  width: 63%;
  height: 25%;

  white-space: nowrap;
}

#learning_lesson_1 #learning_player_duration_icon {
  left: 3.370787%;
  top: 68.055556%;

  width: 4.494382%;
  height: 22.222222%;
}

#learning_lesson_1 #learning_player_duration_text {
  left: 9.550562%;
  top: 68.055556%;

  width: 12.359551%;
  height: 22.222222%;

  white-space: nowrap;
}

#learning_lesson_1 #learning_player_access_icon {
  left: 26.404494%;
  top: 68.055556%;

  width: 4.494382%;
  height: 22.222222%;
}

#learning_lesson_1 #learning_player_access_text {
  left: 32.584270%;
  top: 68.055556%;

  width: 14.887640%;
  height: 22.222222%;

  white-space: nowrap;
}

#learning_lesson_1 #learning_player_youtube_button {
  left: 69.943820%;
  top: 29.166667%;

  width: 25.561798%;
  height: 41.666667%;
}

#learning_lesson_1 #learning_player_youtube_text {
  left: 74.438202%;
  top: 38.888889%;

  width: 16.573034%;
  height: 22.222222%;

  white-space: nowrap;
}


/* ================================================================
   LESSON 2
   Frame-local geometry from Figma 356 × 72.
================================================================ */

#learning_lesson_2 #learning_player_title_2,
#learning_lesson_2 #learning_player_subtitle_2,
#learning_lesson_2 #learning_player_duration_icon_2,
#learning_lesson_2 #learning_player_duration_text_2,
#learning_lesson_2 #learning_player_access_icon_2,
#learning_lesson_2 #learning_player_access_text_2,
#learning_lesson_2 #learning_player_youtube_button_1,
#learning_lesson_2 #learning_player_youtube_text_1 {
  position: absolute;
}

#learning_lesson_2 #learning_player_title_2 {
  left: 3.370787%;
  top: 8.333333%;

  width: 47.471910%;
  height: 30.555556%;

  white-space: nowrap;
}

#learning_lesson_2 #learning_player_subtitle_2 {
  left: 3.370787%;
  top: 37.500000%;

  width: 56.741573%;
  height: 25%;

  white-space: nowrap;
}

#learning_lesson_2 #learning_player_duration_icon_2 {
  left: 3.370787%;
  top: 68.055556%;

  width: 4.494382%;
  height: 22.222222%;
}

#learning_lesson_2 #learning_player_duration_text_2 {
  left: 9.550562%;
  top: 68.055556%;

  width: 12.359551%;
  height: 22.222222%;

  white-space: nowrap;
}

#learning_lesson_2 #learning_player_access_icon_2 {
  left: 26.404494%;
  top: 68.055556%;

  width: 4.494382%;
  height: 22.222222%;
}

#learning_lesson_2 #learning_player_access_text_2 {
  left: 32.584270%;
  top: 68.055556%;

  width: 14.887640%;
  height: 22.222222%;

  white-space: nowrap;
}

#learning_lesson_2 #learning_player_youtube_button_1 {
  left: 69.943820%;
  top: 29.166667%;

  width: 25.561798%;
  height: 41.666667%;
}

#learning_lesson_2 #learning_player_youtube_text_1 {
  left: 74.438202%;
  top: 38.888889%;

  width: 16.573034%;
  height: 22.222222%;

  white-space: nowrap;
}


/* ================================================================
   LESSON 3
================================================================ */

#learning_lesson_3 #learning_player_title_3,
#learning_lesson_3 #learning_player_subtitle_3,
#learning_lesson_3 #learning_player_duration_icon_3,
#learning_lesson_3 #learning_player_duration_text_3,
#learning_lesson_3 #learning_player_access_icon_3,
#learning_lesson_3 #learning_player_access_text_3,
#learning_lesson_3 #learning_player_youtube_button_3,
#learning_lesson_3 #learning_player_youtube_text_3 {
  position: absolute;
}

#learning_lesson_3 #learning_player_title_3 {
  left: 3.370787%;
  top: 8.333333%;

  width: 50%;
  height: 30.555556%;

  white-space: nowrap;
}

#learning_lesson_3 #learning_player_subtitle_3 {
  left: 3.370787%;
  top: 37.500000%;

  width: 58.426966%;
  height: 25%;

  white-space: nowrap;
}

#learning_lesson_3 #learning_player_duration_icon_3 {
  left: 3.370787%;
  top: 68.055556%;

  width: 4.494382%;
  height: 22.222222%;
}

#learning_lesson_3 #learning_player_duration_text_3 {
  left: 9.550562%;
  top: 68.055556%;

  width: 12.359551%;
  height: 22.222222%;

  white-space: nowrap;
}

#learning_lesson_3 #learning_player_access_icon_3 {
  left: 26.404494%;
  top: 68.055556%;

  width: 4.494382%;
  height: 22.222222%;
}

#learning_lesson_3 #learning_player_access_text_3 {
  left: 32.584270%;
  top: 68.055556%;

  width: 14.887640%;
  height: 22.222222%;

  white-space: nowrap;
}

#learning_lesson_3 #learning_player_youtube_button_3 {
  left: 69.943820%;
  top: 29.166667%;

  width: 25.561798%;
  height: 41.666667%;
}

#learning_lesson_3 #learning_player_youtube_text_3 {
  left: 74.438202%;
  top: 38.888889%;

  width: 16.573034%;
  height: 22.222222%;

  white-space: nowrap;
}


/* ================================================================
   BOTTOM NAV

   Navigation geometry itself is intentionally NOT changed.

   It remains outside #learning-flow, so page scrolling can never
   drag the navigation with the lesson content.
================================================================ */


/* ================================================================
   LEARNING_IOS_TEXT_AUTOSIZE_V1

   Keep CSS-defined typography stable across iOS WebKit viewport
   sizes. Layout geometry itself is not changed.
================================================================ */

html,
body,
#learning-screen {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ========================================================================
   LEARNING_RESPONSIVE_SHELL_V2

   Telegram stable viewport
   -> Telegram content safe area
   -> Learning shell
      -> header
      -> player
      -> remaining space = lessons

   Only the lesson list may scroll when necessary.

   No device-specific rules.
======================================================================== */


/* ------------------------------------------------------------------------
   TELEGRAM APP SHELL
------------------------------------------------------------------------ */

#learning-screen {
  position: relative;

  width: 100%;

  height:
    var(
      --tg-viewport-stable-height,
      100dvh
    );

  min-height:
    var(
      --tg-viewport-stable-height,
      100dvh
    );

  overflow: hidden;

  box-sizing: border-box;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ------------------------------------------------------------------------
   LEARNING CONTENT AREA

   The flow itself is NOT a scrolling page anymore.

   It ends just above the persistent bottom navigation.

   Grid gives:
     header  -> intrinsic height
     player  -> intrinsic 16:9 component
     lessons -> all remaining usable height
------------------------------------------------------------------------ */

#learning-flow {
  position: absolute;

  top:
    var(
      --tg-content-safe-area-inset-top,
      0px
    );

  right:
    var(
      --tg-content-safe-area-inset-right,
      0px
    );

  bottom:
    calc(
      var(
        --tg-content-safe-area-inset-bottom,
        0px
      )
      + 6.75rem
    );

  left:
    var(
      --tg-content-safe-area-inset-left,
      0px
    );

  width: auto;
  height: auto;

  margin: 0;

  padding:
    0.75rem
    1rem
    0.5rem;

  box-sizing: border-box;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr);

  gap:
    clamp(
      0.4rem,
      1.25cqh,
      0.75rem
    );

  overflow: hidden;

  scrollbar-width: none;
}


/* ------------------------------------------------------------------------
   HEADER

   Normal first Grid row.
------------------------------------------------------------------------ */

#learning-header {
  position: relative;

  width: 100%;

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  min-width: 0;
}

#learning-header #logo-main {
  position: relative;

  left: auto;
  right: auto;
  top: auto;
  bottom: auto;

  width: 91.282051%;
  max-width: 100%;
  height: auto;

  margin:
    0
    auto;

  transform: none;

  display: block;

  object-fit: contain;
}


/* ------------------------------------------------------------------------
   TITLE + INFO ROW

   Percentage width is relative to its current component,
   not to a device model.

   Remove viewport-derived margin/gap.
------------------------------------------------------------------------ */

#learning-heading-row {
  position: relative;

  width: 93%;

  margin:
    0.4rem
    auto
    0;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 0.75rem;

  box-sizing: border-box;

  min-width: 0;
}


/* Keep the existing local +3-lessons component geometry. */

#learning-heading-row #learning_info_card {
  position: relative;

  left: auto;
  right: auto;
  top: auto;
  bottom: auto;

  flex: 0 0 31.309905%;

  width: auto;
  height: auto;

  aspect-ratio: 104 / 39;

  box-sizing: border-box;
}


/* ------------------------------------------------------------------------
   PLAYER

   Normal second Grid row.

   Video keeps its own aspect ratio.
   It is not positioned by a screen Y coordinate.
------------------------------------------------------------------------ */

#learning-player-section {
  position: relative;

  width: 100%;

  min-width: 0;

  margin: 0;

  box-sizing: border-box;
}

#learning-player-section #learning_player_frame {
  position: relative;

  left: auto;
  right: auto;
  top: auto;
  bottom: auto;

  width: 100%;

  height: auto;

  aspect-ratio: 356 / 200;

  display: block;

  margin: 0;

  border: 0;

  border-radius: 10px;
}


/* ------------------------------------------------------------------------
   LESSON AREA

   This is the only content area allowed to scroll.

   When all lessons fit:
     no scroll exists.

   When they do not fit:
     this list scrolls while header/player/nav remain stable.
------------------------------------------------------------------------ */

#learning-lessons {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  margin: 0;

  padding:
    0
    0
    0.25rem;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  overflow-x: hidden;
  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

#learning-lessons::-webkit-scrollbar {
  display: none;
}


/* ------------------------------------------------------------------------
   LESSON COMPONENTS

   Existing local percentage geometry is retained.

   Cards preserve their own 356×72 design proportion.
------------------------------------------------------------------------ */

#learning-lessons > .learning-lesson {
  position: relative;

  width: 100%;
  height: auto;

  min-width: 0;

  aspect-ratio: 356 / 72;

  flex:
    0
    0
    auto;
}


/* ------------------------------------------------------------------------
   PERSISTENT BOTTOM NAV

   Same shell principle that is now working on Main:

   safe bottom
   + visual design offset

   Main currently uses an additional +10px visual lift,
   so Learning receives the same final shell alignment.
------------------------------------------------------------------------ */

#bottom-nav-frame,
#bottom-nav-labels,
#bottom-nav-icons {
  position: absolute;

  left:
    calc(
      var(
        --tg-content-safe-area-inset-left,
        0px
      )
      + 1rem
    );

  right:
    calc(
      var(
        --tg-content-safe-area-inset-right,
        0px
      )
      + 1rem
    );

  top: auto;

  bottom:
    calc(
      var(
        --tg-content-safe-area-inset-bottom,
        0px
      )
      + 1rem
      + 10px
    );

  width: auto;
  max-width: none;

  height: 4.75rem;

  transform: none;

  box-sizing: border-box;
}

#bottom-nav-frame {
  z-index: 5;
}

#bottom-nav-labels,
#bottom-nav-icons {
  z-index: 6;
}

.bottom-nav-icon {
  width: 2.25rem;
  height: 2.25rem;
}