/* ════════════════════════════════════════════════════════════════════════
   MANTRA · ARISE — the living stream of the community's fewest words.

   THE STATEMENT: "Sometimes A Few Words Are All That You Need."
   THE MOTIF: THE RIPPLE. One point → expanding rings. It IS the thesis —
   small moves, big difference — so it recurs at every scale: the hero, the
   LIVE pulse, a vote press, the loading breath, the empty state. One symbol,
   repeated, until the page is recognizable from a cropped screenshot.

   Mobile-first. Every value below is on the space scale. Nothing decorative
   survives that doesn't carry meaning.
   ════════════════════════════════════════════════════════════════════════ */

.ar {
  /* ── the ripple, as tokens ── */
  --ar-ring: 1px solid rgba(255,255,255,.10);
  --ar-motif: 22px;                      /* the one radius */
  --ar-ease: cubic-bezier(.2,0,0,1);     /* the one curve */
  --ar-spring: cubic-bezier(.32,1.4,.45,1);

  /* ── space scale (1.5×) — if a value isn't here, it's a bug ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:36px; --s7:56px; --s8:84px; --s9:128px; --s10:192px;

  /* ── the palette: vibrant, OKLCH, dark-mode-tuned ── */
  --ar-void:   oklch(.14 .028 275);
  --ar-violet: oklch(.70 .21 300);
  --ar-cyan:   oklch(.82 .15 205);
  --ar-gold:   oklch(.84 .15 85);
  --ar-mint:   oklch(.84 .16 165);
  --ar-ink:    #eef0f7;
  --ar-soft:   #aeb4c8;
  --ar-mute:   #767d96;
  --ar-faint:  #4b5169;

  position: relative;
  min-height: 100vh;
  background: var(--ar-void);
  color: var(--ar-ink);
  overflow-x: hidden;
  padding-bottom: var(--s9);
}

/* ── THE FIELD: a slow gradient mesh. It drifts; it never demands. ── */
.ar__field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 18% 8%,  oklch(.55 .20 300 / .30), transparent 62%),
    radial-gradient(52% 62% at 84% 22%, oklch(.62 .17 205 / .22), transparent 64%),
    radial-gradient(70% 60% at 50% 104%,oklch(.52 .19 330 / .20), transparent 66%);
  animation: ar-drift 48s var(--ar-ease) infinite alternate;
}
@keyframes ar-drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,-2.5%,0) scale(1.06); }
}
/* grain: kills 8-bit banding, adds tactility. 3%, never more. */
.ar__grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  mix-blend-mode: overlay;
  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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ar__wrap { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 var(--s4); }

/* ════════ THE HERO — breathing room IS the content ════════ */
.ar__hero { padding: var(--s7) 0 var(--s7); text-align: center; position: relative; }

/* THE MOTUSMIND MARK — the whole MOTUS model, animated, at the crown of the
   feed. It replaced a decorative ripple: the same visual weight, but this one
   MEANS something. Sized in vw so it never crowds the headline on a phone. */
.ar__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto var(--s4);
  width: 100%;
}
.ar__mark .mm { max-width: 100%; }

.ar__say {
  font-size: clamp(1.9rem, 8.2vw, 3.3rem);
  line-height: 1.12; letter-spacing: -.022em; font-weight: 600;
  margin: 0 auto; max-width: 15ch;
  background: linear-gradient(155deg, #fff 12%, oklch(.86 .12 300) 54%, oklch(.84 .13 205) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.ar__then {
  margin: var(--s5) auto 0; max-width: 26ch;
  font-size: clamp(.98rem, 3.6vw, 1.16rem); line-height: 1.5;
  color: var(--ar-soft); font-weight: 450; text-wrap: balance;
}
.ar__small {
  margin: var(--s3) auto 0;
  font-size: clamp(.8rem, 3vw, .9rem); letter-spacing: .16em;
  text-transform: uppercase; color: oklch(.84 .15 85 / .92); font-weight: 600;
}
.ar__count {
  margin-top: var(--s6); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ar-faint);
}
.ar__count b { color: var(--ar-soft); font-weight: 600; }

/* ════════ CONTROLS ════════ */
.ar__tabs {
  display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
  padding: var(--s2) 0 var(--s4); -webkit-overflow-scrolling: touch;
  position: sticky; top: 0; z-index: 6;
  background: linear-gradient(var(--ar-void) 62%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
}
.ar__tabs::-webkit-scrollbar { display: none; }
.ar__tab {
  flex: 0 0 auto; padding: 10px var(--s4); border-radius: 999px;
  border: var(--ar-ring); background: rgba(255,255,255,.028);
  color: var(--ar-soft); font-size: .84rem; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: color .18s var(--ar-ease), border-color .18s var(--ar-ease),
              background .18s var(--ar-ease), transform .18s var(--ar-spring);
}
.ar__tab:hover { color: var(--ar-ink); border-color: rgba(255,255,255,.2); }
.ar__tab:active { transform: scale(.96); }
.ar__tab[aria-selected="true"] {
  color: #0b0713; border-color: transparent;
  background: linear-gradient(140deg, oklch(.86 .13 300), oklch(.86 .12 205));
  box-shadow: 0 0 24px oklch(.70 .21 300 / .34);
}
.ar__worlds { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s5); }
.ar__worlds::-webkit-scrollbar { display: none; }
.ar__world {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08); background: transparent;
  color: var(--ar-mute); font-size: .76rem; font-weight: 550; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.ar__world:hover { color: var(--ar-ink); }
