/* ════════════════════════════════════════════════════════════════════════
   mantra-new.css — THE FORGE.

   Mobile-first. Neoglass over a living field. Five movements that reveal
   in sequence, a preview that breathes, and no floating chrome that can
   ever land on top of the words.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --mn-vio: #b15cff;
  --mn-cyan: #3df2ff;
  --mn-ink: #f2f4ff;
  --mn-dim: rgba(233, 236, 255, .6);
  --mn-edge: rgba(255, 255, 255, .1);
  --mn-glass: rgba(11, 13, 24, .58);
}

* { box-sizing: border-box; }

.mn {
  position: relative;
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--mn-ink);
  padding-bottom: 64px;
}

/* ── the living field ── */
.mn__field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 42% at 18% 6%, rgba(109, 59, 255, .30), transparent 62%),
    radial-gradient(50% 40% at 88% 16%, rgba(61, 242, 255, .16), transparent 66%),
    radial-gradient(70% 50% at 50% 104%, rgba(177, 92, 255, .22), transparent 68%),
    #05060a;
  animation: mn-drift 26s ease-in-out infinite alternate;
}
@keyframes mn-drift {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.07) translateY(-14px); }
}
.mn__grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════
   THE BAR — page chrome that OCCUPIES space instead of floating.
   The old back button was position:absolute and landed on top of the
   headline on a narrow screen. A flow-level bar cannot collide.
   ════════════════════════════════════════════════════════════════ */
.mn__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 6px;
  max-width: 720px;
  margin: 0 auto;
}
.mn__back, .mn__home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--mn-dim);
  padding: 9px 15px;
  border-radius: 99px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
  min-height: 40px;
}
.mn__back:hover, .mn__home:hover {
  color: var(--mn-ink);
  border-color: rgba(177, 92, 255, .45);
  transform: translateY(-1px);
}
.mn__home { margin-left: auto; font-weight: 600; }
/* a CSS arrow — no glyph font, no request */
.mn__backg {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 7px 5px 0;
  border-color: transparent currentColor transparent transparent;
}

/* ── the wrap ── */
.mn__wrap {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
body.mn--ready .mn__wrap { opacity: 1; transform: none; }

/* ── THE MARK (the MotusMind animation) ──
   Given real room. It is the whole MOTUS model in motion, not a decoration,
   so it gets its own airspace above the headline rather than sitting behind
   it. Sized in vw so it scales down on a phone instead of crowding. */
.mn__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 18px;
  width: 100%;
  pointer-events: none;   /* never steals a tap from the words below */
}
.mn__mark .mm { max-width: 100%; overflow: visible; }

/* ════════════════════════════════════════════════════════════════
   THE GATE — signed out
   ════════════════════════════════════════════════════════════════ */
.mn__gate { text-align: center; padding: 4px 0 26px; }

.mn__gsay {
  margin: 6px 0 0;
  font-size: clamp(1.85rem, 8.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: 600;
  background: linear-gradient(180deg, #fff 24%, #cbb6ff 78%, var(--mn-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.mn__gsub {
  margin: 16px auto 0;
  max-width: 33ch;
  font-size: .96rem;
  line-height: 1.62;
  color: var(--mn-dim);
  text-wrap: pretty;
}
.mn__gacts {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 26px auto 0;
  max-width: 340px;
}
.mn__act {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 15px 22px;
  border-radius: 17px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--mn-ink);
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  font-family: inherit;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, border-color .2s ease;
  min-height: 52px;
}
.mn__act:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .22); }
.mn__act:active { transform: translateY(0) scale(.985); }
.mn__act.is-primary {
  border-color: rgba(177, 92, 255, .55);
  background: linear-gradient(135deg, rgba(177, 92, 255, .34), rgba(61, 242, 255, .16));
  box-shadow: 0 18px 46px -24px rgba(177, 92, 255, .95);
}
.mn__act.is-primary:hover { box-shadow: 0 24px 60px -24px rgba(177, 92, 255, 1); }
.mn__gnote { margin: 14px 0 0; font-size: .76rem; color: rgba(233, 236, 255, .38); }

.mn__gpeek { display: grid; gap: 10px; margin: 32px 0 0; }
.mn__peek {
  margin: 0;
  padding: 15px 17px;
  border-radius: 18px;
  border: 1px solid var(--mn-edge);
  background: var(--mn-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  text-align: left;
  animation: mn-rise .6s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i) * 90ms + 260ms);
}
@keyframes mn-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.mn__peek blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.42;
  font-weight: 500;
  color: var(--mn-ink);
}
.mn__peek figcaption {
  margin-top: 9px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--mn-dim);
}
.mn__peeksig { margin-left: auto; font-size: .68rem; letter-spacing: .04em; color: rgba(233, 236, 255, .42); }
.mn__peeksig b { color: rgba(233, 236, 255, .72); font-weight: 650; letter-spacing: .1em; }

.mn__gsee {
  display: inline-block;
  margin-top: 26px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--mn-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 242, 255, .3);
  padding-bottom: 2px;
}

/* ════════════════════════════════════════════════════════════════
   THE FORGE — signed in
   ════════════════════════════════════════════════════════════════ */
