/* ============================================================
   mobile-showcase.css — the "MathematiX Mobile" section on the
   marketing home page.

   THE RULE HERE: the phone is not marketing art. `.msc-app` is a
   390x844 box — the real logical viewport of the device the app
   ships on — scaled down as a single transform. Everything inside
   is a scoped copy of mobile/app/mobile.css at its ORIGINAL px
   values, so the screen is the shipping app rather than a redraw
   of it. When mobile.css changes, change the twin here.

   Layers, outside in:
     .msc-section  ambient aurora + grid + vignette behind it all
     .msc-device   perspective wrapper; owns the lift and tilt
     .msc-phone    titanium bezel, side buttons, edge highlight
     .msc-phone__screen  the window; clips + carries the glare
     .msc-app      the app itself, at 1:1, scaled by --s

   All selectors are prefixed .msc- so nothing here can leak into
   the hero demo or the app itself. Class names mirror the app's
   own (.hm-top -> .msc-hmtop, .lib__note -> .msc-lib__note) so
   the correspondence stays obvious.

   mobile-showcase.js drives the story.
   ============================================================ */

/* ------------------------------------------------------------
   SECTION + AMBIENT BACKGROUND
   ------------------------------------------------------------ */
.msc-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(var(--paper-2), var(--paper));
}
.msc-section > .wrap { position: relative; z-index: 1; }

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

/* a faint engineering grid, faded out at the edges so it never draws a seam */
.msc-amb__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(22, 32, 26, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 32, 26, .05) 1px, transparent 1px),
    linear-gradient(rgba(22, 32, 26, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 32, 26, .05) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 44%, #000 20%, transparent 78%);
          mask-image: radial-gradient(72% 62% at 50% 44%, #000 20%, transparent 78%);
  opacity: .75;
}

/* three slow aurora pools. They are big, very blurred and very low
   contrast — the effect should read as light in the room, not as shapes. */
.msc-amb__glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.msc-amb__glow--a {
  width: 46vw; height: 40vw; min-width: 480px; min-height: 420px;
  left: -6%; top: 4%;
  background: radial-gradient(circle, color-mix(in srgb, var(--green) 26%, transparent), transparent 68%);
  opacity: .55;
  animation: mscDriftA 34s ease-in-out infinite;
}
.msc-amb__glow--b {
  width: 40vw; height: 36vw; min-width: 420px; min-height: 380px;
  right: -8%; top: 26%;
  background: radial-gradient(circle, rgba(47, 110, 158, .24), transparent 68%);
  opacity: .5;
  animation: mscDriftB 44s ease-in-out infinite;
}
.msc-amb__glow--c {
  width: 34vw; height: 26vw; min-width: 340px; min-height: 280px;
  left: 30%; bottom: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--green-300) 30%, transparent), transparent 70%);
  opacity: .42;
  animation: mscDriftC 52s ease-in-out infinite;
}
@keyframes mscDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(7%, 5%, 0) scale(1.14); }
}
@keyframes mscDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-8%, -6%, 0) scale(1); }
}
@keyframes mscDriftC {
  0%, 100% { transform: translate3d(-4%, 0, 0) scale(1); }
  50%      { transform: translate3d(6%, -7%, 0) scale(1.1); }
}