.ar__world[aria-pressed="true"] {
  color: oklch(.88 .14 165); border-color: oklch(.84 .16 165 / .44);
  background: oklch(.84 .16 165 / .10);
}
.ar__world small { color: var(--ar-faint); margin-left: 5px; }

/* ════════ THE CARD — glass, with an asymmetric specular edge ════════ */
.ar__feed { display: flex; flex-direction: column; gap: var(--s4); }
.ar__card {
  position: relative; padding: var(--s5); border-radius: var(--ar-motif);
  background: color-mix(in oklch, oklch(.30 .05 285) 12%, transparent);
  backdrop-filter: blur(22px) saturate(175%) brightness(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.16) inset,
    0 -1px 0 0 rgba(0,0,0,.16) inset,
    0 8px 24px -10px rgba(0,0,0,.5),
    0 30px 60px -30px rgba(0,0,0,.4);
  transition: transform .34s var(--ar-spring), border-color .34s var(--ar-ease);
  overflow: hidden;
}
.ar__card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
/* the specular edge — light catches the top-left only. the 2026 tell. */
.ar__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.05) 40%, transparent 62%, rgba(255,255,255,.13));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ar__card--live { border-color: oklch(.84 .16 165 / .30); }

.ar__crown { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.ar__face {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  background: linear-gradient(140deg, oklch(.70 .21 300), oklch(.82 .15 205));
  border: 1px solid rgba(255,255,255,.16);
}
.ar__who { min-width: 0; flex: 1; }
.ar__name { font-size: .88rem; font-weight: 600; color: var(--ar-ink); display: block; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar__name:hover { color: oklch(.86 .13 300); }
.ar__meta { font-size: .7rem; color: var(--ar-faint); letter-spacing: .04em; }

/* the LIVE pulse — the ripple again, at 8px */
.ar__live {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: oklch(.88 .16 165); padding: 4px 9px; border-radius: 999px;
  border: 1px solid oklch(.84 .16 165 / .32); background: oklch(.84 .16 165 / .09);
}
.ar__dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: oklch(.86 .17 165); }
.ar__dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid oklch(.86 .17 165 / .6);
  animation: ar-pulse 2.4s var(--ar-ease) infinite;
}
@keyframes ar-pulse {
  0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; }
}

/* THE WORDS — the reason the page exists. Everything else is smaller. */
.ar__words {
  font-size: clamp(1.2rem, 5.2vw, 1.6rem); line-height: 1.36; font-weight: 500;
  letter-spacing: -.012em; color: #fff; margin: 0; text-wrap: pretty;
}
.ar__quote { color: oklch(.70 .21 300 / .55); font-weight: 600; }

.ar__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s4); }
.ar__tag {
  font-size: .68rem; padding: 3px 9px; border-radius: 999px; font-weight: 600;
  color: oklch(.86 .12 205); border: 1px solid oklch(.82 .15 205 / .26);
  background: oklch(.82 .15 205 / .07); cursor: pointer;
}
.ar__tag:hover { background: oklch(.82 .15 205 / .16); }

.ar__foot {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.06);
}
.ar__sig {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 999px; border: var(--ar-ring); background: rgba(255,255,255,.03);
  color: var(--ar-soft); font-size: .78rem; font-weight: 650; cursor: pointer;
  position: relative; overflow: hidden;
  transition: color .2s var(--ar-ease), border-color .2s var(--ar-ease), transform .2s var(--ar-spring);
}
.ar__sig:active { transform: scale(.94); }
.ar__sig--v[aria-pressed="true"] { color: oklch(.88 .14 300); border-color: oklch(.70 .21 300 / .5); background: oklch(.70 .21 300 / .13); }
.ar__sig--m[aria-pressed="true"] { color: oklch(.88 .15 85);  border-color: oklch(.84 .15 85 / .5);  background: oklch(.84 .15 85 / .13); }
.ar__sig--locked { opacity: .5; }
/* the ripple, at press scale — motion explains causality */
.ar__sig i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; transform: translate(-50%,-50%) scale(0); opacity: .5; pointer-events: none;
}
.ar__sig.is-hit i { animation: ar-hit .52s var(--ar-ease); }
@keyframes ar-hit {
  0% { transform: translate(-50%,-50%) scale(0); opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}
.ar__spacer { flex: 1; }
.ar__id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .66rem;
  color: var(--ar-faint); letter-spacing: .06em; text-decoration: none;
}
.ar__id:hover { color: oklch(.86 .12 205); }
.ar__trust { color: oklch(.86 .15 85); text-decoration: none; font-size: .7rem; font-weight: 650; }
.ar__mini { font-size: .66rem; color: var(--ar-faint); }

