/* Rich-text authoring uses the short family name; keep default fallbacks intact. */
@font-face {
  font-family: "Atkinson";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/local/atkinson-hyperlegible/regular.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/local/atkinson-hyperlegible/bold.woff2") format("woff2");
}

:root {
  --learn-card-width: 660px;
}

.learn-layer {
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.05), transparent 42%),
    #070809;
  overflow: hidden;
}

.learn-mount,
#learnMount {
  position: absolute;
  inset: 0;
}

.learn-experience {
  --learn-upper: #274e43;
  --learn-lower: #719458;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--shell-fg);
  overflow: hidden;
  isolation: isolate;
}

.learn-backdrop {
  position: absolute;
  z-index: -1;
  inset: -12%;
  background:
    radial-gradient(
      ellipse at 26% 30%,
      color-mix(in srgb, var(--learn-upper) 72%, transparent),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 76% 72%,
      color-mix(in srgb, var(--learn-lower) 68%, transparent),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--learn-upper) 30%, #08090b),
      #090a0c 48%,
      color-mix(in srgb, var(--learn-lower) 28%, #08090b)
    );
  filter: saturate(.78) brightness(.74);
  transition: background 500ms ease;
}

body[data-theme="day"] .learn-backdrop {
  filter: saturate(.72) brightness(1.12);
}

.learn-topbar {
  position: relative;
  z-index: 4;
  min-height: 62px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 10px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    8px
    max(12px, env(safe-area-inset-left));
}

.learn-menu-button,
.learn-safety-button,
.learn-example-nav,
.learn-caption-prev,
.learn-caption-next {
  border: 1px solid var(--shell-border);
  background: color-mix(in srgb, var(--shell-panel) 78%, transparent);
  color: var(--shell-fg);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.learn-menu-button,
.learn-safety-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  justify-self: center;
}

.learn-menu-button {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.learn-safety-button {
  font-size: 20px;
}

.learn-heading {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.learn-heading-kicker {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .22em;
}

.learn-heading-count {
  color: var(--shell-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .1em;
}

.learn-stage {
  min-height: 0;
  display: grid;
  grid-template-columns:
    minmax(46px, 1fr)
    minmax(0, var(--learn-card-width))
    minmax(46px, 1fr);
  align-items: center;
  gap: clamp(4px, 2vw, 28px);
  padding:
    0
    max(8px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

.learn-example-nav {
  width: clamp(42px, 5vw, 58px);
  height: clamp(72px, 12vh, 118px);
  border-radius: 22px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  opacity: .78;
  transition:
    transform 140ms ease,
    opacity 140ms ease,
    background 140ms ease;
}

.learn-example-prev { justify-self: end; }
.learn-example-next { justify-self: start; }

.learn-example-nav:hover {
  opacity: 1;
  transform: scale(1.045);
  background: rgba(255,255,255,.08);
}

.learn-card {
  align-self: center;
  min-width: 0;
  max-height: calc(100dvh - 86px);
  display: grid;
  grid-template-rows: 86px auto auto auto;
  gap: 10px;
  padding: 12px;
  opacity: 1;
  transform: translateX(0) scale(1);
  transition:
    opacity 150ms ease,
    transform 180ms cubic-bezier(.2,.75,.2,1);
}

.learn-card.is-leaving-next {
  opacity: 0;
  transform: translateX(-28px) scale(.987);
}

.learn-card.is-leaving-previous {
  opacity: 0;
  transform: translateX(28px) scale(.987);
}

.learn-card.is-entering {
  opacity: 0;
  transform: translateX(22px) scale(.988);
  transition: none;
}

.learn-rebracket {
  position: relative;
  width: 100%;
  height: 82px;
  overflow: visible;
  font-family:
    "Dosis",
    "Arial Narrow",
    Arial,
    sans-serif;
  font-size: clamp(28px, 4.3vw, 46px);
  font-weight: 650;
  letter-spacing: 0;
}

.learn-rebracket-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  color: rgba(255,255,255,.94);
  text-shadow: 0 4px 18px rgba(0,0,0,.38);
  transform:
    translate(var(--x-a), -50%);
  transition:
    transform 1400ms cubic-bezier(.22,.72,.24,1),
    color 700ms ease;
  will-change: transform;
}

.learn-rebracket[data-state="b"] .learn-rebracket-letter {
  transform:
    translate(var(--x-b), -50%);
  color:
    color-mix(in srgb, white 88%, var(--learn-lower));
}

.learn-rebracket-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  text-align: center;
  text-wrap: balance;
}

.learn-video-shell {
  position: relative;
  width: min(600px, 100%);
  margin: 0 auto;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #05060a;
  box-shadow:
    0 18px 48px rgba(0,0,0,.38),
    0 0 26px rgba(225,238,255,.08);
}

.learn-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #05060a;
}

.learn-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.54);
  color: white;
  font-size: 27px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.learn-video-shell.is-playing .learn-video-play {
  display: none;
}

.learn-credit {
  width: min(600px, 100%);
  margin: 0 auto;
  color: color-mix(in srgb, var(--shell-fg) 70%, transparent);
  line-height: 1.25;
}

.learn-caption-area {
  width: min(650px, 100%);
  min-height: 64px;
  margin: 0 auto;
  display: grid;
  gap: 7px;
}

.learn-caption {
  min-height: 34px;
  color: color-mix(in srgb, var(--shell-fg) 90%, transparent);
  line-height: 1.36;
  text-wrap: pretty;
}

.learn-caption-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}

