/* Dorax Finance — putting Dorax on an iPhone's home screen, the owner's, in the v6 look (v430; the canvas "Instalar-iPhone-V6" and
   "Instalar-iPhone-pasos-V6"; features/phone/r6-install.js): the banner of dark glass floating at the top, the sheet with the three taps.
   The lime flat (v415); the sheet on the cards' #121414, square at the top. */
@media (max-width: 920px) {
  /* ---------- the banner ---------- */
  .r6ins-bar { position: fixed; left: 10px; right: 10px; top: calc(10px + var(--safe-t, 0px)); z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 10px; border-radius: 24px; background: rgba(26, 29, 29, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14), 0 18px 40px -14px rgba(0, 0, 0, .85); color: #EFF1F6; }
  .r6ins-bar.fresh { animation: r6ins-drop .6s cubic-bezier(.34, 1.4, .5, 1) .35s both; }
  .r6ins-bar.out { animation: r6ins-up .34s cubic-bezier(.4, 0, .2, 1) both; pointer-events: none; }
  @keyframes r6ins-drop { from { transform: translateY(-130%); } to { transform: none; } }
  @keyframes r6ins-up { to { transform: translateY(-130%); opacity: 0; } }
  .r6ins-tile { flex: none; display: block; width: 44px; height: 44px; }
  .r6ins-tile svg { display: block; }
  .r6ins-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .r6ins-t b { color: #EFF1F6; font-size: 14.5px; font-weight: 500; line-height: 1.25; }
  .r6ins-t small { color: rgba(239, 241, 246, .6); font-size: 12.5px; line-height: 1.3; }
  .r6ins-add { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 999px; background: #9FD182; color: #101212; font-size: 14.5px; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  .r6ins-x { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: rgba(239, 241, 246, .7); -webkit-tap-highlight-color: transparent; }
  .r6ins-x svg { stroke-width: 2.2; }
  .r6ins-add:active { transform: scale(.965); }
  :is(.r6ins-add, .r6ins-x):focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }

  /* ---------- the sheet with the three taps ---------- */
  :root #overlay .drawer:has(> .body.r6ins) { border: 0; border-radius: 0; background: #121414; box-shadow: 0 -1px 0 rgba(239, 241, 246, .12), 0 -30px 60px -10px rgba(0, 0, 0, .7); color: #EFF1F6; }
  :root #overlay .drawer:has(> .body.r6ins) > :is(header, .grab) { display: none; }
  :root #overlay .body.r6ins { display: flex; flex-direction: column; padding: 16px 16px 0; }
  .r6ins-head { display: flex; align-items: flex-start; gap: 12px; }
  .r6ins-head > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
  .r6ins-head h1 { margin: 0; color: #EFF1F6; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; outline: none; }
  .r6ins-head small { color: rgba(239, 241, 246, .6); font-size: 14px; line-height: 1.35; }
  .r6ins-close { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(239, 241, 246, .08); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14); color: #EFF1F6; }
  .r6ins-close svg { stroke-width: 2.2; }
  .r6ins-steps { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
  .r6ins-steps li { display: flex; align-items: center; gap: 14px; }
  .r6ins-pic { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: block; width: 148px; height: 96px; border-radius: 18px; -webkit-tap-highlight-color: transparent; }
  .r6ins-pic svg { display: block; }
  .r6ins-st { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
  .r6ins-st > span { display: flex; flex-direction: column; gap: 3px; }
  .r6ins-st > span b { color: #EFF1F6; font-size: 15px; font-weight: 500; line-height: 1.3; }
  .r6ins-st small { color: rgba(239, 241, 246, .58); font-size: 13px; line-height: 1.35; }
  .r6ins-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(239, 241, 246, .08); color: #EFF1F6; font-size: 13px; font-weight: 600; }
  /* the three taps, one after the other: a ring opens where the finger goes, and its number lights; a tap on a drawing plays them again (two names) */
  .r6ins-tap { opacity: 0; transform-box: fill-box; transform-origin: center; animation: 3.6s cubic-bezier(.2, .9, .25, 1) var(--d, 0s) infinite; }
  .r6ins-steps.A .r6ins-tap { animation-name: r6ins-tapA; } .r6ins-steps.B .r6ins-tap { animation-name: r6ins-tapB; }
  .r6ins-steps.A .r6ins-n { animation: r6ins-litA 3.6s ease var(--d, 0s) infinite; } .r6ins-steps.B .r6ins-n { animation: r6ins-litB 3.6s ease var(--d, 0s) infinite; }
  .r6ins-steps li .r6ins-tap, .r6ins-steps li .r6ins-n { animation-delay: var(--d, 0s); }
  @keyframes r6ins-tapA { 0% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; } 26% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
  @keyframes r6ins-tapB { 0% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; } 26% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
  @keyframes r6ins-litA { 0%, 30% { background: #9FD182; color: #101212; } 36%, 100% { background: rgba(239, 241, 246, .08); color: #EFF1F6; } }
  @keyframes r6ins-litB { 0%, 30% { background: #9FD182; color: #101212; } 36%, 100% { background: rgba(239, 241, 246, .08); color: #EFF1F6; } }
  .r6ins-note { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: rgba(239, 241, 246, .6); font-size: 13px; line-height: 1.35; }
  .r6ins-note svg { flex: none; stroke-width: 2; }
  .r6ins-foot { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 4px 4px calc(22px + var(--safe-b, 0px)); }
  .r6ins-ok { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 20px; border-radius: 999px; background: #9FD182; color: #101212; font-size: 15px; font-weight: 500; transition: transform .34s cubic-bezier(.2, .9, .3, 1.25); }
  .r6ins-ok:active { transform: scale(.965); }
  .r6ins-never { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 44px; color: rgba(239, 241, 246, .6); font-size: 14.5px; font-weight: 500; }
  #overlay .body.r6ins :is(button):focus-visible { outline: 2px solid #9FD182; outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    .r6ins-bar.fresh, .r6ins-bar.out { animation: none; }
    .r6ins-steps .r6ins-tap { animation: none !important; opacity: 1; transform: none; }
    .r6ins-steps .r6ins-n { animation: none !important; }
    .r6ins-add, .r6ins-ok { transition: none; }
  }
}