/* ════════ THE MINT — claim your words ════════ */
.ar__mint {
  margin: var(--s6) 0; padding: var(--s5); border-radius: var(--ar-motif);
  border: 1px dashed oklch(.70 .21 300 / .34);
  background: linear-gradient(150deg, oklch(.70 .21 300 / .07), oklch(.82 .15 205 / .04));
}
.ar__mintq { font-size: .82rem; color: var(--ar-soft); margin: 0 0 var(--s3); }
.ar__row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ar__in {
  flex: 1 1 220px; min-width: 0; padding: 13px var(--s4); border-radius: 14px;
  border: var(--ar-ring); background: rgba(0,0,0,.28); color: var(--ar-ink);
  font-size: 1rem; font-family: inherit; outline: none;
  transition: border-color .2s var(--ar-ease), box-shadow .2s var(--ar-ease);
}
.ar__in::placeholder { color: var(--ar-faint); }
.ar__in:focus { border-color: oklch(.70 .21 300 / .5); box-shadow: 0 0 0 3px oklch(.70 .21 300 / .13); }
.ar__go {
  padding: 13px var(--s5); border-radius: 14px; border: 0; cursor: pointer;
  font-size: .9rem; font-weight: 700; color: #0b0713; font-family: inherit;
  background: linear-gradient(140deg, oklch(.86 .13 300), oklch(.86 .12 205));
  box-shadow: 0 0 26px oklch(.70 .21 300 / .32);
  transition: transform .2s var(--ar-spring), box-shadow .2s var(--ar-ease);
}
.ar__go:active { transform: scale(.96); }
.ar__go:disabled { opacity: .5; cursor: default; }
.ar__note { margin-top: var(--s3); font-size: .74rem; min-height: 1.1em; }
.ar__note--ok  { color: oklch(.86 .15 165); }
.ar__note--no  { color: oklch(.80 .16 25); }

/* ════════ STATES — a page that is honest when it is empty ════════ */
.ar__state { text-align: center; padding: var(--s8) var(--s4); color: var(--ar-mute); }
.ar__breath {
  width: 40px; height: 40px; margin: 0 auto var(--s4); border-radius: 50%;
  border: 1px solid oklch(.70 .21 300 / .5); animation: ar-breath 1.9s var(--ar-ease) infinite;
}
@keyframes ar-breath {
  0%,100% { transform: scale(.62); opacity: .3; } 50% { transform: scale(1); opacity: .95; }
}