.learn-caption-prev,
.learn-caption-next {
  width: 28px;
  height: 25px;
  border-radius: 9px;
}

.learn-caption-counter {
  min-width: 48px;
  color: var(--shell-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  text-align: center;
}

.learn-caption-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.learn-caption-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shell-fg) 28%, transparent);
  cursor: pointer;
}

.learn-caption-dot.active {
  background: color-mix(in srgb, var(--shell-fg) 84%, transparent);
}

.learn-status {
  position: absolute;
  z-index: 6;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: min(500px, calc(100vw - 40px));
  padding: 13px 18px;
  border: 1px solid var(--shell-border);
  border-radius: 14px;
  background: var(--shell-panel);
  color: var(--shell-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  backdrop-filter: blur(15px);
}

@media (max-width: 720px) {
  :root {
    --learn-card-width: min(100vw - 76px, 620px);
  }

  .learn-topbar {
    min-height: 54px;
    grid-template-columns: 44px 1fr 44px;
    padding-bottom: 2px;
  }

  .learn-menu-button,
  .learn-safety-button {
    width: 38px;
    height: 38px;
  }

  .learn-stage {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      34px;
    gap: 4px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .learn-example-nav {
    width: 32px;
    height: 76px;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    font-size: 38px;
  }

  .learn-card {
    max-height: calc(100dvh - 58px);
    grid-template-rows: 66px auto auto auto;
    gap: 7px;
    padding: 4px;
  }

  .learn-rebracket {
    height: 62px;
    font-size: clamp(25px, 8vw, 34px);
  }

  .learn-video-shell {
    width: 100%;
    border-radius: 16px;
  }

  .learn-video-play {
    width: 58px;
    height: 58px;
    font-size: 22px;
  }
}

/* V4 LEARN VISUAL PARITY — CONTROLS / ARROWS / COLOR */

/*
 * The temporary v4 letter-transition system is intentionally
 * left untouched here.
 */


/* ==========================================================
   LOWER-LEFT [b] + NSFW CONTROLS
   ========================================================== */

.learn-topbar {
  position: absolute;
  z-index: 20;

  top: auto;
  right: auto;

  left:
    max(
      28px,
      env(safe-area-inset-left)
    );

  bottom:
    max(
      28px,
      env(safe-area-inset-bottom)
    );

  width: auto;
  min-height: 0;

  display: flex;
  grid-template-columns: none;

  align-items: center;
  justify-content: flex-start;

  gap: 5px;
  padding: 6px;

  border:
    1px solid
    rgba(255, 255, 255, .20);

  border-radius: 999px;

  background:
    rgba(7, 9, 14, .58);

  box-shadow:
    0 8px 28px
    rgba(0, 0, 0, .28);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* No LEARN / example-count heading in the corner control. */
.learn-heading {
  display: none !important;
}


/* Real [b] artwork rather than typed "[b]". */
.learn-menu-button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  padding: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, .24);

  border-radius: 12px;

  font-size: 0;

  background:
    url("../assets/bracketeer_logo.jpg")
    center / cover
    no-repeat;

  box-shadow:
    0 0 0 1px
    rgba(0, 0, 0, .28);
}


.learn-safety-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, .20);

  border-radius: 50%;

  background:
    rgba(8, 10, 16, .64);

  color: white;

  font-size: 21px;
  line-height: 1;

  box-shadow:
    inset 0 0 10px
    rgba(255, 255, 255, .025);
}


.learn-menu-button:hover,
.learn-menu-button:focus-visible,
.learn-safety-button:hover,
.learn-safety-button:focus-visible {
  border-color:
    rgba(255, 255, 255, .42);
}


/* ==========================================================
   LEARN TEXT COLOR
   ========================================================== */

.learn-rebracket {
  color:
    rgba(252, 252, 253, .97);
}


.learn-rebracket-letter {
  color:
    rgba(252, 252, 253, .97);

  text-shadow:
    0 0 5px rgba(255, 255, 255, .30),
    0 0 14px rgba(255, 255, 255, .12),
    0 4px 18px rgba(0, 0, 0, .34);
}