.mn__head { text-align: center; padding: 2px 0 10px; }
.mn__say {
  margin: 10px 0 0;
  font-size: clamp(1.52rem, 6.6vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -.026em;
  font-weight: 600;
  background: linear-gradient(180deg, #fff 30%, #cbb6ff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.mn__sub { margin: 11px 0 0; font-size: .88rem; color: var(--mn-dim); }

/* ════════════════════════════════════════════════════════════════
   THE INVOCATION — the opening question, one line at a time.

   This is the emotional heart of the page, so it is given real room and
   real time. Each line fades up from below with a slight blur clearing,
   like a thought coming into focus. The dwell between lines is set in JS
   (2.4s–4.2s per line) — long enough to actually READ and feel, not a
   loading shimmer.
   ════════════════════════════════════════════════════════════════ */
.mn__invwrap {
  position: relative;
  margin: 34px auto 0;
  /* WIDE. These lines are the page — not a caption under a headline.
     22ch was far too narrow for text this large: it wrapped the opening
     question to ONE WORD PER LINE and the receded copy became an
     unreadable vertical column. The stage line needs room to breathe
     horizontally so it can be read in two or three lines, not twelve. */
  max-width: min(94vw, 34rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  --charge: 0;
}

/* the room brightens as the weight accumulates — driven by --charge, which
   JS advances 0 → 1 across the eight lines. Barely perceptible per line;
   unmistakable by the end. */
.mn__invwrap::before {
  content: '';
  position: absolute;
  left: 50%; top: 34%;
  width: 150%; height: 90%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: calc(.1 + var(--charge) * .55);
  background: radial-gradient(ellipse at center,
    rgba(177, 92, 255, .2) 0%,
    rgba(61, 242, 255, .07) 42%,
    transparent 74%);
  filter: blur(46px);
  transition: opacity 4s linear;
}

.mn__invlines {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   THE STRIKE

   Three states, and the whole feeling lives in the difference:

     (default)  not yet spoken — absent. Zero height, nothing reserved.
     .is-now    ON STAGE. Huge, bright, alone, at full weight.
     .is-past   spoken. Recedes UPWARD, small and dim, and stays.

   So the invocation vaults up above the reader as the weight settles
   down into them. Nothing is ever removed; the lines accumulate like
   verses already read.

   Collapse is `grid-template-rows: 0fr → 1fr`, never a max-height cap:
   a cap in em is a guess about text that reflows, and it silently
   clipped the 88-character opening line.
   ════════════════════════════════════════════════════════════════ */
.mn__inv {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  width: 100%;
  opacity: 0;
  /* un-struck: wide, weightless, out of focus — light that hasn't
     gathered into a word yet */
  letter-spacing: .5em;
  filter: blur(16px);
  transform: translateY(26px) scale(.94);
  transform-origin: center top;
  transition:
    grid-template-rows 2.6s cubic-bezier(.19, 1, .22, 1),
    opacity 3.4s cubic-bezier(.19, 1, .22, 1),
    letter-spacing 4.2s cubic-bezier(.19, 1, .22, 1),
    filter 3.8s cubic-bezier(.19, 1, .22, 1),
    transform 3.4s cubic-bezier(.19, 1, .22, 1),
    font-size 2.8s cubic-bezier(.19, 1, .22, 1),
    color 2.8s linear,
    margin 2.6s cubic-bezier(.19, 1, .22, 1);
}
/* THE COLLAPSE, and why it needs this exact pair.
   `grid-template-rows: 0fr` sizes the TRACK to zero, but a grid item has an
   automatic minimum size — the span refuses to shrink below its content, so
   the row was measured at 105px and every un-struck line reserved ~79px,
   opening a 430px void under the headline. `min-height: 0` releases that
   minimum; `overflow: hidden` keeps the text from painting outside the
   collapsed row. Verified cold in-browser: 98.7px → 0px.
   This is also why a `max-height` cap was the old approach — but a cap in em
   is a guess about text that reflows, and it silently clipped the 88-char
   opening line. 0fr animates to the content's true height and cannot clip. */
.mn__invt {
  display: block;
  min-height: 0;
  overflow: hidden;
}

/* ── ON STAGE ── */
.mn__inv.is-in {
  grid-template-rows: 1fr;
  opacity: 1;
  filter: blur(0);
  transform: none;
  letter-spacing: var(--ls, -.02em);
  margin: 5vh 0;
}
/* Release the clip once the line is up, or `overflow: hidden` would crop the
   beats' drop-shadow glow and the questions' text-shadow bloom. The clip is
   only needed WHILE collapsed. */
.mn__inv.is-in .mn__invt { overflow: visible; }

/* ── SPOKEN ──
   Recedes upward: smaller, dimmer, tighter. Still legible — a slow reader
   must be able to look back up at what was already asked.

   NOT `transform: scale()`. A scaled element keeps its ORIGINAL layout box,
   so the shrunken text left a large dead gap above the stage line. Reducing
   `font-size` shrinks the box for real, and the gap closes with it. */
.mn__inv.is-past {
  opacity: .3;
  margin: .5vh 0;
  filter: none;
  letter-spacing: 0;
  font-weight: 450;
}
/* one modest size for every receded line, whatever kind it was — the stack
   should read as a quiet uniform record, not eight competing sizes */
.mn__inv.is-past.is-in { font-size: clamp(.82rem, 3.1vw, .95rem); }
.mn__inv.is-past .mn__invt { text-shadow: none; }
.mn__inv--beat.is-past.is-in { filter: none; }

/* the blessing, once the room has been released — held, not dimmed */
.mn__inv.is-rest { opacity: .92; }

/* ── THE AURA ──
   Light gathering into the words at the moment of the strike, then
   passing. Fires once per line; a loop would read as a spinner. Only on
   the line currently on stage. */
.mn__invaura {
  position: absolute;
  left: 50%; top: 50%;
  width: 128%; height: 260%;
  transform: translate(-50%, -50%) scale(.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center,
    rgba(203, 182, 255, .38) 0%,
    rgba(61, 242, 255, .13) 40%,
    transparent 72%);
  filter: blur(26px);
}
.mn__inv.is-now { position: relative; }
.mn__inv.is-now .mn__invaura { animation: mn-strike 5.4s cubic-bezier(.19, 1, .22, 1) both; }
@keyframes mn-strike {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.42); }
  16%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.62); }
}

/* ════════════════════════════════════════════════════════════════
   THE FOUR VOICES

   Sizes are deliberately LARGE — the questions fill the screen. Each
   kind carries its own weight because the words do different work:
   questions ask, commands confer, the covenant whispers, the blessing
   releases.

   Per-kind letter-spacing is passed as `--ls`, NEVER set directly: a
   `letter-spacing` declaration on a `.mn__inv--KIND` rule has the same
   specificity as `.mn__inv` and sits later in this file, so it would
   silently win and the condense-into-place would never play.
   ════════════════════════════════════════════════════════════════ */

/* the four questions — turning inward */
.mn__inv--ask.is-in {
  font-size: clamp(1.85rem, 8.4vw, 3.1rem);
  line-height: 1.16;
  font-weight: 550;
  --ls: -.026em;
  color: #f2f0ff;
  text-wrap: balance;
  text-shadow: 0 0 62px rgba(177, 92, 255, .42);
}

/* the two beats — the hardest hits on the page */
.mn__inv--beat.is-in {
  font-size: clamp(2.4rem, 12.4vw, 4.6rem);
  line-height: 1.04;
  font-weight: 700;
  --ls: -.038em;
  background: linear-gradient(168deg, #fff 12%, #cbb6ff 58%, var(--mn-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
  filter: drop-shadow(0 0 44px rgba(177, 92, 255, .5));
}

/* the two commands — turning outward. "Builder" confers a title. */
.mn__inv--call.is-in {
  font-size: clamp(2.1rem, 10.4vw, 3.7rem);
  line-height: 1.1;
  font-weight: 700;
  --ls: -.028em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 0 54px rgba(61, 242, 255, .5);
}

/* the covenant — whispered, in parentheses: freedom and constraint in one
   breath. Quiet, never small enough to dismiss. */
.mn__inv--fine.is-in {
  font-size: clamp(1.16rem, 4.9vw, 1.62rem);
  line-height: 1.5;
  font-weight: 400;
  --ls: .006em;
  color: rgba(226, 224, 255, .74);
  text-wrap: pretty;
  font-style: italic;
}

/* the blessing — released back to the reader, and signed */
.mn__inv--sign.is-in {
  font-size: clamp(1.42rem, 6.2vw, 2.1rem);
  line-height: 1.44;
  font-weight: 450;
  --ls: -.012em;
  font-style: italic;
  color: rgba(214, 199, 255, .95);
  text-wrap: pretty;
  text-shadow: 0 0 48px rgba(177, 92, 255, .4);
}

/* ── THE SOUND SWITCH ──
   Its LABEL tells the truth about three states, because a browser will
   not let audio run before a gesture and a toggle that claims "on" while
   silent is a lie:
     silent           — the reader chose silence
     touch for sound  — armed, waiting on the gesture the browser demands
     sound on         — genuinely audible right now
   `is-on` breathes only in that third state. */
.mn__invsound {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 7vh auto 0;
  padding: 10px 17px;
  border-radius: 99px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .035);
  color: rgba(233, 236, 255, .42);
  font: inherit;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: lowercase;
  cursor: pointer;
  min-height: 44px;
  align-self: center;
  position: relative;
  z-index: 2;
  transition: color .3s ease, border-color .3s ease;
}
/* the label cycles through three widths — reserve the widest, or the pill
   resizes under the reader's finger the moment they tap it */
.mn__invsound .mn__invsl {
  min-width: 9.4ch;
  text-align: left;
  white-space: nowrap;
}
.mn__invsound:hover { color: var(--mn-ink); border-color: rgba(255, 255, 255, .2); }
.mn__invsound .mn__invsw {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(233, 236, 255, .26);
  transition: background .3s ease, box-shadow .3s ease;
}
.mn__invsound.is-armed { color: rgba(61, 242, 255, .8); border-color: rgba(61, 242, 255, .3); }
.mn__invsound.is-armed .mn__invsw { background: var(--mn-cyan); }
.mn__invsound.is-on { color: rgba(203, 182, 255, .88); border-color: rgba(177, 92, 255, .38); }
.mn__invsound.is-on .mn__invsw {
  background: #cbb6ff;
  animation: mn-sonar 3.6s ease-out infinite;
}
@keyframes mn-sonar {
  0%   { box-shadow: 0 0 0 0 rgba(203, 182, 255, .5); }
  70%  { box-shadow: 0 0 0 11px rgba(203, 182, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(203, 182, 255, 0); }
}

/* the Mover's own identity — tappable, goes to their page.
   Pushed well clear of the invocation's signature line so the two never
   read as one block. */
.mn__me {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 34px auto 0;
  padding: 7px 15px 7px 7px;
  border-radius: 99px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .05);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
  min-height: 44px;
}
.mn__me:hover { border-color: rgba(177, 92, 255, .5); transform: translateY(-1px); }
.mn__meav {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--mn-vio), var(--mn-cyan));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
  color: #0a0c16;
  flex: none;
}
.mn__men { font-size: .84rem; font-weight: 600; color: var(--mn-ink); }
.mn__vf { color: var(--mn-cyan); font-style: normal; font-size: .72rem; }
.mn__mego { font-size: .7rem; color: var(--mn-dim); }