/* ════════ MOTION, HONESTLY ════════ */
.ar__card { animation: ar-rise .58s var(--ar-ease) both; }
@keyframes ar-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ar__field, .ar__dot::after, .ar__breath, .ar__card { animation: none !important; }
  .ar__card { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .ar__card, .ar__tabs { backdrop-filter: none; background: oklch(.18 .03 280); }
}
@media (min-width: 680px) {
  .ar__hero { padding: var(--s9) 0 var(--s8); }
  .ar__card { padding: var(--s6); }
}
.ar :focus-visible { outline: 2px solid oklch(.86 .12 205); outline-offset: 3px; border-radius: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   THREE WAYS TO MEET THE WORDS

   STREAM — the scroll. Many mantras, scannable, social.
   ARISE  — one mantra alone in vast space. Snap-scroll. Nothing else exists.
            This is the mode the page is named for: a few words, all the room.
   ORBIT  — the drift. Mantras move past you in depth, swipeable, cinematic.

   The ripple carries through all three. Mobile-first: ARISE and ORBIT are
   designed thumb-first and only then allowed to grow on desktop.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   THE CHROME — one bar, three zones: back · modes · claim.

   ⚠ THE BUG THIS FIXES (found at 360/390/414px, not by eye): the back button
   was `position:fixed` while the mode switch sat in normal flow. Below ~420px
   the fixed button landed exactly on top of the "Stream" tab and made it
   unreadable. Two independent layers can always collide; three flex siblings
   in one row never can. The fix is structural, not a z-index bump.
   ════════════════════════════════════════════════════════════════════════ */
.ar__chrome{
  position:sticky;top:0;z-index:20;
  padding:calc(env(safe-area-inset-top,0px) + var(--s2)) var(--s3) var(--s2);
  background:linear-gradient(180deg, oklch(.14 .028 275 / .92) 55%, oklch(.14 .028 275 / 0));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.ar__chromein{
  display:flex;align-items:center;gap:var(--s2);
  max-width:720px;margin:0 auto;
}
.ar__back,.ar__forge{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 var(--s3);flex:0 0 auto;
  border-radius:999px;border:var(--ar-ring);background:rgba(255,255,255,.04);
  color:var(--ar-soft);font-size:.76rem;font-weight:650;text-decoration:none;
  transition:color .25s var(--ar-ease),border-color .25s var(--ar-ease),
             background .25s var(--ar-ease),transform .25s var(--ar-spring);
}
.ar__back svg,.ar__forge svg{width:15px;height:15px;flex:0 0 auto}
.ar__back:hover,.ar__forge:hover{color:var(--ar-ink);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.ar__forge{
  border-color:oklch(.70 .21 300 /.45);
  background:linear-gradient(135deg,oklch(.62 .20 300 /.24),oklch(.62 .20 205 /.12));
  color:var(--ar-ink);
}
.ar__forge:hover{box-shadow:0 0 26px -10px oklch(.70 .21 300 /.9)}

/* the mode switch takes the middle and shrinks first */
.ar__modes{
  display:flex;gap:2px;padding:3px;flex:1 1 auto;min-width:0;justify-content:center;
  border-radius:999px;border:var(--ar-ring);background:rgba(255,255,255,.03);
}
.ar__mode{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 var(--s3);min-height:38px;flex:1 1 0;min-width:0;border:0;border-radius:999px;
  background:transparent;color:var(--ar-mute);font:inherit;font-size:.75rem;font-weight:650;
  letter-spacing:.02em;cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:color .2s var(--ar-ease),background .28s var(--ar-ease),transform .2s var(--ar-spring);
}
.ar__mode span{overflow:hidden;text-overflow:ellipsis}
.ar__mode:active{transform:scale(.95)}
.ar__mode svg{width:14px;height:14px;flex:0 0 auto}
.ar__mode[aria-pressed="true"]{
  color:#0b0713;background:linear-gradient(140deg,oklch(.86 .13 300),oklch(.86 .12 205));
  box-shadow:0 0 22px oklch(.70 .21 300 /.3);
}

/* ════════════════ ARISE — one mantra, all the room ════════════════ */
.ar--arise{padding-bottom:0}
.ar--arise .ar__hero,.ar--arise .ar__mint,.ar--arise .ar__worlds,.ar--arise .ar__tabs{display:none}
.ar--arise .ar__wrap{max-width:none;padding:0}

.arise{
  height:100dvh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.arise::-webkit-scrollbar{display:none}

.arise__one{
  height:100dvh;scroll-snap-align:center;scroll-snap-stop:always;
  display:grid;place-items:center;padding:var(--s7) var(--s5);position:relative;
}
/* each mantra brings its own light — hue rotates by index so the scroll breathes colour */
.arise__glow{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(58% 46% at 50% 46%,
    oklch(.62 .22 var(--h,300) / .34), transparent 68%);
  transition:opacity .8s var(--ar-ease);
}
.arise__in{position:relative;text-align:center;max-width:19ch;z-index:1}

/* the words, at the size they deserve when nothing competes */
.arise__words{
  font-size:clamp(2rem,10.5vw,4.2rem);line-height:1.1;font-weight:600;letter-spacing:-.028em;
  color:#fff;margin:0;text-wrap:balance;
  text-shadow:0 0 46px oklch(.62 .22 var(--h,300) / .5);
  opacity:0;transform:translateY(22px) scale(.97);
}
.arise__one.is-here .arise__words{
  animation:arise-in 1s var(--ar-ease) forwards;
}
@keyframes arise-in{to{opacity:1;transform:none}}

/* the ripple, at full-page scale — it opens as the mantra arrives */
.arise__ring{position:absolute;left:50%;top:50%;width:1px;height:1px;pointer-events:none}
.arise__ring i{
  position:absolute;left:50%;top:50%;width:220px;height:220px;border-radius:50%;
  border:1px solid oklch(.72 .2 var(--h,300) / .3);
  transform:translate(-50%,-50%) scale(0);opacity:0;
}
.arise__one.is-here .arise__ring i{animation:arise-ring 4.6s var(--ar-ease) infinite}
.arise__one.is-here .arise__ring i:nth-child(2){animation-delay:1.53s}
.arise__one.is-here .arise__ring i:nth-child(3){animation-delay:3.06s}
@keyframes arise-ring{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  16%{opacity:.7}
  100%{transform:translate(-50%,-50%) scale(3.4);opacity:0}
}

.arise__by{
  margin-top:var(--s6);display:flex;align-items:center;justify-content:center;gap:var(--s2);
  opacity:0;animation:arise-in .9s var(--ar-ease) .34s forwards;
}
.arise__one:not(.is-here) .arise__by{animation:none;opacity:0}
.arise__by img,.arise__by div.ar__face{width:26px;height:26px}
.arise__byname{font-size:.86rem;font-weight:600;color:var(--ar-soft);text-decoration:none}
.arise__byname:hover{color:#fff}
.arise__when{font-size:.7rem;color:var(--ar-faint);letter-spacing:.05em}

.arise__acts{
  margin-top:var(--s5);display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;
  opacity:0;animation:arise-in .9s var(--ar-ease) .5s forwards;
}
.arise__one:not(.is-here) .arise__acts{animation:none;opacity:0}

/* the scroll hint — shown once, then it trusts you */
.arise__hint{
  position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:5;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ar-faint);
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
  transition:opacity .5s var(--ar-ease);
}
.arise__hint b{display:block;width:1px;height:22px;background:linear-gradient(var(--ar-faint),transparent);
  animation:arise-fall 2.1s var(--ar-ease) infinite}
@keyframes arise-fall{0%{transform:translateY(-8px);opacity:0}40%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.arise__hint.gone{opacity:0}

/* progress: how deep into the community's words you are */
.arise__rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:5;
  width:2px;height:min(42vh,300px);border-radius:2px;background:rgba(255,255,255,.08)}
.arise__nub{position:absolute;left:0;width:2px;border-radius:2px;
  background:linear-gradient(oklch(.86 .13 300),oklch(.86 .12 205));
  transition:top .3s var(--ar-ease),height .3s var(--ar-ease)}

/* ════════════════ ORBIT — the drift ════════════════ */
/* ⚠ .ar__worlds MUST be in this list. It wasn't, so in Orbit the "All Worlds"
   filter floated alone in dead space, attached to nothing (visible in the
   user's screenshot). Immersive modes hide ALL stream chrome. */
.ar--orbit .ar__hero,.ar--orbit .ar__mint,.ar--orbit .ar__tabs,.ar--orbit .ar__worlds{display:none}
.ar--orbit .ar__wrap{max-width:none;padding:0}

.orbit{
  position:relative;height:100dvh;overflow:hidden;
  display:grid;place-items:center;perspective:1400px;perspective-origin:50% 46%;
  touch-action:pan-y;
}
.orbit__stage{position:relative;width:min(88vw,460px);height:min(58vh,420px);transform-style:preserve-3d}

.orbit__card{
  position:absolute;inset:0;border-radius:var(--ar-motif);padding:var(--s6) var(--s5);
  display:grid;align-content:center;justify-items:center;text-align:center;gap:var(--s4);
  background:color-mix(in oklch, oklch(.30 .05 285) 14%, transparent);
  backdrop-filter:blur(22px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 0 rgba(255,255,255,.18) inset,
             0 30px 70px -28px rgba(0,0,0,.66),
             0 0 60px -20px oklch(.62 .22 var(--h,300) / .5);
  transform-style:preserve-3d;will-change:transform,opacity;
  transition:transform .62s var(--ar-ease),opacity .62s var(--ar-ease),filter .62s var(--ar-ease);
  cursor:grab;
}
.orbit__card:active{cursor:grabbing}
.orbit__card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(255,255,255,.05) 42%,transparent 64%,rgba(255,255,255,.14));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* depth positions — the card you're on, and the ones waiting in the dark */
.orbit__card[data-pos="0"]{transform:translate3d(0,0,0) scale(1);opacity:1;z-index:5;filter:none}
.orbit__card[data-pos="1"]{transform:translate3d(46%,0,-260px) rotateY(-22deg) scale(.9);opacity:.42;z-index:4;filter:blur(1.5px)}
.orbit__card[data-pos="-1"]{transform:translate3d(-46%,0,-260px) rotateY(22deg) scale(.9);opacity:.42;z-index:4;filter:blur(1.5px)}
.orbit__card[data-pos="2"]{transform:translate3d(76%,0,-520px) rotateY(-30deg) scale(.8);opacity:.14;z-index:3;filter:blur(3px)}
.orbit__card[data-pos="-2"]{transform:translate3d(-76%,0,-520px) rotateY(30deg) scale(.8);opacity:.14;z-index:3;filter:blur(3px)}
.orbit__card[data-pos="far"]{transform:translate3d(0,0,-820px) scale(.7);opacity:0;pointer-events:none;z-index:1}

.orbit__words{
  font-size:clamp(1.3rem,6vw,2rem);line-height:1.26;font-weight:550;letter-spacing:-.016em;
  color:#fff;margin:0;text-wrap:balance;max-width:16ch;
}
.orbit__by{display:flex;align-items:center;gap:9px;color:var(--ar-soft);font-size:.8rem}
.orbit__acts{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
.orbit__glow{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(52% 42% at 50% 48%, oklch(.62 .22 var(--h,300) / .3), transparent 70%);
  transition:background .7s var(--ar-ease);
}
.orbit__nav{
  position:absolute;bottom:calc(var(--s7) + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  z-index:9;display:flex;align-items:center;gap:var(--s4);
}
.orbit__arrow{
  width:44px;height:44px;border-radius:50%;border:var(--ar-ring);background:rgba(255,255,255,.04);
  color:var(--ar-soft);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(12px);transition:color .2s,border-color .2s,transform .2s var(--ar-spring);
}
.orbit__arrow:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.orbit__arrow:active{transform:scale(.9)}
.orbit__of{font-size:.72rem;letter-spacing:.12em;color:var(--ar-faint);min-width:74px;text-align:center}
.orbit__of b{color:var(--ar-soft)}

@media (prefers-reduced-motion: reduce){
  .arise__words,.arise__by,.arise__acts{animation:none!important;opacity:1!important;transform:none!important}
  .arise__ring i,.arise__hint b{animation:none!important}
  .orbit__card{transition-duration:.01ms!important}
}
@media (min-width:680px){
  .orbit__stage{width:min(70vw,560px);height:min(54vh,430px)}
}

/* ════════════════ THE SEAL — wallet · signature · $TRUST ════════════════ */
.seal{
  margin:var(--s5) 0 0;padding:var(--s5);border-radius:var(--ar-motif);
  background:color-mix(in oklch, oklch(.32 .06 285) 12%, transparent);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid oklch(.84 .15 85 /.24);
  box-shadow:0 1px 0 0 rgba(255,255,255,.14) inset,0 22px 50px -26px rgba(0,0,0,.6);
  animation:ar-rise .5s var(--ar-ease) both;
}
.seal__head{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s5)}
.seal__mark{
  font-size:1.5rem;color:oklch(.86 .15 85);flex:0 0 auto;line-height:1;
  filter:drop-shadow(0 0 10px oklch(.84 .15 85 /.6));animation:seal-turn 9s linear infinite;
}
@keyframes seal-turn{to{transform:rotate(360deg)}}
.seal__head b{display:block;font-size:.94rem;color:var(--ar-ink);margin-bottom:3px;font-weight:600}
.seal__head span span,.seal__head>div>span{display:block;font-size:.76rem;color:var(--ar-mute);line-height:1.45}
.seal__steps{display:flex;flex-direction:column;gap:var(--s3)}
.seal__step{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.seal__step--bind{gap:var(--s2)}
.seal__n{
  width:23px;height:23px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:.7rem;font-weight:700;color:var(--ar-mute);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
}
.seal__step.is-done .seal__n{
  color:#0b0713;border-color:transparent;background:oklch(.86 .16 165);
}
.seal__ok{font-size:.8rem;font-weight:600;color:oklch(.88 .15 165);
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.seal__go{
  padding:9px var(--s4);border-radius:12px;border:0;cursor:pointer;font:inherit;
  font-size:.8rem;font-weight:700;color:#0b0713;text-decoration:none;display:inline-block;
  background:linear-gradient(140deg,oklch(.88 .15 85),oklch(.86 .13 55));
  box-shadow:0 0 20px oklch(.84 .15 85 /.3);
  transition:transform .2s var(--ar-spring),box-shadow .2s var(--ar-ease),opacity .2s;
}
.seal__go:active{transform:scale(.95)}
.seal__go:disabled{opacity:.42;cursor:default;box-shadow:none}
.seal__go--ghost{
  background:transparent;color:oklch(.88 .14 85);
  border:1px solid oklch(.84 .15 85 /.36);box-shadow:none;
}
.seal__in{flex:1 1 190px;padding:9px var(--s3);font-size:.82rem;
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.seal__note{margin:var(--s4) 0 0;font-size:.76rem;min-height:1.1em;line-height:1.45}
.seal__note.is-ok{color:oklch(.86 .15 165)}
.seal__note.is-no{color:oklch(.80 .16 25)}

/* the confirmation ripple — full-bleed, one second, then gone */
.seal__burst{
  position:fixed;inset:0;z-index:99990;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,oklch(.86 .16 85 /.34),transparent 46%);
  animation:seal-burst 1.15s var(--ar-ease) forwards;
}
@keyframes seal-burst{
  0%{opacity:0;transform:scale(.7)}
  22%{opacity:1}
  100%{opacity:0;transform:scale(1.9)}
}

/* $TRUST chip — dim until the real number lands, then it lights */
.ar__trust{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  border:1px solid oklch(.84 .15 85 /.24);background:oklch(.84 .15 85 /.07);
  color:oklch(.86 .14 85 /.7);font-size:.68rem;font-weight:700;text-decoration:none;
  transition:color .5s var(--ar-ease),border-color .5s var(--ar-ease),box-shadow .5s var(--ar-ease);
}
.ar__trust.is-lit{
  color:oklch(.90 .16 85);border-color:oklch(.84 .15 85 /.5);
  box-shadow:0 0 16px oklch(.84 .15 85 /.26);
}
.ar__sig--s{padding:7px 11px}
.ar__sig--s[aria-pressed],.ar__sig--s:hover{color:oklch(.86 .12 205);border-color:oklch(.82 .15 205 /.42)}

@media (prefers-reduced-motion: reduce){
  .seal__mark,.seal__burst,.seal{animation:none!important}
}

/* ── the network chooser: $TRUST is native to Intuition, so that is the
   default. Base is a real option, never a silent substitution. ── */
.seal__chain {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: 0 0 var(--s4);
}
.seal__chainl {
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ar-faint); margin-right: var(--s1);
}
.seal__chainb {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; min-height: 34px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
  color: var(--ar-soft); font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
  transition: color .25s var(--ar-ease), border-color .25s var(--ar-ease),
              background .25s var(--ar-ease), transform .25s var(--ar-spring);
}
.seal__chainb i {
  font-style: normal; font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ar-faint); padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,.06);
}
.seal__chainb:hover { color: var(--ar-ink); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.seal__chainb.is-on {
  color: var(--ar-ink);
  border-color: oklch(.84 .15 85 / .55);
  background: oklch(.84 .15 85 / .10);
}
.seal__chainb.is-on i { color: oklch(.84 .15 85); background: oklch(.84 .15 85 / .14); }


/* ════════════════════════════════════════════════════════════════════════
   THUMB TARGETS — every interactive control clears 44px.
   Found by a real 390px Chromium audit (_context/mobile-audit.py), not by eye:
   the sort tabs sat at 37px and the mode switches at 34px, which is a miss
   on a phone even though they looked fine on a laptop.
   ════════════════════════════════════════════════════════════════════════ */
.ar__tab { min-height: 44px; }
.ar__mode { min-height: 44px; }

/* Card-level controls also need a real thumb target (390px audit). */
.ar__vote, .ar__world, .ar__share, .ar__sig { min-height: 44px; }
/* Inline text links inside a card (author, the words, the #id) are NOT
   undersized buttons — the whole card is the tap target and they sit inside
   it. Left at their natural type size on purpose. */
.ar__id { display: inline-flex; align-items: center; min-height: 24px; }


/* ════════════════════════════════════════════════════════════════════════
   TIGHT PHONES — the mode labels give way before anything can crowd.
   Verified at 320/360/390/414px with a real headless Chromium.
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠ "Str…" — an ellipsised label is worse than no label. Below 430px the
   back/claim words go first (their icons are unambiguous); the three MODE
   labels are the meaning of the bar, so they keep their full words and are
   never allowed to clip. Verified at 320/360/390/414px. */
.ar__mode span{overflow:visible;text-overflow:clip}
@media (max-width: 460px){
  .ar__back span,.ar__forge span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ar__back,.ar__forge{padding:0;width:44px}
  .ar__mode{font-size:.72rem;padding:0 var(--s2);gap:5px}
  .ar__mode svg{width:13px;height:13px}
}
@media (max-width: 349px){
  /* only at the very edge do the glyphs stand alone */
  .ar__mode span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ar__mode{gap:0}
}

/* In immersive modes the chrome floats over the stage instead of pushing it. */
.ar--arise .ar__chrome,.ar--orbit .ar__chrome{
  position:fixed;top:0;left:0;right:0;
  background:linear-gradient(180deg, oklch(.14 .028 275 / .72) 40%, oklch(.14 .028 275 / 0));
}
.ar--arise .ar__wrap,.ar--orbit .ar__wrap{padding-top:0}


/* ════════════════════════════════════════════════════════════════════════
   THE SIGNALS — the number, then the NAME. Never a bare glyph.

   The share card (which reads at an A grade) prints "0 VOTUS" / "0 MOTUS"
   with the number large and the unit as a small caps label underneath. The
   web UI now speaks the SAME language, so a mantra looks like itself whether
   it is on screen or screenshotted into a story.
   ════════════════════════════════════════════════════════════════════════ */
.ar__sigs{display:flex;align-items:stretch;gap:var(--s2);flex-wrap:wrap}
.ar__sig{
  position:relative;overflow:hidden;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-height:52px;padding:var(--s2) var(--s4);
  border-radius:16px;border:var(--ar-ring);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  color:var(--ar-ink);font:inherit;cursor:pointer;text-decoration:none;
  transition:transform .28s var(--ar-spring),border-color .28s var(--ar-ease),
             background .28s var(--ar-ease),box-shadow .35s var(--ar-ease);
}
.ar__sig b{font-size:1.02rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.ar__sig span{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ar-mute);line-height:1;
}
.ar__sig svg{width:16px;height:16px}
.ar__sig:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09)}
.ar__sig:active{transform:scale(.96)}

/* each signal owns a hue so the eye learns them without reading */
.ar__sig--v{border-color:oklch(.70 .21 300 /.30)}
.ar__sig--v b{color:oklch(.86 .13 300)}
.ar__sig--v:hover{border-color:oklch(.70 .21 300 /.65);box-shadow:0 0 26px -10px oklch(.70 .21 300 /.85)}
.ar__sig--m{border-color:oklch(.82 .15 205 /.30)}
.ar__sig--m b{color:oklch(.88 .12 205)}
.ar__sig--m:hover{border-color:oklch(.82 .15 205 /.65);box-shadow:0 0 26px -10px oklch(.82 .15 205 /.85)}
.ar__sig--t{border-color:oklch(.84 .15 85 /.32)}
.ar__sig--t b{color:oklch(.90 .13 85)}
.ar__sig--t.is-lit{border-color:oklch(.84 .15 85 /.6);box-shadow:0 0 28px -10px oklch(.84 .15 85 /.8)}
.ar__sig--s span{color:var(--ar-faint)}
.ar__sig.is-fired{border-color:oklch(.86 .17 165 /.7);background:oklch(.72 .18 165 /.14)}
.ar__sig.is-fired b{color:oklch(.88 .16 165)}

/* the footer splits: actions left, quiet provenance right */
.ar__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-top:var(--s4);
}
.ar__footmeta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-left:auto}
.ar__mini{font-size:.68rem;color:var(--ar-faint);font-variant-numeric:tabular-nums}

/* ── WORLDS ON THE CARD — visible, and each one filters the stream ── */
.ar__cardworlds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:var(--s3) 0 0}
.ar__cw{
  padding:5px 11px;min-height:30px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  color:var(--ar-soft);font:inherit;font-size:.66rem;font-weight:650;cursor:pointer;
  transition:color .2s var(--ar-ease),border-color .2s var(--ar-ease),transform .2s var(--ar-spring);
}
.ar__cw:hover{color:var(--ar-ink);border-color:oklch(.70 .21 300 /.5);transform:translateY(-1px)}