/*
 * Don't tint the second state with the example palette.
 * The future shared text engine will replace this renderer.
 */
.learn-rebracket[data-state="b"]
.learn-rebracket-letter {
  color:
    rgba(252, 252, 253, .97);
}


.learn-rebracket-fallback {
  color:
    rgba(252, 252, 253, .97);

  text-shadow:
    0 0 5px
    rgba(255, 255, 255, .22);
}


.learn-caption {
  color:
    rgba(249, 249, 251, .96);

  text-shadow:
    0 1px 2px
    rgba(0, 0, 0, .28);
}


.learn-credit {
  color:
    rgba(235, 236, 240, .62);

  text-shadow:
    0 1px 2px
    rgba(0, 0, 0, .22);
}


.learn-caption-counter {
  color:
    rgba(236, 237, 241, .58);
}


/* ==========================================================
   LARGE GLOWING NAVIGATION CHEVRONS
   ========================================================== */

/*
 * Temporary clean geometric approximation of the current
 * rendered glyph arrows. These are NOT part of the future
 * shared letter-transition engine.
 */

.learn-example-nav {
  position: relative;

  width:
    clamp(
      72px,
      8vw,
      112px
    );

  height:
    clamp(
      100px,
      16vh,
      150px
    );

  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: transparent;

  font-size: 0;
  line-height: 0;

  opacity: .92;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  overflow: visible;

  transition:
    opacity 140ms ease,
    transform 140ms ease;
}


.learn-example-nav:hover,
.learn-example-nav:focus-visible {
  opacity: 1;

  background: transparent;

  transform:
    scale(1.055);
}


.learn-example-nav::before,
.learn-example-nav::after {
  content: "";

  position: absolute;

  top: 50%;

  width:
    clamp(
      35px,
      3vw,
      47px
    );

  height:
    clamp(
      6px,
      .48vw,
      8px
    );

  border-radius:
    999px;

  background:
    rgba(
      249,
      251,
      255,
      .96
    );

  box-shadow:
    0 0 5px
      rgba(248, 251, 255, .88),

    0 0 11px
      rgba(237, 244, 255, .56),

    0 0 24px
      rgba(225, 237, 255, .24);

  pointer-events: none;
}


/* LEFT */

.learn-example-prev::before,
.learn-example-prev::after {
  left: 24%;

  transform-origin:
    left center;
}


.learn-example-prev::before {
  transform:
    translateY(-50%)
    rotate(-40deg);
}


.learn-example-prev::after {
  transform:
    translateY(-50%)
    rotate(40deg);
}


/* RIGHT */

.learn-example-next::before,
.learn-example-next::after {
  right: 24%;

  transform-origin:
    right center;
}


.learn-example-next::before {
  transform:
    translateY(-50%)
    rotate(40deg);
}


.learn-example-next::after {
  transform:
    translateY(-50%)
    rotate(-40deg);
}


.learn-example-prev {
  justify-self: end;

  margin-right:
    clamp(
      0px,
      1vw,
      18px
    );
}


.learn-example-next {
  justify-self: start;

  margin-left:
    clamp(
      0px,
      1vw,
      18px
    );
}


/* ==========================================================
   DAY MODE
   ========================================================== */

body[data-theme="day"] .learn-rebracket,
body[data-theme="day"] .learn-rebracket-letter,
body[data-theme="day"] .learn-rebracket-fallback {
  color:
    rgba(25, 28, 33, .94);

  text-shadow:
    0 1px 2px
    rgba(255, 255, 255, .35);
}


body[data-theme="day"] .learn-caption {
  color:
    rgba(22, 25, 30, .92);

  text-shadow: none;
}


body[data-theme="day"] .learn-credit {
  color:
    rgba(31, 35, 42, .58);

  text-shadow: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .learn-topbar {
    left:
      max(
        12px,
        env(safe-area-inset-left)
      );

    bottom:
      max(
        12px,
        env(safe-area-inset-bottom)
      );

    padding: 5px;
    gap: 4px;
  }


  .learn-menu-button {
    width: 43px;
    height: 43px;

    flex-basis: 43px;
  }


  .learn-safety-button {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    font-size: 19px;
  }


  .learn-example-nav {
    width: 42px;
    height: 90px;
  }


  .learn-example-nav::before,
  .learn-example-nav::after {
    width: 28px;
    height: 5px;
  }


  .learn-example-prev::before,
  .learn-example-prev::after {
    left: 10%;
  }


  .learn-example-next::before,
  .learn-example-next::after {
    right: 10%;
  }


  .learn-example-prev,
  .learn-example-next {
    margin-left: 0;
    margin-right: 0;
  }
}

/* V4 LEARN PARITY 2B */


/* ==========================================================
   ACTUALLY DIFFERENT NIGHT / DAY BACKGROUNDS
   ========================================================== */