/* ── a movement ── */
.mn__step {
  margin: 26px 0 0;
  padding: 17px 17px 19px;
  border-radius: 22px;
  border: 1px solid var(--mn-edge);
  background: var(--mn-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 70px -46px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: mn-rise .58s cubic-bezier(.22, 1, .36, 1) both;
}
/* staggered reveal — one movement at a time, so the forge unfolds */
.mn__step[data-step="1"] { animation-delay: 100ms; }
.mn__step[data-step="2"] { animation-delay: 170ms; }
.mn__step[data-step="3"] { animation-delay: 240ms; }
.mn__step[data-step="4"] { animation-delay: 310ms; }
.mn__step[data-step="5"] { animation-delay: 380ms; }

.mn__k {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 13px;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233, 236, 255, .82);
}
.mn__k > span {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .68rem;
  background: linear-gradient(140deg, rgba(177, 92, 255, .9), rgba(61, 242, 255, .5));
  color: #080a14;
  flex: none;
  letter-spacing: 0;
}
.mn__k > i {
  margin-left: auto;
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: none;
  color: rgba(233, 236, 255, .4);
}
.mn__k--quiet { opacity: .6; }

/* ── 1. the words ── */
.mn__inwrap { position: relative; }
.mn__in {
  width: 100%;
  min-height: 74px;
  resize: none;
  border-radius: 16px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .05);
  color: var(--mn-ink);
  font-family: inherit;
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.42;
  padding: 15px 15px 30px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.mn__in::placeholder { color: rgba(233, 236, 255, .3); }