/* the ID becomes a real, legible way in — not a dangling fragment */
.ar__idline{
  display:inline-flex;align-items:center;min-height:30px;margin-top:var(--s3);
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ar-faint);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .25s var(--ar-ease);
}
.ar__idline:hover{color:var(--ar-soft)}

.ar__vf{font-style:normal;color:oklch(.86 .13 300);font-size:.8em;margin-left:4px}
.arise__byname,.orbit__byname{
  color:var(--ar-ink);font-weight:650;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ar-ease)
}
.arise__byname:hover,.orbit__byname:hover{border-bottom-color:oklch(.86 .13 300 /.7)}

/* ════════════════════════════════════════════════════════════════════════
   ORBIT — kill the dead space. The stage was `height:min(58vh,420px)` inside
   a 100dvh grid, which left ~400px of emptiness above the card on a phone
   (clearly visible in the user's screenshot). Now it fills the space it is
   given and centres honestly, minus the chrome.
   ════════════════════════════════════════════════════════════════════════ */
.ar--orbit .orbit{
  min-height:100dvh;padding-top:calc(env(safe-area-inset-top,0px) + 74px);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  box-sizing:border-box;
}
.orbit__stage{width:min(88vw,460px);height:min(64vh,470px)}
@media (max-height: 720px){
  .orbit__stage{height:min(70vh,430px)}
}
.orbit__card{overflow-y:auto;overscroll-behavior:contain}