body[data-theme="night"] .learn-backdrop {
  background:
    radial-gradient(
      ellipse at 26% 30%,
      color-mix(
        in srgb,
        var(--learn-upper) 72%,
        transparent
      ),
      transparent 48%
    ),
    radial-gradient(
      ellipse at 76% 72%,
      color-mix(
        in srgb,
        var(--learn-lower) 68%,
        transparent
      ),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--learn-upper) 30%,
        #08090b
      ),
      #090a0c 48%,
      color-mix(
        in srgb,
        var(--learn-lower) 28%,
        #08090b
      )
    );

  filter:
    saturate(.78)
    brightness(.74);
}


body[data-theme="day"] .learn-backdrop {
  background:
    radial-gradient(
      ellipse at 26% 30%,
      color-mix(
        in srgb,
        var(--learn-upper) 32%,
        #ffffff
      ),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 76% 72%,
      color-mix(
        in srgb,
        var(--learn-lower) 34%,
        #ffffff
      ),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--learn-upper) 18%,
        #f5f6f4
      ),
      #eef1ef 48%,
      color-mix(
        in srgb,
        var(--learn-lower) 20%,
        #f6f6f3
      )
    );

  filter:
    saturate(.70)
    brightness(1.02);
}


body[data-theme="day"] .learn-topbar {
  border-color:
    rgba(25, 30, 35, .16);

  background:
    rgba(245, 247, 246, .74);

  box-shadow:
    0 8px 28px
    rgba(36, 45, 40, .12);
}


body[data-theme="day"] .learn-safety-button {
  border-color:
    rgba(25, 30, 35, .16);

  background:
    rgba(250, 251, 250, .82);
}


/* ==========================================================
   KEEP CHEVRONS CLOSE TO THE CONTENT
   ========================================================== */

/*
 * Don't allow desktop spare width to live between the
 * arrows and the example.
 */
.learn-stage {
  grid-template-columns:
    54px
    minmax(
      0,
      var(--learn-card-width)
    )
    54px;

  justify-content:
    center;

  column-gap:
    0;
}


/*
 * Pull the arrows slightly into the outer margins of the
 * card. The video itself is narrower than the card.
 */
.learn-example-prev {
  justify-self:
    end;

  margin: 0;

  transform:
    translateX(24px);
}


.learn-example-next {
  justify-self:
    start;

  margin: 0;

  transform:
    translateX(-24px);
}


.learn-example-prev:hover,
.learn-example-prev:focus-visible {
  transform:
    translateX(24px)
    scale(1.055);
}


.learn-example-next:hover,
.learn-example-next:focus-visible {
  transform:
    translateX(-24px)
    scale(1.055);
}


/* ==========================================================
   CAPTION CAROUSEL
   ========================================================== */

/*
 * One line break is retained within a carousel page.
 * Blank-line / block boundaries are separate pages.
 */
.learn-caption {
  white-space:
    pre-line;
}


.learn-caption-area {
  position:
    relative;

  min-height:
    76px;
}


.learn-caption-navigation {
  min-height:
    27px;
}


.learn-caption-dots {
  min-height:
    8px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .learn-stage {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px;

    column-gap:
      0;
  }


  .learn-example-prev {
    transform:
      translateX(8px);
  }


  .learn-example-next {
    transform:
      translateX(-8px);
  }


  .learn-example-prev:hover,
  .learn-example-prev:focus-visible {
    transform:
      translateX(8px)
      scale(1.04);
  }


  .learn-example-next:hover,
  .learn-example-next:focus-visible {
    transform:
      translateX(-8px)
      scale(1.04);
  }
}

/* V4 LEARN INLINE RICH TEXT */

.learn-caption em,
.learn-caption i {
  font-style: italic;
}

.learn-caption strong,
.learn-caption b {
  font-weight: 700;
}

.learn-caption u {
  text-decoration: underline;
}

/* V4 LEARN THEME CONSISTENCY */


/* ==========================================================
   CREDIT INLINE RICH TEXT
   ========================================================== */

.learn-credit em,
.learn-credit i {
  font-style:
    italic;
}


.learn-credit strong,
.learn-credit b {
  font-weight:
    700;
}


.learn-credit u {
  text-decoration:
    underline;
}


/* ==========================================================
   NIGHT MODE — ALL LEARN GLYPHS LIGHT
   ========================================================== */

body[data-theme="night"]
.learn-rebracket,

body[data-theme="night"]
.learn-rebracket
.learn-rebracket-letter,

body[data-theme="night"]
.learn-rebracket[data-state="a"]
.learn-rebracket-letter,

body[data-theme="night"]
.learn-rebracket[data-state="b"]
.learn-rebracket-letter,

body[data-theme="night"]
.learn-rebracket-fallback {
  color:
    rgba(
      252,
      252,
      253,
      .97
    );
}