/* keeps the copy readable over the aurora */
.msc-amb__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 78% at 50% 40%, transparent 40%, color-mix(in srgb, var(--paper) 62%, transparent) 100%);
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.msc {
  display: grid;
  /* the rail is capped rather than 1fr — at full width a 1fr column runs the
     step copy out to ~730px, which reads like a spreadsheet, not a list */
  grid-template-columns: 348px minmax(0, 600px);
  justify-content: space-between;
  gap: 60px;
  align-items: center;
  margin-top: 56px;
}
.msc__stage {
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

/* ------------------------------------------------------------
   DEVICE — lift, tilt, and the light pool it stands in

   The two motions live on two elements on purpose: the pointer tilt
   owns .msc-device's transform, the idle float owns .msc-phone's.
   Stack them on one element and each frame of the float overwrites
   the tilt, which reads as a judder.
   ------------------------------------------------------------ */
.msc-device {
  --s: .80;                 /* app px -> screen px */
  --vw: 390px;              /* the app's logical viewport */
  --vh: 844px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  position: relative;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
  will-change: transform;
}
/* while the pointer is steering, the smoothing loop is already easing
   the angle every frame — a transition on top of it only adds lag */
.msc-device.is-steered { transition: none; }

/* the pool of light the phone sits in: a wide soft ellipse, plus a tighter
   contact shadow so the device reads as resting on the page, not floating */
.msc-device__pool {
  position: absolute; left: 50%; bottom: -30px;
  width: 128%; height: 120px;
  transform: translateX(-50%);
  background:
    radial-gradient(52% 50% at 50% 50%, rgba(16, 40, 28, .20), transparent 72%),
    radial-gradient(26% 40% at 50% 56%, rgba(16, 40, 28, .16), transparent 74%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
  animation: mscPool 7.5s ease-in-out infinite;
}
@keyframes mscPool {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50%      { transform: translateX(-50%) scale(.955); opacity: .82; }
}

.msc-phone {
  position: relative;
  z-index: 1;
  width: calc(var(--vw) * var(--s) + 22px);
  padding: 11px;
  border-radius: calc(47px * var(--s) + 11px);
  background:
    linear-gradient(150deg, #46554c 0%, #1a2721 18%, #0d1712 50%, #1e2b25 78%, #3d4c43 100%);
  box-shadow:
    0 60px 110px -46px rgba(16, 40, 28, .55),
    0 22px 46px -22px rgba(16, 40, 28, .30),
    0 2px 5px rgba(16, 40, 28, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 1px rgba(255, 255, 255, .22);
  animation: mscFloat 7.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes mscFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

/* machined side buttons */
.msc-phone__btn {
  position: absolute; width: 2.5px; border-radius: 3px;
  background: linear-gradient(#5a6a60, #2a3830 40%, #17221c);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35);
}
.msc-phone__btn--mute { left: -2.5px; top: 108px; height: 30px; }
.msc-phone__btn--up   { left: -2.5px; top: 156px; height: 58px; }
.msc-phone__btn--down { left: -2.5px; top: 226px; height: 58px; }
.msc-phone__btn--pwr  { right: -2.5px; top: 186px; height: 88px; }

/* a hairline of specular light along the top-left of the frame */
.msc-phone__edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(142deg, rgba(255, 255, 255, .32) 0%, transparent 17%, transparent 83%, rgba(255, 255, 255, .14) 100%);
  mix-blend-mode: screen;
  opacity: .55;
}

.msc-phone__screen {
  position: relative;
  width: calc(var(--vw) * var(--s));
  height: calc(var(--vh) * var(--s));
  border-radius: calc(47px * var(--s));
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
  isolation: isolate;
}

/* the glass. One slow diagonal sweep — long dwell, short pass, so it reads
   as the room moving past the phone rather than a shine loop. */
.msc-phone__glare {
  position: absolute; inset: -40%;
  z-index: 60; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(255, 255, 255, .09) 46%,
    rgba(255, 255, 255, .22) 50%,
    rgba(255, 255, 255, .07) 54%,
    transparent 62%);
  transform: translate3d(-60%, 0, 0);
  animation: mscGlare 11s cubic-bezier(.5, 0, .5, 1) infinite;
  mix-blend-mode: screen;
}
@keyframes mscGlare {
  0%, 62%  { transform: translate3d(-70%, 0, 0); }
  92%, 100% { transform: translate3d(70%, 0, 0); }
}

/* ------------------------------------------------------------
   THE APP — everything below is mobile/app/mobile.css at 1:1
   ------------------------------------------------------------ */
.msc-app {
  /* surfaces */
  --mb-bg: var(--paper);
  --mb-card: #ffffff;
  --mb-card-2: var(--paper-2);
  --mb-line: var(--line);
  --mb-line-soft: var(--line-soft);
  /* ink */
  --mb-ink: var(--ink);
  --mb-soft: var(--ink-soft);
  --mb-faint: var(--ink-faint);
  /* accent — follows the site's signature colour */
  --mb-accent: var(--green);
  --mb-deep: var(--green-700);
  --mb-mint: var(--mint);
  --mb-mint-line: var(--mint-line);
  --mb-flow: linear-gradient(105deg, #226f5b 0%, #319b7c 32%, #347f91 58%, #319b7c 80%, #226f5b 100%);

  --r-sm: 11px; --r-md: 14px; --r-lg: 16px; --r-sheet: 24px;
  --sh-card: 0 1px 2px rgba(16, 40, 28, .05), 0 2px 6px rgba(16, 40, 28, .04);
  --sh-pop: 0 30px 70px -30px rgba(16, 40, 28, .32), 0 8px 24px -12px rgba(16, 40, 28, .14);
  --spring: cubic-bezier(.34, 1.32, .48, 1);

  /* the app is drawn against a notched device, so it gets real safe areas */
  --safe-t: 50px;
  --safe-b: 34px;

  position: absolute; top: 0; left: 0;
  width: var(--vw); height: var(--vh);
  transform: scale(var(--s));
  transform-origin: 0 0;
  background: var(--mb-bg);
  color: var(--mb-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  overflow: hidden;
  user-select: none;
}
/* the app's own accent gradients, kept in step with the site's picker */
html[data-accent="ocean"]  .msc-app { --mb-flow: linear-gradient(105deg, #235d86 0%, #2f8ba8 34%, #577db3 62%, #2f8ba8 82%, #235d86 100%); }
html[data-accent="violet"] .msc-app { --mb-flow: linear-gradient(105deg, #654690 0%, #9169bd 34%, #a35993 64%, #9169bd 82%, #654690 100%); }
html[data-accent="sunset"] .msc-app { --mb-flow: linear-gradient(105deg, #a84b36 0%, #d16f4d 34%, #b96872 64%, #d16f4d 82%, #a84b36 100%); }

.msc-app [hidden] { display: none !important; }
.msc-app svg { display: block; }
.msc-spacer { flex: 1; min-width: 0; }

/* ---------- iOS chrome: status bar + home indicator ---------- */
.msc-os {
  position: absolute; top: 0; left: 0; right: 0; height: var(--safe-t);
  z-index: 50; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 32px 0;
  color: var(--mb-ink);
}
.msc-os__time { font-size: 16px; font-weight: 600; letter-spacing: -.01em; padding-left: 6px; }
.msc-os__island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 122px; height: 34px; border-radius: 20px;
  background: #06100b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.msc-os__right { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.msc-os__sig {
  width: 18px; height: 12px; background: currentColor;
  clip-path: polygon(0 62%,20% 62%,20% 100%,0 100%, 27% 42%,47% 42%,47% 100%,27% 100%, 54% 20%,74% 20%,74% 100%,54% 100%, 81% 0,100% 0,100% 100%,81% 100%);
}
.msc-os__wifi {
  width: 16px; height: 12px;
  background: currentColor;
  clip-path: polygon(50% 100%, 26% 62%, 74% 62%);
  position: relative;
}
.msc-os__wifi::before,
.msc-os__wifi::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border: 2px solid currentColor; border-bottom-color: transparent;
  border-left-color: transparent; border-right-color: transparent;
  border-radius: 50%;
}
.msc-os__wifi::before { top: 0; width: 16px; height: 16px; }
.msc-os__wifi::after  { top: 4px; width: 9px; height: 9px; }
.msc-os__batt {
  width: 25px; height: 12px; border-radius: 3.5px;
  border: 1.2px solid color-mix(in srgb, currentColor 42%, transparent);
  position: relative;
}
.msc-os__batt::before {
  content: ""; position: absolute; inset: 1.6px;
  width: 72%; border-radius: 1.8px; background: currentColor;
}
.msc-os__batt::after {
  content: ""; position: absolute; right: -3.4px; top: 3.6px;
  width: 2px; height: 4.4px; border-radius: 0 2px 2px 0;
  background: color-mix(in srgb, currentColor 42%, transparent);
}
.msc-os__home {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  width: 138px; height: 5px; border-radius: 99px;
  background: color-mix(in srgb, var(--mb-ink) 26%, transparent);
  z-index: 96; pointer-events: none;
}

/* ---------- views ----------
   Cross-fade only. The app's own note: a translate here shifts header,
   thread and composer together, which reads as the layout jumping. */
.msc-view {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--mb-bg);
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility .34s;
  z-index: 10;
}
.msc-view.is-active { opacity: 1; visibility: visible; }

/* shared round icon button in headers */
.msc-iconbtn {
  width: 36px; height: 36px; flex: none;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--mb-faint);
  transition: background .15s var(--ease), color .15s var(--ease), transform .18s var(--spring);
}
.msc-iconbtn.is-hit { background: var(--mb-mint); color: var(--mb-deep); transform: scale(.9); }
.msc-iconbtn svg { width: 19px; height: 19px; }

/* sync dot: mirrors persist.js sync state */
.msc-sync {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mb-faint); flex: none;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.msc-sync[data-state="saved"]  { background: var(--mb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-accent) 14%, transparent); }
.msc-sync[data-state="saving"] { background: #b9892f; box-shadow: 0 0 0 3px rgba(185, 137, 47, .18); animation: mscSyncPulse 1.1s ease-in-out infinite; }
@keyframes mscSyncPulse { 50% { opacity: .35; transform: scale(.82); } }

/* ============================================================
   HOME
   ============================================================ */
.msc-hmtop {
  flex: none;
  padding: calc(var(--safe-t) + 14px) 18px 12px;
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--mb-card-2) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--mb-line-soft);
  position: relative; z-index: 3;
}
.msc-brand {
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2;
}
.msc-brand em { color: var(--mb-accent); font-style: italic; }
.msc-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--mb-accent); color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px; line-height: 1;
}
.msc-hmbody {
  flex: 1; min-height: 0;
  overflow: hidden;
  padding: 16px 18px 24px;
}

/* the primary gradient action */
.msc-flow {
  width: 100%; height: 54px;
  border-radius: 15px; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 15.5px; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .12);
  background-image: var(--mb-flow);
  background-size: 220% 100%;
  animation: mscFlowShift 7s ease-in-out infinite alternate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 10px 24px -12px rgba(16, 40, 28, .6);
}
.msc-flow svg { width: 19px; height: 19px; }
.msc-flow--sm { height: 44px; font-size: 14.5px; border-radius: var(--r-md); }
@keyframes mscFlowShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.msc-searchbar {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 12px; margin-top: 14px;
  border: 1px solid var(--mb-line); border-radius: 12px;
  background: var(--mb-card); color: var(--mb-faint);
  font-size: 14.5px; line-height: 1;
}
.msc-searchbar svg { width: 16px; height: 16px; flex: none; }

.msc-rule { display: flex; align-items: center; gap: 8px; margin: 22px 2px 10px; }
.msc-rule__label, .msc-rule__count {
  font-family: var(--font-mono); font-size: 10px; color: var(--mb-faint); line-height: 1;
}
.msc-rule__label { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.msc-rule__line { flex: 1; height: 1px; background: var(--mb-line-soft); }

.msc-classes { display: flex; flex-direction: column; gap: 12px; }
/* the library's arrival stagger. In the app this belongs to the first paint
   only; here "first paint" is the top of every loop, so the script re-arms
   .is-fresh on reset rather than leaving it on. */
.msc-classes.is-fresh .msc-lib { animation: mscLibIn .44s var(--ease) backwards; }
.msc-classes.is-fresh .msc-lib:nth-child(2) { animation-delay: .06s; }
.msc-classes.is-fresh .msc-lib:nth-child(3) { animation-delay: .12s; }
@keyframes mscLibIn { from { opacity: 0; transform: translateY(12px); } }
.msc-lib {
  background: var(--mb-card);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.msc-lib__head {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px 11px;
  text-align: left; color: var(--mb-ink);
}
.msc-lib__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.msc-lib__name {
  font-family: var(--font-serif);
  font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msc-lib__code {
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1;
  letter-spacing: .1em; color: var(--mb-faint); padding-top: 2px;
}
.msc-lib__count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; color: var(--mb-faint); line-height: 1;
}
.msc-lib__note {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-top: 1px solid var(--mb-line-soft);
  color: var(--mb-ink); text-align: left;
  transition: background .15s var(--ease);
}
.msc-lib__note.is-hit { background: var(--mb-mint); }
.msc-lib__note svg { width: 15px; height: 15px; color: var(--mb-faint); flex: none; }
.msc-lib__note > span {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msc-fresh {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--mb-accent); box-shadow: 0 0 8px var(--mb-accent);
  margin-left: auto;
  animation: mscFreshIn .5s var(--spring) both;
}
@keyframes mscFreshIn { from { opacity: 0; transform: scale(0); } }

/* Ask Lemma — Home's entry into the global conversation */
.msc-dock {
  flex: none; position: relative; z-index: 2;
  padding: 8px 16px calc(12px + var(--safe-b));
  background: color-mix(in srgb, var(--mb-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid var(--mb-line-soft);
}
.msc-ask {
  width: 100%; height: 50px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 14px;
  background: var(--mb-card); border: 1px solid var(--mb-line);
  border-radius: 15px; text-align: left;
  box-shadow: var(--sh-card);
  transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.msc-ask.is-hit {
  transform: scale(.985);
  border-color: var(--mb-mint-line);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mb-accent) 10%, transparent);
}
.msc-ask__spark { color: var(--mb-accent); font-size: 15px; flex: none; line-height: 1; }
.msc-ask__tx { flex: 1; min-width: 0; color: var(--mb-faint); font-size: 14.5px; line-height: 1; }
.msc-ask__go {
  width: 34px; height: 34px; flex: none;
  border-radius: 11px; display: grid; place-items: center;
  background: var(--mb-accent); color: #fff;
}
.msc-ask__go svg { width: 16px; height: 16px; }

/* ============================================================
   CHAT
   ============================================================ */
/* the drifting aura behind the thread — straight from the app */
.msc-aura { position: absolute; inset: -25%; z-index: 0; pointer-events: none; filter: blur(38px); opacity: .85; }
.msc-aura i { position: absolute; inset: 0; display: block; }
.msc-aura i:first-child {
  background: radial-gradient(38% 30% at 24% 30%, color-mix(in srgb, var(--mb-accent) 22%, transparent), transparent 70%),
              radial-gradient(34% 26% at 74% 68%, color-mix(in srgb, var(--mb-deep) 16%, transparent), transparent 72%);
  animation: mscAuraA 26s linear infinite;
}
.msc-aura i:last-child {
  background: radial-gradient(30% 24% at 68% 22%, color-mix(in srgb, var(--mb-accent) 18%, transparent), transparent 72%),
              radial-gradient(40% 30% at 30% 80%, color-mix(in srgb, var(--mb-deep) 14%, transparent), transparent 70%);
  animation: mscAuraB 34s linear infinite;
}
@keyframes mscAuraA { 0% { transform: translate3d(-8%, 0, 0) scale(1); } 50% { transform: translate3d(6%, -3%, 0) scale(1.12); } 100% { transform: translate3d(-8%, 0, 0) scale(1); } }
@keyframes mscAuraB { 0% { transform: translate3d(7%, 2%, 0) scale(1.08); } 50% { transform: translate3d(-6%, -4%, 0) scale(1); } 100% { transform: translate3d(7%, 2%, 0) scale(1.08); } }

.msc-chtop {
  flex: none; position: relative; z-index: 2;
  padding: calc(var(--safe-t) + 12px) 12px 10px;
  display: flex; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--mb-card-2) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--mb-line-soft);
}
.msc-chid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-left: 2px; }
.msc-chid__cls { display: flex; align-items: center; gap: 6px; }
.msc-chdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--mb-accent); transition: background .3s var(--ease); }
.msc-chid__cls > span {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3;
  letter-spacing: .04em; color: var(--mb-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msc-chid__note {
  font-family: var(--font-serif); font-size: 16px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the title swaps once, when the note lands — let it swap visibly */
.msc-chid__note.is-swap { animation: mscTitleSwap .5s var(--ease); }
@keyframes mscTitleSwap {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.msc-ctx {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--mb-card-2) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mb-line-soft);
  animation: mscDrop .34s var(--ease);
}
@keyframes mscDrop { from { opacity: 0; transform: translateY(-8px); } }
.msc-ctx__line {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--mb-faint); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msc-auto {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mb-deep);
}
.msc-auto__track {
  width: 26px; height: 14px; border-radius: 999px; position: relative; display: block;
  background: var(--mb-accent);
}
.msc-auto__track b {
  position: absolute; top: 2px; left: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; display: block;
}

/* the Note|Chat segment sits inline in the chat view */
.msc-seg {
  flex: none; display: flex; gap: 5px;
  margin: 10px 16px 2px; position: relative; z-index: 2;
  padding: 4px; background: var(--mb-card); border: 1px solid var(--mb-line); border-radius: 13px;
  animation: mscDrop .34s var(--ease);
}
.msc-seg__btn {
  flex: 1; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1;
  color: var(--mb-soft); background: none; border: 0;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.msc-seg__btn.is-active { background: var(--mb-mint); color: var(--mb-deep); }

/* ---------- thread ---------- */
.msc-thread {
  flex: 1 1 auto; min-height: 0; position: relative; z-index: 1;
  overflow: hidden;
  padding: 18px 16px 8px;
  display: flex; flex-direction: column; gap: 14px;
  background-image: linear-gradient(rgba(22, 32, 26, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(22, 32, 26, .045) 1px, transparent 1px);
  background-size: 26px 26px;
}

.msc-msg { max-width: 88%; animation: mscBubbleIn .42s var(--spring) both; }
@keyframes mscBubbleIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.msc-msg--user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--mb-accent); color: #fff;
  border-radius: 18px 18px 6px 18px;
  padding: 10px 14px;
  font-size: 14.5px; line-height: 1.5;
  box-shadow: 0 6px 16px -10px rgba(16, 40, 28, .8);
}
.msc-msg--ai { align-self: flex-start; max-width: 92%; display: flex; flex-direction: column; }
.msc-msg__model {
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1.3;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mb-faint);
  margin: 5px 0 0 4px; display: flex; align-items: center; gap: 6px; order: 2;
}
.msc-msg__model::before { content: "\2726"; color: var(--mb-accent); text-transform: none; letter-spacing: 0; }
.msc-msg__body {
  order: 1;
  background: var(--mb-card);
  border: 1px solid var(--mb-line);
  border-radius: 18px 18px 18px 6px;
  padding: 11px 14px;
  font-size: 14.5px; line-height: 1.6;
  box-shadow: 0 1px 2px rgba(16, 40, 28, .05), 0 6px 18px -14px rgba(16, 40, 28, .5);
}
.msc-msg__body p { margin: 0 0 8px; }
.msc-msg__body p:last-child { margin-bottom: 0; }
.msc-msg__body ul { margin: 4px 0 8px; padding-left: 20px; list-style: disc; }
.msc-msg__body li { margin-bottom: 3px; }
.msc-msg__body h4 { margin: 10px 0 6px; font-family: var(--font-serif); font-size: 15px; font-weight: 600; }
.msc-msg__body h4:first-child { margin-top: 0; }
.msc-msg__body b { font-weight: 700; }
.msc-inline {
  background: rgba(22, 32, 26, .07); border-radius: 5px; padding: 1px 5px;
  font-family: var(--font-mono); font-size: .84em;
}
.msc-msg__imgs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; justify-content: flex-end; }
.msc-msg__imgs .msc-thumb { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--mb-line); }
.msc-msg__status {
  font-size: 12.5px; color: var(--mb-faint); order: 3;
  margin: 6px 0 0 2px; display: flex; align-items: center; gap: 6px;
}
.msc-msg__status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 2px solid var(--mb-accent); border-top-color: transparent;
  animation: mscSpin .8s linear infinite;
}
@keyframes mscSpin { to { transform: rotate(360deg); } }
.msc-msg__status span { animation: mscStatusIn .34s var(--ease); }
@keyframes mscStatusIn { from { opacity: 0; transform: translateX(-5px); } }