.mn__in:focus {
  outline: 0;
  border-color: rgba(177, 92, 255, .6);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 4px rgba(177, 92, 255, .14);
}
.mn__count {
  position: absolute;
  right: 13px; bottom: 10px;
  font-size: .68rem;
  color: rgba(233, 236, 255, .34);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.mn__count.is-near { color: #ffb37a; }

/* The availability line collapses to nothing when there is nothing to say,
   instead of reserving an empty 18px band under the textarea. It only takes
   up room once it actually carries a verdict. */
.mn__avail {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: .8rem;
  color: var(--mn-dim);
  transition: max-height .3s ease, margin .3s ease, opacity .25s ease;
  opacity: 0;
}
.mn__avail.is-wait, .mn__avail.is-free, .mn__avail.is-taken {
  margin-top: 11px;
  max-height: 4em;
  opacity: 1;
}
.mn__avail.is-wait { opacity: .6; }
.mn__avail.is-free { color: #4affa3; }
.mn__avail.is-free::before { content: '✦ '; }
.mn__avail.is-taken { color: #ff8a9e; }
.mn__avail a { color: var(--mn-cyan); text-decoration: none; }

/* ── 2. the link ── */
.mn__urlwrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  border-radius: 15px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .05);
  padding: 4px 6px 4px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mn__urlwrap:focus-within {
  border-color: rgba(61, 242, 255, .55);
  box-shadow: 0 0 0 4px rgba(61, 242, 255, .11);
}
.mn__urlpre {
  font-size: .76rem;
  color: rgba(233, 236, 255, .42);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mn__urlin {
  flex: 1;
  min-width: 90px;
  border: 0;
  background: none;
  color: var(--mn-cyan);
  font-family: inherit;
  font-size: .94rem;
  font-weight: 600;
  padding: 10px 6px;
}
.mn__urlin:focus { outline: 0; }
.mn__urlin::placeholder { color: rgba(61, 242, 255, .28); }
.mn__urlnote {
  margin: 10px 0 0;
  font-size: .72rem;
  color: rgba(233, 236, 255, .38);
  overflow-wrap: anywhere;
}
.mn__urlnote.is-live { color: rgba(61, 242, 255, .62); }

/* ── 3. worlds ── */
.mn__wtabs { display: flex; gap: 7px; margin: 0 0 12px; }
.mn__wtab {
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .04);
  color: var(--mn-dim);
  border-radius: 99px;
  padding: 8px 14px;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  min-height: 36px;
}
.mn__wtab.is-on {
  color: var(--mn-ink);
  border-color: rgba(177, 92, 255, .5);
  background: rgba(177, 92, 255, .16);
}

.mn__worlds { display: flex; flex-wrap: wrap; gap: 8px; }
.mn__world {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .045);
  color: rgba(233, 236, 255, .8);
  border-radius: 99px;
  padding: 9px 14px;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), border-color .2s ease, background .2s ease, color .2s ease;
  animation: mn-pop .4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 26ms);
  min-height: 40px;
}
@keyframes mn-pop {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}
.mn__world:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .24); color: #fff; }
.mn__world.is-on {
  color: #080a14;
  font-weight: 650;
  background: linear-gradient(135deg, var(--mn-vio), var(--mn-cyan));
  border-color: transparent;
  box-shadow: 0 10px 26px -14px rgba(177, 92, 255, .9);
}
.mn__wc {
  font-style: normal;
  font-size: .64rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.mn__world.is-on .mn__wc { opacity: .75; }

.mn__own { display: flex; gap: 8px; margin: 12px 0 0; }
.mn__ownin {
  flex: 1;
  min-width: 0;
  border-radius: 13px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .05);
  color: var(--mn-ink);
  font-family: inherit;
  font-size: .86rem;
  padding: 11px 13px;
  min-height: 44px;
}
.mn__ownin:focus { outline: 0; border-color: rgba(177, 92, 255, .5); }
.mn__ownin::placeholder { color: rgba(233, 236, 255, .3); }
.mn__ownadd {
  border-radius: 13px;
  border: 1px solid rgba(177, 92, 255, .45);
  background: rgba(177, 92, 255, .16);
  color: var(--mn-ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 0 18px;
  cursor: pointer;
  min-height: 44px;
  transition: background .2s ease;
}
.mn__ownadd:hover { background: rgba(177, 92, 255, .3); }
/* collapses when empty, like .mn__avail — no reserved blank bands */
.mn__wsel { margin: 0; max-height: 0; overflow: hidden; font-size: .7rem; color: rgba(233, 236, 255, .4); transition: max-height .3s ease, margin .3s ease; }
.mn__wsel:not(:empty) { margin-top: 11px; max-height: 3em; }

/* ── 4. the signal ── */
.mn__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border-radius: 17px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .04);
  padding: 14px 15px;
  cursor: pointer;
  font-family: inherit;
  color: var(--mn-ink);
  transition: border-color .22s ease, background .22s ease;
}
.mn__toggle.is-on {
  border-color: rgba(74, 255, 163, .4);
  background: rgba(74, 255, 163, .07);
}
.mn__pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4affa3;
  flex: none;
  animation: mn-beat 2.4s ease-out infinite;
}
@keyframes mn-beat {
  0% { box-shadow: 0 0 0 0 rgba(74, 255, 163, .55); }
  70% { box-shadow: 0 0 0 12px rgba(74, 255, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 255, 163, 0); }
}
.mn__toggle:not(.is-on) .mn__pulse { background: rgba(233, 236, 255, .3); animation: none; }
.mn__tt { flex: 1; min-width: 0; }
.mn__tt b { display: block; font-size: .9rem; font-weight: 600; }
.mn__tt i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--mn-dim);
}
.mn__sw {
  flex: none;
  width: 42px; height: 25px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .11);
  position: relative;
  transition: background .24s ease;
}
.mn__sw::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.mn__toggle.is-on .mn__sw { background: linear-gradient(90deg, #2fd98a, #4affa3); }
.mn__toggle.is-on .mn__sw::after { transform: translateX(17px); }

/* ── 5. $TRUST ── */
.mn__step--trust { border-color: rgba(255, 196, 92, .22); }
.mn__step--trust .mn__k > span {
  background: linear-gradient(140deg, #ffc45c, #ff9a3c);
}
.mn__tcard {
  border-radius: 17px;
  border: 1px solid rgba(255, 196, 92, .22);
  background: linear-gradient(160deg, rgba(255, 196, 92, .09), rgba(255, 255, 255, .03));
  padding: 15px;
}
.mn__tcard.is-on { border-color: rgba(74, 255, 163, .3); }
.mn__tlead { margin: 0 0 13px; font-size: .86rem; line-height: 1.56; color: rgba(233, 236, 255, .78); }
.mn__tlead b { color: #ffd489; font-weight: 650; }

.mn__tconnect {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 196, 92, .45);
  background: linear-gradient(135deg, rgba(255, 196, 92, .26), rgba(255, 154, 60, .14));
  color: #fff;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 13px 20px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease;
  min-height: 48px;
}
.mn__tconnect:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(255, 196, 92, .8); }
.mn__tconnect:disabled { opacity: .6; cursor: default; transform: none; }
.mn__tconnect.is-working { opacity: .7; }
/* a small CSS wallet glyph */
.mn__tcg {
  width: 15px; height: 12px;
  border-radius: 3px;
  border: 1.5px solid currentColor;
  position: relative;
  flex: none;
}
.mn__tcg::after {
  content: '';
  position: absolute;
  right: -1px; top: 3px;
  width: 5px; height: 4px;
  border-radius: 2px;
  background: currentColor;
}
.mn__tfine { margin: 12px 0 0; font-size: .7rem; line-height: 1.5; color: rgba(233, 236, 255, .4); }
.mn__tmsg { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--mn-dim); }
.mn__tmsg.is-good { color: #4affa3; }

.mn__twho { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 13px; }
.mn__tdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4affa3; flex: none;
}
.mn__taddr { font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mn__tnet { font-size: .68rem; color: var(--mn-dim); margin-left: auto; }

.mn__tstake { display: block; }
.mn__tsl {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(233, 236, 255, .6);
  margin-bottom: 8px;
}
.mn__tsl i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .6; }
.mn__tsrow {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 13px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .05);
  padding: 0 14px;
}
.mn__tsrow:focus-within { border-color: rgba(255, 196, 92, .5); }
.mn__tsin {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: #ffd489;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 650;
  padding: 12px 0;
}
.mn__tsin:focus { outline: 0; }
.mn__tsu { font-size: .74rem; letter-spacing: .1em; color: rgba(255, 212, 137, .6); font-weight: 650; }
.mn__tdis {
  margin-top: 13px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .7rem;
  color: rgba(233, 236, 255, .38);
  cursor: pointer;
  text-decoration: underline;
}