body[data-theme="night"]
.learn-rebracket
.learn-rebracket-letter,

body[data-theme="night"]
.learn-rebracket[data-state="a"]
.learn-rebracket-letter,

body[data-theme="night"]
.learn-rebracket[data-state="b"]
.learn-rebracket-letter {
  text-shadow:
    0 0 5px
      rgba(255,255,255,.30),

    0 0 14px
      rgba(255,255,255,.12),

    0 4px 18px
      rgba(0,0,0,.34);
}


body[data-theme="night"]
.learn-example-nav::before,

body[data-theme="night"]
.learn-example-nav::after {
  background:
    rgba(
      249,
      251,
      255,
      .96
    );

  box-shadow:
    0 0 5px
      rgba(248,251,255,.88),

    0 0 11px
      rgba(237,244,255,.56),

    0 0 24px
      rgba(225,237,255,.24);
}


/* ==========================================================
   DAY MODE — ALL LEARN GLYPHS DARK
   ========================================================== */

body[data-theme="day"]
.learn-rebracket,

body[data-theme="day"]
.learn-rebracket
.learn-rebracket-letter,

body[data-theme="day"]
.learn-rebracket[data-state="a"]
.learn-rebracket-letter,

body[data-theme="day"]
.learn-rebracket[data-state="b"]
.learn-rebracket-letter,

body[data-theme="day"]
.learn-rebracket-fallback {
  color:
    rgba(
      25,
      28,
      33,
      .94
    );
}


body[data-theme="day"]
.learn-rebracket
.learn-rebracket-letter,

body[data-theme="day"]
.learn-rebracket[data-state="a"]
.learn-rebracket-letter,

body[data-theme="day"]
.learn-rebracket[data-state="b"]
.learn-rebracket-letter {
  text-shadow:
    0 1px 2px
      rgba(255,255,255,.32);
}


body[data-theme="day"]
.learn-example-nav::before,

body[data-theme="day"]
.learn-example-nav::after {
  background:
    rgba(
      30,
      34,
      40,
      .92
    );

  box-shadow:
    0 0 4px
      rgba(25,30,36,.26),

    0 0 10px
      rgba(25,30,36,.12);
}

/* V4 CLEAN LEARN VIDEO CONTROLS */

.learn-video {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Suppress the browser's own video controls. */
.learn-video::-webkit-media-controls,
.learn-video::-webkit-media-controls-enclosure,
.learn-video::-webkit-media-controls-panel,
.learn-video::-webkit-media-controls-play-button,
.learn-video::-webkit-media-controls-start-playback-button,
.learn-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Plain standard play button. */
.learn-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;

  width: 60px;
  height: 60px;
  padding: 0;

  transform: translate(-50%, -50%);

  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  color: transparent;
  font-size: 0;
  line-height: 0;
}

.learn-video-play::before {
  content: "";
  display: block;

  width: 0;
  height: 0;

  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid white;

  margin-left: 4px;
}

.learn-video-play:hover {
  background: rgba(0, 0, 0, 0.82);
}

.learn-video-play:focus,
.learn-video-play:focus-visible {
  outline: none;
}

.learn-video-shell.is-playing .learn-video-play {
  display: none;
}

@media (max-width: 720px) {
  .learn-video-play {
    width: 56px;
    height: 56px;
  }

  .learn-video-play::before {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 15px;
  }
}


/* BG V4 CLEAN POSTER TRANSITION 2026-09-10 */

.learn-video-shell.is-changing-example .learn-video {
  visibility: hidden;
}

.learn-video-shell.is-changing-example {
  background: #05060a;
}


/* BG V4 LEARN WALL-MATCHED MORPH 2026-09-10 */

.learn-rebracket {
  font-weight: 400;
}

.learn-rebracket-letter {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
  transition: none !important;
  will-change: transform;
}

.learn-rebracket-glyph {
  display: block;
  transition: none !important;
  will-change: opacity;
}

.learn-rebracket-glyph-b {
  position: absolute;
  inset: 0;
}


/* BG V4 LEARN COMPILED REBRACKETING 2026-09-10 */

.learn-rebracket {
  font-family:
    "Albert Sans",
    sans-serif;
  font-weight: 400;
}

.learn-rebracket-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* BG V4 FULL VIDEO CLICK + END POSTER 2026-09-10 */