.msc-lmcaret {
  display: inline-block; width: 7px; height: 15px;
  background: var(--mb-accent); border-radius: 2px;
  vertical-align: text-bottom; margin-left: 2px;
  animation: mscBlink 1s steps(2) infinite;
}
@keyframes mscBlink { 50% { opacity: 0; } }
.msc-lmcaret--input { display: none; width: 2px; height: 17px; vertical-align: -3px; }
.msc-cmpinput.is-typing .msc-lmcaret--input { display: inline-block; }

.msc-msg__action {
  order: 4; align-self: flex-start;
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mb-mint); border: 1px solid var(--mb-mint-line);
  color: var(--mb-deep); border-radius: 12px;
  padding: 9px 12px;
  font-size: 11px; font-weight: 500; line-height: 1.2;
  font-family: var(--font-mono);
  animation: mscBubbleIn .42s var(--spring) both;
  transition: transform .18s var(--spring), box-shadow .18s var(--ease);
}
.msc-msg__action svg { width: 14px; height: 14px; }
.msc-msg__action.is-hit {
  transform: scale(.95);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mb-accent) 12%, transparent);
}

/* empty-state hero */
.msc-hello {
  margin: auto;
  text-align: center;
  padding: 24px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* MathematiX Icon (Stationary with signature outline effect) */
.msc-hello__icon {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 18px;
  background: var(--mb-card);
  border: 1.5px solid color-mix(in srgb, var(--mb-accent) 42%, var(--mb-mint-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-accent) 12%, transparent),
              0 6px 18px -4px color-mix(in srgb, var(--mb-accent) 18%, transparent);
  overflow: hidden;
}
.msc-hello__icon-glow {
  display: none;
}
.msc-hello__icon-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  transform: scale(1.7);
}