/* ── the preview ── */
.mn__previewwrap { margin: 30px 0 0; }
.mn__preview {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    linear-gradient(160deg, rgba(177, 92, 255, .13), rgba(61, 242, 255, .05)),
    rgba(10, 12, 22, .6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 20px 18px;
  overflow: hidden;
}
.mn__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .07) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: mn-sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mn-sheen {
  0%, 62% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.mn__pv-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: #4affa3;
  margin-bottom: 11px;
}
.mn__pv-say {
  margin: 0;
  font-size: clamp(1.14rem, 5vw, 1.5rem);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -.014em;
  color: #fff;
  text-wrap: balance;
}
.mn__pv-say.is-ghost { color: rgba(255, 255, 255, .3); }
.mn__pv-who { display: flex; align-items: center; gap: 9px; margin-top: 15px; }
.mn__pv-av {
  width: 27px; height: 27px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--mn-vio), var(--mn-cyan));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  color: #0a0c16;
  flex: none;
}
.mn__pv-n { font-size: .8rem; font-weight: 600; }
.mn__pv-n i { font-style: normal; font-weight: 400; color: var(--mn-dim); }
.mn__pv-worlds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.mn__pv-world {
  font-size: .68rem;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(233, 236, 255, .8);
  text-decoration: none;
}
/* VOTUS + MOTUS — always the WORD and the total. Never an icon. */
.mn__pv-sig { display: flex; gap: 16px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .07); }
.mn__pv-s { font-size: .74rem; color: rgba(233, 236, 255, .55); font-variant-numeric: tabular-nums; }
.mn__pv-s b {
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .66rem;
  color: rgba(233, 236, 255, .85);
  margin-right: 4px;
}