.learn-video-shell {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.learn-video {
  opacity: 1;
  transition: opacity 350ms ease;
}

/*
 * When playback finishes, reveal the already-loaded
 * thumbnail underneath the video.
 */
.learn-video-shell.is-ended .learn-video {
  opacity: 0;
}

/*
 * Keep the play control fully visible over the
 * returned thumbnail.
 */
.learn-video-shell.is-ended .learn-video-play {
  display: flex;
}

/* BG V4 INDEPENDENT EXAMPLE ARROWS 2026-09-10 */

/*
 * Caption/card content is allowed to grow downward.
 */
.learn-stage {
  position: relative;
  overflow: visible;
}

.learn-card {
  grid-column: 2;
  max-height: none;
  padding-bottom: 70px;
}

/*
 * Big example arrows are completely outside normal
 * grid/content flow. JS supplies left + top coordinates.
 */
.learn-example-nav {
  position: absolute;
  z-index: 6;
  right: auto !important;
  bottom: auto !important;
  margin: 0;
  justify-self: auto;
  align-self: auto;
  transform: translateY(-50%);
}

.learn-example-prev {
  grid-column: auto;
}

.learn-example-next {
  grid-column: auto;
}

.learn-example-nav:hover {
  transform: translateY(-50%) scale(1.045);
}

/*
 * Deliberately no overrides for:
 *
 * .learn-caption-area
 * .learn-caption-navigation
 * .learn-caption-dots
 *
 * The small carousel remains exactly in normal flow.
 */

@media (max-width: 720px) {
  .learn-card {
    grid-column: 2;
    padding-bottom: 48px;
  }
}


/* BG V4 LEARN HORIZONTAL CENTER LOCK 2026-09-10 */

/*
 * The Learn card always occupies the exact center track.
 * Its horizontal position must never depend on example
 * content or transition state.
 */
.learn-card {
  grid-column: 2 !important;
  width: 100%;
  max-width: var(--learn-card-width);
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  left: auto !important;
  right: auto !important;
  transform: none;
}

/*
 * Previous implementation used ±28px translations while
 * changing examples. Those translations are what can make
 * individual examples appear to settle at different X
 * coordinates. Keep the fade, but remove positional motion.
 */
.learn-card.is-leaving-next,
.learn-card.is-leaving-previous,
.learn-card.is-entering {
  transform: none !important;
}

.learn-card.is-leaving-next,
.learn-card.is-leaving-previous {
  opacity: 0;
}

.learn-card.is-entering {
  opacity: 0;
}

/*
 * The large arrows remain independent absolute elements.
 * Their own transforms must not affect card centering.
 */
.learn-example-nav {
  margin: 0 !important;
}



/* BG V4 LEARN MENU BRACKET MORPH V3 2026-09-11 */

/*
 * The existing button background is the real Bracketgrams
 * logo. Keep its established container size and shrink only
 * the logo image slightly.
 */
.learn-menu-button {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 88% 88% !important;
}

/*
 * During a handoff the fixed canvas is the sole owner of the
 * two navigation glyphs.
 */
body.learn-nav-morph-running .bg-menu-bracket {
  opacity: 0 !important;
}

body.learn-nav-morph-running .learn-example-nav::before,
body.learn-nav-morph-running .learn-example-nav::after {
  opacity: 0 !important;
}

body.learn-nav-morph-running .learn-example-nav {
  color: transparent !important;
  pointer-events: none !important;
}

.learn-nav-morph-canvas {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}



/* BG V4 SYNCHRONIZED LEARN ENTRY 2026-09-11 */

/*
 * The runtime copies the NSFW control's exact outer geometry.
 *
 * Fill that rounded shape with the real [b] image rather than
 * displaying a smaller square inside it.
 */
.learn-menu-button {
  padding: 0 !important;
  overflow: hidden !important;

  background-position:
    center !important;

  background-repeat:
    no-repeat !important;

  background-size:
    cover !important;

  background-clip:
    border-box !important;

  font-size:
    0 !important;

  line-height:
    0 !important;

  color:
    transparent !important;
}


/*
 * PREWARM STATE
 *
 * The example is fully mounted and allowed to fetch/decode its
 * media, but no part of it is visible yet.
 */
body.learn-example-preparing
.learn-card {
  opacity:
    0 !important;

  clip-path:
    inset(
      0 50% 0 50%
    ) !important;

  pointer-events:
    none !important;

  transition:
    none !important;
}


/*
 * REVEAL STATE
 *
 * This starts immediately before playMenuToLearn(), whose
 * duration is also 700ms.
 *
 * The card is revealed from the center outward, visually
 * following the brackets as they separate and become arrows.
 */
body.learn-example-revealing
.learn-card {
  pointer-events:
    none !important;

  animation:
    bgLearnExampleExpandWithBrackets
    700ms
    cubic-bezier(.45, 0, .55, 1)
    both !important;

  will-change:
    clip-path,
    opacity;
}


@keyframes bgLearnExampleExpandWithBrackets {
  0% {
    opacity:
      0;

    clip-path:
      inset(
        0 50% 0 50%
      );
  }

  12% {
    opacity:
      .18;
  }

  35% {
    opacity:
      .62;
  }

  100% {
    opacity:
      1;

    clip-path:
      inset(
        0 0 0 0
      );
  }
}



/* BG V4 LEARN CINEMATIC TRANSITION V4 2026-09-11 */

/*
 * The overlay owns these pixels during the transition.
 *
 * Importantly, this hides the REAL menu's old closed-bracket
 * destination, so the viewer never sees the obsolete
 * "close around the center logo" pose.
 */
body.learn-cinematic-running
.bg-menu-bracket,

body.learn-cinematic-running
.bg-menu-logo,

body.learn-cinematic-running
.learn-example-nav::before,

body.learn-cinematic-running
.learn-example-nav::after {
  opacity:
    0 !important;
}


body.learn-cinematic-running
.learn-example-nav {
  pointer-events:
    none !important;
}


/*
 * Do not let the shell's ordinary 220ms layer fade interfere
 * with our explicitly timed cinematic.
 */
body.learn-cinematic-running[data-shell-mode="learn"]
.learn-layer,

body.learn-cinematic-running[data-shell-mode="menu"]
.menu-layer {
  visibility:
    visible !important;

  opacity:
    1 !important;

  transition:
    none !important;
}


.learn-nav-morph-canvas {
  position:
    fixed;

  inset:
    0;

  z-index:
    2147483645;

  width:
    100vw;

  height:
    100vh;

  pointer-events:
    none;
}


.learn-nav-flying-logo {
  position:
    fixed;

  z-index:
    2147483646;

  display:
    block;

  margin:
    0;

  padding:
    0;

  object-fit:
    cover;

  overflow:
    hidden;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  will-change:
    left,
    top,
    width,
    height,
    border-radius;
}


/*
 * PHASE 1
 *
 * Learn is actually mounted here, so poster/thumbnail loading
 * can proceed, but the example itself does not show yet.
 */
body.learn-cinematic-preparing
.learn-card {
  opacity:
    0 !important;

  pointer-events:
    none !important;
}


body.learn-cinematic-preparing
.learn-heading,

body.learn-cinematic-preparing
.learn-safety-button {
  opacity:
    0 !important;
}


/*
 * PHASE 2
 *
 * The tall brackets open with the video.
 *
 * Only the video is introduced during this beat.
 */
body.learn-cinematic-video-opening
.learn-card {
  opacity:
    1 !important;

  pointer-events:
    none !important;
}


body.learn-cinematic-video-opening
.learn-rebracket,

body.learn-cinematic-video-opening
.learn-credit,

body.learn-cinematic-video-opening
.learn-caption-area,

body.learn-cinematic-video-opening
.learn-heading,

body.learn-cinematic-video-opening
.learn-safety-button {
  opacity:
    0 !important;
}


body.learn-cinematic-video-opening
.learn-video-shell {
  animation:
    bgLearnVideoUnfold
    555ms
    cubic-bezier(.45,0,.55,1)
    both !important;

  transform-origin:
    center center;

  will-change:
    clip-path,
    opacity;
}


@keyframes bgLearnVideoUnfold {
  0% {
    opacity:
      0;

    clip-path:
      inset(
        0 50% 0 50%
      );
  }

  10% {
    opacity:
      .2;
  }

  100% {
    opacity:
      1;

    clip-path:
      inset(
        0 0 0 0
      );
  }
}


/*
 * PHASE 3
 *
 * Video is already completely open.
 *
 * Supporting content arrives while the brackets physically
 * shrink/morph into their final navigation controls.
 */
body.learn-cinematic-controls-opening
.learn-card,

body.learn-cinematic-controls-opening
.learn-video-shell {
  opacity:
    1 !important;
}


body.learn-cinematic-controls-opening
.learn-rebracket,

body.learn-cinematic-controls-opening
.learn-credit,

body.learn-cinematic-controls-opening
.learn-caption-area,

body.learn-cinematic-controls-opening
.learn-heading,

body.learn-cinematic-controls-opening
.learn-safety-button {
  animation:
    bgLearnSupportingContentIn
    270ms
    ease-out
    both;
}


@keyframes bgLearnSupportingContentIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


/*
 * RETURN — reverse the same choreography.
 */
body.learn-cinematic-returning
.learn-rebracket,

body.learn-cinematic-returning
.learn-credit,

body.learn-cinematic-returning
.learn-caption-area,

body.learn-cinematic-returning
.learn-heading,

body.learn-cinematic-returning
.learn-safety-button {
  animation:
    bgLearnSupportingContentOut
    235ms
    ease-in
    both;
}


@keyframes bgLearnSupportingContentOut {
  from {
    opacity:
      1;
  }

  to {
    opacity:
      0;
  }
}


body.learn-cinematic-video-closing
.learn-video-shell {
  animation:
    bgLearnVideoFold
    555ms
    cubic-bezier(.45,0,.55,1)
    both !important;

  transform-origin:
    center center;

  will-change:
    clip-path,
    opacity;
}


@keyframes bgLearnVideoFold {
  0% {
    opacity:
      1;

    clip-path:
      inset(
        0 0 0 0
      );
  }

  90% {
    opacity:
      .2;
  }

  100% {
    opacity:
      0;

    clip-path:
      inset(
        0 50% 0 50%
      );
  }
}



/* BG V4 LEARN EXPLORE-STYLE TOPBAR CONTROLS 2026-09-11 */

/*
 * Match Explore's [b]:
 *
 * 46x46
 * 12px rounded square
 * actual Bracketgrams logo cropped edge-to-edge
 */
.learn-menu-button {
  box-sizing:
    border-box !important;

  width:
    46px !important;

  height:
    46px !important;

  min-width:
    46px !important;

  min-height:
    46px !important;

  max-width:
    46px !important;

  max-height:
    46px !important;

  flex:
    0 0 46px !important;

  flex-basis:
    46px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(255,255,255,.22) !important;

  border-radius:
    12px !important;

  background:
    url("../assets/bracketeer_logo.jpg")
    center / cover
    no-repeat !important;

  overflow:
    hidden !important;

  color:
    transparent !important;

  font-size:
    0 !important;

  line-height:
    0 !important;

  cursor:
    pointer !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08) !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


/*
 * Match Explore's ? button, while retaining Learn's
 * 😇 / 😈 NSFW state icon and behavior.
 */
.learn-safety-button {
  box-sizing:
    border-box !important;

  width:
    46px !important;

  height:
    46px !important;

  min-width:
    46px !important;

  min-height:
    46px !important;

  max-width:
    46px !important;

  max-height:
    46px !important;

  flex:
    0 0 46px !important;

  flex-basis:
    46px !important;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  border-radius:
    50% !important;

  background:
    rgba(255,255,255,.10) !important;

  color:
    #f4f6fb !important;

  font:
    400 21px/1
    system-ui,
    sans-serif !important;

  cursor:
    pointer !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.05) !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


/*
 * Same Explore hover/focus/active treatment.
 */
.learn-safety-button:hover,
.learn-safety-button:focus-visible,
.learn-safety-button[aria-pressed="true"] {
  background:
    rgba(255,255,255,.18) !important;

  border-color:
    rgba(255,255,255,.32) !important;
}


.learn-menu-button:hover,
.learn-menu-button:focus-visible {
  border-color:
    rgba(255,255,255,.32) !important;
}


/*
 * Remove the earlier mobile size divergence. Explore keeps
 * these controls at the same 46px visual size.
 */
@media (max-width: 720px) {
  .learn-menu-button,
  .learn-safety-button {
    width:
      46px !important;

    height:
      46px !important;

    min-width:
      46px !important;

    min-height:
      46px !important;

    max-width:
      46px !important;

    max-height:
      46px !important;

    flex:
      0 0 46px !important;

    flex-basis:
      46px !important;
  }

  .learn-safety-button {
    font-size:
      21px !important;
  }
}


/* Hide NSFW toggle in Learn mode. */
.learn-safety-button {
  display: none !important;
}

/* Learn menu logo — visually match the Solve [b] button. */
.learn-menu-button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;

  margin: 0;
  padding: 0 !important;

  overflow: hidden;
  border: 0 !important;
  border-radius: 12px !important;

  background:
    url("../assets/bracketeer_logo.jpg")
    center / cover
    no-repeat !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: transform 110ms ease;
}