.msc-hello h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -.02em;
  margin: 10px 0 0;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 5px;
}
.msc-hello__lead {
  color: var(--mb-ink);
}
.msc-hello__phrase {
  font-style: italic;
  color: var(--mb-accent);
  position: relative;
  white-space: nowrap;
  background-image: var(--mb-flow, linear-gradient(90deg, #124d34, #1c7c54, #6fbb96, #145c3d, #124d34));
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: mscHelloWave 7s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  min-width: 0.5ch;
  text-shadow: 0 0 10px color-mix(in srgb, var(--mb-accent) 15%, transparent);
}
.msc-hello__phrase::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 3px;
  background: var(--mb-accent);
  animation: mscHelloCaret 0.9s steps(1) infinite;
  vertical-align: -0.03em;
  -webkit-text-fill-color: initial;
}

@keyframes mscHelloCaret {
  50% { opacity: 0; }
}

@keyframes mscHelloWave {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

.msc-hello p {
  color: var(--mb-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 29ch;
}
.msc-hello__chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}

/* 3 Cards with Minimal Animated Wave Color Effect (Pure White + Signature Colour Only) */
.msc-chip {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  font-size: 14.5px;
  color: var(--mb-ink);
  text-align: left;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--mb-line) 75%, var(--mb-mint-line));
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--mb-accent) 8%, transparent), 0 1px 2px rgba(0, 0, 0, 0.03);
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    color-mix(in srgb, #ffffff 82%, var(--mb-mint)) 25%,
    color-mix(in srgb, #ffffff 68%, var(--mb-mint-line)) 50%,
    color-mix(in srgb, #ffffff 84%, var(--mb-mint)) 75%,
    #ffffff 100%
  );
  background-size: 240% 240%;
  animation: mscChipWave 9s ease-in-out infinite alternate;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.msc-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(75% 65% at 20% 30%, color-mix(in srgb, var(--mb-accent) 12%, transparent), transparent 70%),
              radial-gradient(70% 60% at 80% 70%, color-mix(in srgb, var(--mb-accent) 9%, transparent), transparent 70%);
  background-size: 200% 200%;
  animation: mscChipAura 11s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.9;
}
.msc-chip:nth-child(1) { animation-delay: 0s; }
.msc-chip:nth-child(1)::before { animation-delay: 0s; }
.msc-chip:nth-child(2) { animation-delay: -3.3s; }
.msc-chip:nth-child(2)::before { animation-delay: -4s; }
.msc-chip:nth-child(3) { animation-delay: -6.6s; }
.msc-chip:nth-child(3)::before { animation-delay: -8s; }

@keyframes mscChipWave {
  0% { background-position: 0% 30%; }
  50% { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
@keyframes mscChipAura {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.6; }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 0.9; }
  100% { transform: translate3d(-3%, -2%, 0) scale(1); opacity: 0.6; }
}

/* ---------- composer ---------- */
.msc-composer {
  flex: none; position: relative; z-index: 2;
  padding: 8px 14px calc(10px + var(--safe-b));
  background: color-mix(in srgb, var(--mb-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-top: 1px solid var(--mb-line-soft);
}
.msc-cmpcard {
  background: var(--mb-card);
  border: 1px solid var(--mb-line);
  border-radius: var(--r-lg);
  padding: 10px 11px 9px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 8px 24px rgba(31, 79, 55, .05);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* the composer wakes up while you are typing into it */
.msc-cmpcard.is-focus {
  border-color: var(--mb-mint-line);
  box-shadow: 0 8px 24px rgba(31, 79, 55, .08), 0 0 0 4px color-mix(in srgb, var(--mb-accent) 9%, transparent);
}
.msc-cmpinput {
  color: var(--mb-ink);
  font-size: 16px; line-height: 1.5;
  padding: 6px 4px 2px;
  min-height: 32px;
  word-break: break-word;
}
.msc-cmpinput.is-empty > span[data-msc-typed]::before {
  content: "Message Lemma\2026"; color: var(--mb-faint);
}
.msc-cmprow { display: flex; align-items: center; gap: 6px; }
.msc-cmpbtn {
  width: 32px; height: 32px; flex: none;
  border-radius: 9px; display: grid; place-items: center;
  color: var(--mb-faint);
  transition: background .15s var(--ease), color .15s var(--ease), transform .2s var(--spring);
}
.msc-cmpbtn.is-hit { background: var(--mb-mint); color: var(--mb-deep); transform: scale(.86) rotate(90deg); }
.msc-cmpbtn svg { width: 18px; height: 18px; }
.msc-cmpmode {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 31px; padding: 0 9px;
  border-radius: 8px; border: 1px solid var(--mb-line);
  color: var(--mb-soft); font-size: 12.5px; line-height: 1;
}
.msc-cmpmode svg { width: 13px; height: 13px; }
.msc-cmpintent {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 31px; padding: 0 9px 0 7px;
  border-radius: 8px;
  border: 1px solid var(--mb-mint-line);
  background: var(--mb-mint);
  color: var(--mb-deep);
  font-size: 12.5px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.msc-cmpintent__ic { display: grid; place-items: center; flex: none; }
.msc-cmpintent__ic svg { width: 14px; height: 14px; }
.msc-cmpintent__chev { width: 12px; height: 12px; flex: none; opacity: .7; }
.msc-cmpsend {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px; display: grid; place-items: center;
  border: 1px solid transparent;
  background: var(--mb-accent); color: #fff;
  opacity: .38;
  transition: opacity .25s var(--ease), transform .2s var(--spring), box-shadow .25s var(--ease);
}
.msc-cmpsend svg { width: 17px; height: 17px; }
.msc-cmpsend.is-live { opacity: 1; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--mb-accent) 90%, transparent); }
.msc-cmpsend.is-hit { transform: scale(.86); }

/* inline capture panel (inside the composer card) */
.msc-shots {
  background: var(--mb-card-2); border: 1px solid var(--mb-line-soft);
  border-radius: 12px; padding: 10px;
  animation: mscShotsIn .46s var(--spring) both;
}
@keyframes mscShotsIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
}
.msc-shots.is-out { animation: mscShotsOut .26s ease forwards; }
@keyframes mscShotsOut { to { opacity: 0; transform: translateY(6px) scale(.97); } }
.msc-shots__strip { display: flex; gap: 8px; padding-bottom: 8px; }
.msc-shots__row { display: flex; gap: 8px; }
.msc-shots__row > * { flex: 1; }
.msc-soft {
  background: var(--mb-card); color: var(--mb-soft);
  border: 1px solid var(--mb-line); border-radius: var(--r-md);
  height: 44px; padding: 0 20px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 14.5px; line-height: 1;
}

/* the photo thumbnails — the board SVG cropped to a square, the way a
   real camera roll thumb would be */
.msc-thumb {
  width: 72px; height: 72px; flex: none;
  border-radius: 10px; border: 1px solid var(--mb-line);
  overflow: hidden; position: relative; background: #ded9cb;
  animation: mscThumbIn .5s var(--spring) both;
}
@keyframes mscThumbIn { from { opacity: 0; transform: scale(.7) rotate(-4deg); } }
.msc-thumb:nth-child(2) { animation-delay: .1s; }
.msc-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- attach sheet ---------- */
.msc-sheet { position: absolute; inset: 0; z-index: 90; }
.msc-scrim {
  position: absolute; inset: 0; z-index: 80;
  background: rgba(16, 32, 26, .42);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  animation: mscScrimIn .22s ease;
}
.msc-sheet__card {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 91;
  max-height: 100%;
  background: var(--mb-card-2);
  border-top: 1px solid var(--mb-line);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 10px 20px calc(34px + var(--safe-b));
  box-shadow: 0 -20px 60px -30px rgba(16, 40, 28, .4);
  animation: mscSheetIn .42s cubic-bezier(.19, 1.06, .3, 1);
}
@keyframes mscScrimIn { from { opacity: 0; } }
@keyframes mscSheetIn { from { transform: translateY(100%); } }
.msc-sheet.is-closing { pointer-events: none; }
.msc-sheet.is-closing .msc-scrim { animation: mscScrimOut .24s ease forwards; }
.msc-sheet.is-closing .msc-sheet__card { animation: mscSheetOut .3s cubic-bezier(.36, 0, .66, -.06) forwards; }
@keyframes mscScrimOut { to { opacity: 0; } }
@keyframes mscSheetOut { to { transform: translateY(100%); } }
.msc-sheet__grab { width: 38px; height: 4px; border-radius: 99px; background: var(--mb-line); margin: 0 auto 16px; }
.msc-sheet__card h3 {
  margin: 0 2px; font-family: var(--font-serif);
  font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2;
}
.msc-sheet__meta {
  margin: 16px 2px 0;
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mb-faint);
}
.msc-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.msc-opt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--mb-line); border-radius: var(--r-md);
  background: var(--mb-card); text-align: left;
  box-shadow: 0 1px 2px rgba(16, 40, 28, .05);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .18s var(--spring), box-shadow .18s var(--ease);
  animation: mscOptIn .44s var(--ease) backwards;
}
@keyframes mscOptIn { from { opacity: 0; transform: translateY(12px); } }
.msc-opt:nth-child(1) { animation-delay: .06s; }
.msc-opt:nth-child(2) { animation-delay: .11s; }
.msc-opt:nth-child(3) { animation-delay: .16s; }
.msc-opt:nth-child(4) { animation-delay: .21s; }
.msc-opt.is-hit {
  border-color: var(--mb-mint-line); background: var(--mb-mint); transform: scale(.985);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mb-accent) 10%, transparent);
}
.msc-opt__ic {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-sm);
  background: var(--mb-mint); border: 1px solid var(--mb-mint-line);
  color: var(--mb-deep); display: grid; place-items: center;
}
.msc-opt__ic svg { width: 19px; height: 19px; }
.msc-opt__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msc-opt__tx b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.msc-opt__tx small { font-size: 12px; color: var(--mb-faint); line-height: 1.35; }
.msc-opt__chev { color: var(--mb-faint); font-size: 17px; line-height: 1; }