/* ── the claim ── */
.mn__mint {
  width: 100%;
  margin: 26px 0 0;
  border-radius: 19px;
  border: 1px solid rgba(177, 92, 255, .6);
  background: linear-gradient(135deg, var(--mn-vio), #6d3bff 62%, rgba(61, 242, 255, .7));
  color: #fff;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: .01em;
  padding: 18px;
  min-height: 60px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 60px -26px rgba(177, 92, 255, 1);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, opacity .2s ease;
}
.mn__mint:disabled {
  opacity: .34;
  cursor: default;
  box-shadow: none;
  filter: saturate(.4);
}
.mn__mint:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 28px 70px -26px rgba(177, 92, 255, 1); }
.mn__mint:not(:disabled):active { transform: translateY(0) scale(.99); }
.mn__mint.is-working { opacity: .8; }
.mn__mintl { position: relative; z-index: 1; }
.mn__mint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
  transform: translateX(-100%);
}
.mn__mint:not(:disabled)::before { animation: mn-sheen 3.4s ease-in-out infinite; }

.mn__note { margin: 0; max-height: 0; overflow: hidden; font-size: .8rem; text-align: center; color: var(--mn-dim); opacity: 0; transition: max-height .3s ease, margin .3s ease, opacity .2s ease; }
.mn__note.is-on { margin-top: 13px; max-height: 5em; opacity: 1; }
.mn__note.is-bad { color: #ff8a9e; }
.mn__fine { margin: 18px 0 0; font-size: .72rem; line-height: 1.6; text-align: center; color: rgba(233, 236, 255, .34); }

/* ════════════════════════════════════════════════════════════════
   CLAIMED
   ════════════════════════════════════════════════════════════════ */
.mn__done { text-align: center; padding: 26px 0; position: relative; }
.mn__burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mn__burst i {
  position: absolute;
  top: 22%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--mn-cyan);
  animation: mn-burst 1.5s cubic-bezier(.22, 1, .36, 1) both;
}
.mn__burst i:nth-child(1) { --a: -60deg; background: var(--mn-vio); }
.mn__burst i:nth-child(2) { --a: 20deg; animation-delay: .07s; }
.mn__burst i:nth-child(3) { --a: 140deg; background: #4affa3; animation-delay: .14s; }
.mn__burst i:nth-child(4) { --a: 230deg; animation-delay: .2s; }
@keyframes mn-burst {
  from { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  to { opacity: 0; transform: rotate(var(--a)) translateY(-170px) scale(.3); }
}
.mn__donek {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #4affa3;
}
.mn__donesay {
  margin: 15px auto 0;
  max-width: 22ch;
  font-size: clamp(1.55rem, 7.4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.026em;
  font-weight: 600;
  background: linear-gradient(180deg, #fff, #cbb6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.mn__doneid { margin: 15px 0 0; font-size: .78rem; color: var(--mn-dim); }
.mn__doneid b { color: var(--mn-cyan); font-variant-numeric: tabular-nums; }
.mn__donelive { display: inline-flex; align-items: center; gap: 5px; color: #4affa3; font-size: .68rem; font-weight: 700; letter-spacing: .14em; }
.mn__doneurl {
  display: inline-block;
  margin: 13px 0 0;
  font-size: .8rem;
  color: var(--mn-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(61, 242, 255, .28);
  overflow-wrap: anywhere;
}
.mn__doneworlds { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: 15px 0 0; }
.mn__doneacts { display: flex; flex-direction: column; gap: 10px; margin: 24px auto 0; max-width: 330px; }

.mn__chain {
  margin: 18px auto 0;
  max-width: 34ch;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--mn-dim);
  padding: 12px 15px;
  border-radius: 14px;
  border: 1px solid var(--mn-edge);
  background: rgba(255, 255, 255, .04);
}
.mn__chain.is-good { color: #4affa3; border-color: rgba(74, 255, 163, .3); background: rgba(74, 255, 163, .07); }
.mn__chain.is-warn { color: #ffc45c; border-color: rgba(255, 196, 92, .3); background: rgba(255, 196, 92, .07); }

/* ── THE SHOUT, on this page ── */
.mn__shoutwrap {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 0 16px;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .mn__wrap, .mn__shoutwrap { padding-left: 13px; padding-right: 13px; }
  .mn__bar { padding-left: 13px; padding-right: 13px; }
  .mn__step { padding: 15px 14px 17px; border-radius: 20px; margin-top: 20px; }
  /* 16px minimum on every text input — anything less and iOS Safari zooms */
  .mn__in { font-size: 16px; padding: 14px 14px 28px; }
  .mn__urlin, .mn__ownin, .mn__tsin { font-size: 16px; }
  .mn__urlpre { font-size: .7rem; }
  .mn__preview { padding: 17px 15px; }
  .mn__gacts, .mn__doneacts { max-width: none; }
  /* the words go nearly edge-to-edge on a phone — they ARE the page */
  .mn__invwrap { margin-top: 26px; max-width: none; min-height: 66vh; }
  .mn__inv.is-in { margin: 4.4vh 0; }
  .mn__inv.is-past { margin: 1vh 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mn__field { animation: none; }
  .mn__step, .mn__peek, .mn__world { animation: none; }
  .mn__preview::after, .mn__mint::before { animation: none; display: none; }
  .mn__pulse { animation: none; }
  .mn__burst i { animation-duration: .01ms; }
  .mn__wrap { transition: none; opacity: 1; transform: none; }
  /* JS reveals every invocation line at once under reduced motion; drop the
     blur/slide/condense so nothing animates on the way in. `1fr` (not a
     max-height cap) means a long line can never be clipped. */
  /* Reduced motion is a medical need, not impatience — so the invocation
     still takes its full time and still arrives one line at a time. It
     simply stops MOVING: no blur, no slide, no scale, no tracking shift.
     Opacity alone carries the arrival. */
  .mn__inv {
    transition: opacity 1.2s linear, grid-template-rows 1.2s linear;
    transform: none;
    filter: none;
    letter-spacing: var(--ls, 0);
  }
  .mn__inv.is-in { transform: none; filter: none; }
  .mn__inv.is-past { transform: none; filter: none; opacity: .3; }
  .mn__inv--beat.is-in { filter: none; }
  .mn__invaura { display: none; }
  .mn__invwrap::before { transition: none; }
  .mn__invsound.is-on .mn__invsw { animation: none; }
}


/* ══ THE CLAIM FEE — the exchange's payment language, on this page ══
   Appears only once words are written AND a rail is chosen. A QR code is a
   payment instruction; it does not belong on screen before either. */
.mn__fee{ margin:18px auto 0; max-width:30rem; padding:18px 16px 20px; border-radius:22px;
  background:linear-gradient(180deg, rgba(30,22,58,.62), rgba(12,10,26,.72));
  border:1px solid rgba(196,181,253,.22);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 24px 60px -30px rgba(0,0,0,.85);
  display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
  animation:mnFeeRise .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes mnFeeRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.mn__feetop{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
.mn__feebadge{ font-size:.62rem; letter-spacing:.16em; font-weight:700; color:#c4b5fd; }
.mn__feeusd{ font-family:var(--display,inherit); font-size:1.5rem; font-weight:800; color:#f2eeff; }
.mn__feehead{ margin:0; font-size:.84rem; line-height:1.6; color:#cfc6f2; max-width:30ch; }
.mn__feepick{ margin:4px 0 0; font-size:.64rem; letter-spacing:.14em; font-weight:700; color:#a78bfa; }
.mn__feecur{ display:flex; gap:10px; width:100%; }
.mn__feeopt{ flex:1; display:flex; flex-direction:column; gap:2px; padding:12px 10px; border-radius:16px;
  cursor:pointer; color:#cfc6f2; background:rgba(10,8,22,.55); border:1px solid rgba(196,181,253,.2);
  transition:border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .18s ease; }
.mn__feeopt b{ font-size:.94rem; color:#f2eeff; }
.mn__feeopt span{ font-size:.64rem; letter-spacing:.05em; opacity:.75; }
.mn__feeopt:hover{ border-color:rgba(167,139,250,.55); transform:translateY(-1px); }
.mn__feeopt.is-on{ border-color:rgba(125,211,252,.7); color:#e8f7ff;
  box-shadow:0 0 26px -10px rgba(125,211,252,.8), inset 0 1px 0 rgba(255,255,255,.12); }
.mn__feebody{ width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.mn__feeamt{ margin:0; font-family:var(--display,inherit); font-size:1.28rem; font-weight:700; color:#f2eeff; }
.mn__feeamt b{ color:#7dd3fc; }
.mn__feeqr{ width:186px; max-width:70%; padding:11px; border-radius:16px; background:#fff;
  box-shadow:0 0 34px -12px rgba(125,211,252,.6); animation:mnFeeRise .45s cubic-bezier(.16,1,.3,1) both; }
.mn__feeqr svg{ display:block; width:100%; height:auto; }
.mn__feeto{ margin:0; font-size:.66rem; letter-spacing:.12em; font-weight:700; color:#a78bfa; }
.mn__feeaddr{ display:block; width:100%; padding:10px 12px; border-radius:12px;
  font-family:ui-monospace,monospace; font-size:.7rem; line-height:1.55; color:#f2eeff;
  background:rgba(8,6,18,.7); border:1px solid rgba(196,181,253,.18); word-break:break-all; user-select:all; }
.mn__feecopy{ padding:8px 18px; border-radius:16px; cursor:pointer; font-size:.72rem; font-weight:600;
  color:#cfc6f2; background:rgba(10,8,22,.6); border:1px solid rgba(196,181,253,.24);
  transition:border-color .2s ease, color .2s ease; }
.mn__feecopy:hover{ border-color:rgba(125,211,252,.6); color:#e8f7ff; }
.mn__feewarn{ margin:0; font-size:.72rem; line-height:1.55; color:#fcd9a0; max-width:34ch; }
/* THE EXACT-AMOUNT NOTE. The last digits of the amount are this Mover's own
   fingerprint; saying so turns an odd number into a small piece of craft. Soft
   aura in the page's own violet, never a highlight block. */
.mn__feeexact{ margin:0; max-width:34ch; padding:9px 13px; border-radius:15px;
  font-size:.72rem; line-height:1.6; color:#efeaff;
  background:radial-gradient(130% 150% at 50% 0%, rgba(167,139,250,.16), rgba(167,139,250,0) 74%);
  border:1px solid rgba(196,181,253,.2); }
.mn__feeexact b{ color:#c4b5fd; }
.mn__feealt{ margin:0; font-size:.7rem; line-height:1.55; color:#cfc6f2; max-width:34ch; opacity:.9; }
.mn__feestate{ margin:0; font-size:.76rem; line-height:1.5; color:#cfc6f2; max-width:34ch; }
.mn__feestate--live{ color:#7dd3fc; }
.mn__feestate--live::before{ content:''; display:inline-block; width:7px; height:7px; margin-right:7px;
  border-radius:50%; background:#7dd3fc; animation:mnPulse 1.7s ease-in-out infinite; }
@keyframes mnPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; box-shadow:0 0 10px #7dd3fc; } }
.mn__gprice{ margin:12px auto 4px; max-width:34ch; text-align:center; font-size:.82rem;
  line-height:1.6; color:#cfc6f2; }
.mn__gprice b{ color:#f2eeff; }
@media (prefers-reduced-motion:reduce){
  .mn__fee,.mn__feeqr{ animation:none; }
  .mn__feestate--live::before{ animation:none; opacity:1; }
}

/* THE ANIMATION WARDEN (motus-warden.js) — offscreen sections sit down */
.anim-sleep, .anim-sleep *{ animation-play-state:paused !important; }

/* ══ PAY WITH $DASH — the visible door (step 6) ══
   One clean card. The Dash mark, glowing, cyan-accented. It never shows a QR
   itself — it OPENS the secure rail once the words + Worlds are complete.
   Locked = dimmed and waiting; ready = lit, aura breathing. */
.mn__dashcard{ position:relative; display:flex; align-items:center; gap:16px; width:100%;
  padding:18px 18px; border-radius:22px; cursor:pointer; text-align:left; overflow:hidden;
  background:linear-gradient(135deg, rgba(10,20,40,.72), rgba(8,10,26,.8));
  border:1px solid rgba(125,211,252,.22);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 22px 54px -28px rgba(0,0,0,.85);
  transition:border-color .28s ease, box-shadow .28s ease, transform .2s ease; }
.mn__dashglow{ position:absolute; inset:-30%; pointer-events:none; opacity:.35;
  background:radial-gradient(42% 60% at 22% 50%, rgba(0,141,228,.34), transparent 70%),
             radial-gradient(50% 70% at 80% 30%, rgba(125,211,252,.16), transparent 74%);
  transition:opacity .4s ease; }
.mn__dashlogo{ position:relative; width:64px; height:64px; border-radius:18px; flex:none;
  filter:drop-shadow(0 0 12px rgba(0,161,255,.45)); transition:filter .35s ease, transform .3s ease; }
.mn__dashtxt{ position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; }
.mn__dashtxt b{ font-family:var(--display,inherit); font-size:1.06rem; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(115deg, #f2faff, #7dd3fc 82%); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.mn__dashtxt i{ font-style:normal; font-size:.72rem; line-height:1.5; color:#bfe4ff; }
.mn__dasharr{ position:relative; margin-left:auto; font-size:1.15rem; color:#7dd3fc; flex:none;
  transition:transform .25s ease; }
.mn__dashcard:not(.is-ready){ opacity:.82; }
.mn__dashcard.is-ready{ border-color:rgba(125,211,252,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 44px -14px rgba(0,161,255,.55),
             0 22px 54px -28px rgba(0,0,0,.85); }
.mn__dashcard.is-ready .mn__dashglow{ opacity:.7; animation:mnDashBreathe 4.6s ease-in-out infinite; }
.mn__dashcard.is-ready .mn__dashlogo{ filter:drop-shadow(0 0 18px rgba(0,161,255,.7)); }
.mn__dashcard.is-ready:hover{ transform:translateY(-2px); }
.mn__dashcard.is-ready:hover .mn__dasharr{ transform:translateX(4px); }
.mn__dashcard:active{ transform:scale(.985); }
@keyframes mnDashBreathe{ 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }
.mn__dashcard.is-shake{ animation:mnDashShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes mnDashShake{ 10%,90%{ transform:translateX(-2px); } 30%,70%{ transform:translateX(3px); } 50%{ transform:translateX(-3px); } }
.mn__dashhint{ margin:9px 2px 0; font-size:.76rem; line-height:1.55; color:#9fdcff; min-height:1em; }
@media (prefers-reduced-motion:reduce){
  .mn__dashcard.is-ready .mn__dashglow{ animation:none; }
  .mn__dashcard.is-shake{ animation:none; }
}