/* ════════════════════════════════════════════════════════════════════════
   THE ORBIT CARD — content centres in the card instead of stacking at the
   top. Before: a fixed-height card with top-anchored content left ~180px of
   emptiness under the ID line. Now the composition sits as one centred block.
   ════════════════════════════════════════════════════════════════════════ */
.orbit__card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);text-align:center;
}
.orbit__words{margin:0}
.orbit__by{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;justify-content:center;margin:0}
.orbit__acts{margin:0}
.orbit__card .ar__idline{margin-top:var(--s2)}

/* signals earn their weight on a full-bleed card */
.orbit__acts .ar__sig,.arise__acts .ar__sig{min-height:58px;padding:var(--s2) var(--s5)}
.orbit__acts .ar__sig b,.arise__acts .ar__sig b{font-size:1.2rem}
.orbit__acts .ar__sig span,.arise__acts .ar__sig span{font-size:.62rem}


/* ════════════════════════════════════════════════════════════════════════
   ORBIT, THIRD PASS — the card HUGS its content.

   ⚠ A measurement can mislead: symmetric top/bottom padding (136/136) reads
   as "centred" in numbers while looking wrong to the eye, because the CARD
   was ~470px tall for ~200px of content. Symmetry inside an oversized box is
   still an oversized box. The card now sizes to what it holds, and the stage
   centres the card — so a short mantra gets an intimate card and a long one
   grows. This is the difference between measuring and looking.
   ════════════════════════════════════════════════════════════════════════ */