/* ---------- note reader ---------- */
.msc-reader {
  flex: 1 1 auto; min-height: 0; position: relative; z-index: 1;
  overflow: hidden;
  padding: 16px 18px 24px;
}
.msc-rd { margin: 0 0 16px; animation: mscRdIn .46s var(--ease) backwards; }
@keyframes mscRdIn { from { opacity: 0; transform: translateY(14px); } }
.msc-rd:nth-child(1) { animation-delay: .04s; }
.msc-rd:nth-child(2) { animation-delay: .11s; }
.msc-rd:nth-child(3) { animation-delay: .18s; }
.msc-rd:nth-child(4) { animation-delay: .25s; }
.msc-rd:nth-child(5) { animation-delay: .32s; }
.msc-rd:nth-child(6) { animation-delay: .39s; }
.msc-rd__text { font-size: 15.5px; line-height: 1.6; }
.msc-rd__text h3, .msc-rd__text h4 { font-family: var(--font-serif); font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; line-height: 1.2; }
.msc-rd__text h3 { font-size: 21px; }
.msc-rd__text h4 { font-size: 16.5px; }
.msc-rd__text p { color: var(--mb-soft); }
.msc-rd__text ol { padding-left: 22px; margin: 6px 0; list-style: decimal; }
.msc-rd__text li { margin-bottom: 4px; }
.msc-rd__text b { font-weight: 700; color: var(--mb-ink); }
.msc-rd__math {
  background: var(--mb-card); border: 1px solid var(--mb-line);
  border-radius: var(--r-sm); padding: 14px;
  display: grid; place-items: center;
}
.msc-rd__math--res { border-color: var(--mb-mint-line); background: var(--mb-mint); }
.msc-rd__math--res .msc-tex { color: var(--mb-deep); }
.msc-tex {
  font-family: var(--font-serif); font-size: 19px; line-height: 1.4;
  letter-spacing: .01em; color: var(--mb-ink);
}
.msc-tex i { font-style: italic; }
.msc-tex sup { font-size: .62em; vertical-align: super; }
.msc-rd__chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mb-card); border: 1px dashed var(--mb-line);
  border-radius: var(--r-sm); padding: 12px 16px;
  color: var(--mb-faint); font-size: 13.5px; line-height: 1.2;
}
.msc-rd__chip svg { width: 15px; height: 15px; flex: none; }