.learn-menu-button:hover {
  transform: scale(1.025);
}

.learn-menu-button:active {
  transform: scale(.975);
}

@media (hover: none), (pointer: coarse) {
  .learn-menu-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
}

/* Learn logo: no surrounding control/container treatment. */
.learn-menu-button {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.learn-menu-button::before,
.learn-menu-button::after {
  content: none !important;
  display: none !important;
}

/* Learn: logo stands alone — no surrounding topbar container. */
.learn-topbar {
  display: block !important;
  width: max-content !important;
  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;
  gap: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Day mode: example header/rebracketing text should be dark. */
body[data-theme="day"] .learn-rebracket,
body[data-theme="day"] .learn-rebracket-letter,
body[data-theme="day"] .learn-rebracket-fallback {
  color: rgba(25, 28, 33, .94) !important;
}

/* Tighten the two strokes of each large example chevron.
   Only the upper stroke moves, in both day and night mode. */
.learn-example-nav::before {
  top: calc(50% + 1px) !important;
}

/* BG LEARN DAY HEADER TEXT 2026-10-03 */
body[data-theme="day"] .learn-heading,
body[data-theme="day"] .learn-heading-kicker,
body[data-theme="day"] .learn-heading-count {
  color: rgba(25, 28, 33, .94) !important;
  text-shadow: none !important;
}