.orbit__stage{height:auto;min-height:0;display:grid;place-items:center}
.orbit__card{
  position:absolute;inset:auto;left:0;right:0;top:50%;
  height:auto;max-height:min(72vh,560px);
  padding:var(--s6) var(--s5);
}
/* the depth transforms must keep the -50% Y that centring now depends on */
.orbit__card[data-pos="0"]{transform:translate3d(0,-50%,0) scale(1);opacity:1;z-index:5;filter:none}
.orbit__card[data-pos="1"]{transform:translate3d(46%,-50%,-260px) rotateY(-22deg) scale(.9);opacity:.42;z-index:4;filter:blur(1.5px)}
.orbit__card[data-pos="-1"]{transform:translate3d(-46%,-50%,-260px) rotateY(22deg) scale(.9);opacity:.42;z-index:4;filter:blur(1.5px)}
.orbit__card[data-pos="2"]{transform:translate3d(76%,-50%,-520px) rotateY(-30deg) scale(.8);opacity:.14;z-index:3;filter:blur(3px)}
.orbit__card[data-pos="-2"]{transform:translate3d(-76%,-50%,-520px) rotateY(30deg) scale(.8);opacity:.14;z-index:3;filter:blur(3px)}
.orbit__card[data-pos="far"]{transform:translate3d(0,-50%,-820px) scale(.7);opacity:0;pointer-events:none;z-index:1}


/* ── THE WORLDS PICKER on the inline claim ── */
.ar__pick{margin-top:var(--s3)}
.ar__pickk{
  margin:0 0 var(--s2);font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ar-mute);
}
.ar__pickk i{font-style:normal;color:var(--ar-faint);letter-spacing:.1em}
.ar__pickrow{display:flex;flex-wrap:wrap;gap:6px}
.ar__pickb{
  padding:7px 13px;min-height:36px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:var(--ar-soft);font:inherit;font-size:.72rem;font-weight:650;cursor:pointer;
  transition:color .22s var(--ar-ease),border-color .22s var(--ar-ease),
             background .22s var(--ar-ease),transform .22s var(--ar-spring);
}
.ar__pickb:hover{color:var(--ar-ink);border-color:rgba(255,255,255,.26);transform:translateY(-1px)}
.ar__pickb.is-on{
  color:var(--ar-ink);border-color:oklch(.70 .21 300 /.62);
  background:oklch(.70 .21 300 /.17);
}

/* ════════ THE SHOUT — the community's live room, at the foot of the feed ════════ */
.ar__shoutwrap { margin: var(--s8) 0 var(--s7); }