/* ---------- toasts ---------- */
.msc-toasts {
  position: absolute; inset: 0; z-index: 95;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 8px; padding-bottom: calc(104px + var(--safe-b));
  pointer-events: none;
}
.msc-toast {
  max-width: 92%;
  background: var(--mb-ink); color: var(--mb-bg);
  border-radius: 999px; padding: 10px 18px;
  font-size: 13.5px; line-height: 1.3;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--sh-pop);
  animation: mscToastIn .42s var(--spring) both;
}
.msc-toast.is-out { animation: mscToastOut .28s ease forwards; }
@keyframes mscToastIn { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes mscToastOut { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.msc-toast svg { width: 15px; height: 15px; flex: none; color: var(--glow); }

/* Nodes rebuilt to catch the screen up to a chapter you jumped to. They are
   meant to look like they were always there, so their arrival animations —
   and their children's — are off. mobile-showcase.js stamps them. */
.msc-noanim, .msc-noanim * { animation: none !important; }

/* ---------- the shutter ----------
   Fires once per shot in the burst, so the two thumbnails arriving in the
   tray read as two photographs being taken rather than two files appearing. */
.msc-flash {
  position: absolute; inset: 0; z-index: 94;
  background: #fff; opacity: 0; pointer-events: none;
  animation: mscFlash .46s ease-out;
}
@keyframes mscFlash {
  0%   { opacity: 0; }
  10%  { opacity: .88; }
  100% { opacity: 0; }
}

/* ---------- the finger ---------- */
.msc-tap {
  position: absolute; z-index: 97; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%;
  opacity: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--mb-accent) 26%, transparent) 0%, transparent 62%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mb-accent) 55%, transparent) inset;
}
.msc-tap.is-on { animation: mscRipple .62s cubic-bezier(.22, 1, .36, 1); }
@keyframes mscRipple {
  0%   { opacity: 0;  transform: scale(.25); }
  22%  { opacity: .9; transform: scale(.62); }
  100% { opacity: 0;  transform: scale(1.7); }
}

/* ------------------------------------------------------------
   CAPTION UNDER THE PHONE
   ------------------------------------------------------------ */
.msc-caption {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono);
  padding: 9px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-3) 72%, transparent);
  border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px -18px rgba(16, 40, 28, .5);
}
.msc-caption b { font-size: 11px; color: var(--green); letter-spacing: .08em; }
.msc-caption span { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .01em; }
.msc-caption span.is-swap { animation: mscCapSwap .42s var(--ease); }
@keyframes mscCapSwap { from { opacity: 0; transform: translateY(4px); } }

/* ------------------------------------------------------------
   THE RAIL
   ------------------------------------------------------------ */
.msc-rail__title { margin-top: 14px; font-family: var(--font-serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.msc-rail__lead { margin-top: 12px; max-width: 46ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

.msc-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; }
.msc-step {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 15px 14px 15px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.msc-step + .msc-step { box-shadow: 0 -1px 0 var(--line); }
.msc-step:hover { background: color-mix(in srgb, var(--paper-3) 60%, transparent); }
.msc-step:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.msc-step__n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-faint); padding-top: 3px; transition: color .4s var(--ease); }
.msc-step__tx b { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; transition: color .4s var(--ease); }
.msc-step__tx small { display: block; margin-top: 3px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }

/* the progress hairline that fills while its chapter plays */
.msc-step__bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.msc-step__bar i { display: block; width: 100%; height: 0; background: linear-gradient(var(--green-300), var(--green)); transition: height 0s linear; }

.msc-step.is-on {
  background: var(--paper-3);
  box-shadow: 0 18px 40px -26px rgba(16, 40, 28, .45), 0 1px 0 var(--line-soft);
  transform: translateX(3px);
}
.msc-step.is-on .msc-step__n { color: var(--green); }
.msc-step.is-on .msc-step__tx b { color: var(--green-800); }
.msc-step.is-on .msc-step__bar i { height: 100%; }
.msc-step.is-on .msc-step__bar { box-shadow: 0 0 12px -2px color-mix(in srgb, var(--green) 45%, transparent); }
.msc-step.is-done .msc-step__bar i { height: 100%; background: var(--mint-line); transition: none; }

.msc-extra {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 26px; padding: 16px 18px;
  border: 1px solid var(--mint-line); border-radius: 16px; background: var(--mint);
}
.msc-extra__i { flex: none; color: var(--green-700); }
.msc-extra__i svg { width: 19px; height: 19px; display: block; }
.msc-extra p { font-size: .92rem; color: var(--green-800); line-height: 1.55; }
.msc-extra b { font-weight: 700; }

.msc-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.msc-replay {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.msc-replay:hover { border-color: var(--mint-line); background: var(--paper-3); color: var(--green-700); }
.msc-replay svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.msc-replay:hover svg { transform: rotate(-180deg); }

/* ------------------------------------------------------------
   RESPONSIVE — one variable moves the whole device
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .msc { grid-template-columns: 316px minmax(0, 560px); gap: 44px; }
  .msc-device { --s: .72; }
}
@media (max-width: 1000px) {
  .msc { grid-template-columns: 1fr; gap: 48px; }
  .msc-device { --s: .80; }
  /* stack, but keep both halves full-width — justify-items:center would
     shrink them to max-content and take the phone down with it */
  .msc__stage { width: 100%; }
  .msc__rail { width: 100%; max-width: 560px; margin: 0 auto; }
  .msc-rail__title { text-align: center; }
  .msc-rail__lead { margin-left: auto; margin-right: auto; text-align: center; }
  .msc__rail > .eyebrow { justify-content: center; }
  .msc__rail > .eyebrow::before { display: none; }
  .msc-cta { justify-content: center; }
}
@media (max-width: 420px) {
  .msc-device { --s: .68; }
  .msc-step { padding-left: 12px; }
}
@media (max-width: 360px) {
  .msc-device { --s: .60; }
}

/* ------------------------------------------------------------
   REDUCED MOTION — the script jumps straight to the last chapter,
   so all that is left here is to stop the ambient loops.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .msc-amb__glow, .msc-device__pool, .msc-phone, .msc-phone__glare,
  .msc-aura i, .msc-flow, .msc-sync, .msc-hello::before, .msc-hello__icon-glow, .msc-hello__icon-img, .msc-hello__phrase, .msc-hello__phrase::after, .msc-chip, .msc-chip::before, .msc-classes .msc-lib,
  .msc-lmcaret, .msc-msg__status::before, .msc-fresh { animation: none !important; }
  .msc-view, .msc-msg, .msc-msg__action, .msc-ctx, .msc-seg, .msc-shots,
  .msc-sheet__card, .msc-scrim, .msc-opt, .msc-rd, .msc-toast, .msc-thumb,
  .msc-chid__note, .msc-caption span { animation: none !important; transition: none !important; }
  .msc-device { transform: none !important; transition: none !important; }
  .msc-phone { transform: none !important; }
  .msc-tap, .msc-flash, .msc-phone__glare { display: none; }
}